Design System
Design GlobalStacks console and extension interfaces with the current product tokens, surfaces, components, and interaction patterns.
Design system
GlobalStacks uses one console design system for first-party screens and sandboxed extension UI. The console is quiet, operational, and dense: it should help users scan infrastructure state, compare resources, and act without decorative distraction.
The current implementation source of truth is the console theme, shared utility classes, and local UI primitives. Extension components should preserve these conventions even when provider-specific content is rendered in a sandboxed extension view.
Design goals
- Keep operational data compact, structured, and easy to scan.
- Use semantic status, progress, and reconciliation labels instead of one-off colors.
- Keep actions explicit and scoped to the current resource.
- Prefer GlobalStacks-rendered extension components over custom visual systems.
- Support dark and light themes through tokens, not hard-coded surfaces.
- Keep motion subtle and disable nonessential transitions for reduced-motion users.
Theme tokens
Use semantic tokens instead of raw colors. The console defines dark and light values for the same names.
| Token | Use |
|---|---|
--app-bg | Application background. |
--app-fg | Primary text and high-contrast controls. |
--muted | Secondary labels, captions, and inactive navigation. |
--muted-strong | Readable supporting text. |
--border-soft | Default panel, table, and control borders. |
--border-strong | Focused input and stronger separation states. |
--surface-bg | Soft translucent surfaces and status pills. |
--surface-bg-strong | Primary panel/card backgrounds. |
--surface-elevated | Hover states, secondary controls, and subtle nested areas. |
--topbar-bg | Sticky navigation and table header surfaces. |
--overlay-bg | Dialog and modal overlay background. |
Typography
The console uses Inter for interface text and JetBrains Mono for commands, IDs, and logs.
| Role | Treatment |
|---|---|
| Page title | text-2xl to text-3xl, font-black, tight line height. |
| Section heading | text-lg to text-xl, font-bold or font-black. |
| Body | text-sm, normal or medium weight. |
| Caption | text-xs or text-[10px], often uppercase for section labels. |
| Code and IDs | Mono font, compact, never oversized. |
Use theme-heading, theme-muted, and theme-muted-strong for text color. Do not create new text color scales for extensions.
Layout
Console pages use constrained, information-first layouts:
| Pattern | Use |
|---|---|
dashboard-card | Primary repeated resource cards and major panels. |
theme-panel | Dialogs, overlays, and strong panels. |
theme-soft-panel | Table headers, inset areas, and low-emphasis panels. |
theme-line | Borders around controls, rows, and separators. |
status-pill | Compact status and metadata labels. |
Cards are for resource items, dialogs, and framed tools. Do not nest cards inside cards; use borders, dividers, and compact rows for hierarchy inside a panel.
Cloudflare R2
Bucket-backed storage configured for the selected cluster.
Navigation
Navigation is compact and stateful:
- Use icon plus label for primary console navigation.
- Use muted text for inactive items and
theme-accent-panelfor active items. - Keep workspace, organization, and cluster switching visually distinct from page navigation.
- Use tabs for sibling views on the same resource, not for unrelated destinations.
Actions
Use the shared button variants:
| Variant | Use |
|---|---|
default / action-button | Primary action for the current panel or form. |
secondary / ghost-button | Secondary action that remains visible. |
ghost | Low-emphasis inline action. |
icon | Toolbar, close, refresh, copy, and compact affordances. |
Prefer one primary action per view. Destructive actions should use clear labels and confirmation when the operation is not easily reversible.
Forms
Forms should use labelled fields, compact spacing, and clear submit actions.
| Element | Current treatment |
|---|---|
| Text input | theme-input, h-11, rounded-xl, px-4, focused --border-strong. |
| Select | theme-input, compact height, same radius as inputs. |
| Checkbox | Use for binary settings only. |
| Help text | theme-muted, text-xs, placed near the field it explains. |
| Errors | Semantic alert or inline text with danger tone. |
Fields should not rely on placeholder text as the only label. Long generated values such as endpoints, IDs, and digests should wrap or truncate with a title where needed.
Status
Use status pills and semantic tones for operational state.
| Tone | Use |
|---|---|
| Success | Ready, connected, active, healthy, complete. |
| Warning | Syncing, degraded, pending, unverified, expiring soon. |
| Danger | Failed, blocked, denied, disconnected, destructive. |
| Muted | Unknown, not reported, inactive, inherited, informational metadata. |
| Info | In progress, applying, provisioning, active diagnostics. |
Do not use color alone. Include a short label, and use titles or detail rows when users need more context.
Tables and grids
Operational lists should default to DataGrid-style behavior: stable columns, compact rows, sortable columns where useful, explicit row actions, and empty/loading states. Static key-value information can use a simple Table.
Table headers use the same blurred surface treatment as the topbar. Keep headers short, align numeric values right, and use status columns for lifecycle and reconciliation state.
Dialogs and overlays
Dialogs are for focused decisions and short configuration flows.
| Part | Treatment |
|---|---|
| Overlay | theme-overlay, fixed, blurred background. |
| Content | theme-panel, centered, max-w-3xl, rounded-3xl, p-8. |
| Title | theme-heading, text-2xl, font-black. |
| Description | theme-muted, text-sm, comfortable line height. |
| Close | Icon button in the top-right corner. |
Avoid long workflows inside a dialog. Use a full page or focused extension view when users need to compare data while acting.
Logs and terminals
Logs and terminals use a denser, mono-forward treatment:
- Use JetBrains Mono for command output, IDs, and log messages.
- Use
log-viewer-panelandlog-viewer-rowpatterns for selectable logs. - Preserve readable level colors: info, warn, error, and debug.
- Use a dark terminal surface for terminal sessions, with compact toolbar controls.
- Keep copy, fullscreen, reconnect, and close actions as icon buttons.
Icons
The console uses Lucide icons. Use icons for tools, navigation, resource type hints, toolbar actions, close, copy, refresh, search, and settings. Pair icons with text in navigation and important commands; icon-only buttons need accessible labels or tooltips.
Motion and theme
Theme changes use the browser view-transition path when available. Other motion should be restrained and functional. Honor prefers-reduced-motion by disabling animations and long transitions.
Avoid layout shifts from hover states, dynamic labels, or loading indicators. Fixed-size toolbar controls and stable table columns are preferred.
Extension alignment
Extensions should use the versioned component library rather than custom UI. The sandboxed iframe renderer maps extension components onto this design system, while the parent console passes theme, viewport, and interaction context through the bridge. Provider-specific screens should inherit console tokens, typography, spacing, status treatment, and accessibility.
Use the component library when choosing primitives, the style extension UI page when applying tokens and layout props, and this page when deciding how those primitives should be arranged.