| version | alpha | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | clientside-containers | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Design system for clientside-containers — Dark theme only. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
This is the design system for clientside-containers — the browser dashboard for agent sandboxes, app bottles, and mini OS containers. The aesthetic is minimal and high-contrast on dark surfaces: restrained color, clear hierarchy, and content set on near-black backgrounds. Prioritize readability and accessibility, and use color to signal state or hierarchy rather than decoration.
This app uses the Dark theme only. Colors are sRGB hex with Display P3 equivalents where noted. Typography uses Geist Sans and Geist Mono.
Each non-background scale runs 10 steps (100–1000), and the step encodes intent, not just lightness:
100default background200hover background300active background400default border500hover border600active border700solid fill, high contrast800solid fill, hover900secondary text and icons1000primary text and icons
background-100 is the primary page and card surface (#0a0a0a); background-200 is a secondary surface for subtle separation (#171717). The gray-alpha-* tokens are translucent white overlays for borders, dividers, overlays, and hover states. Solid gray-* holds its contrast on any surface, so use it for text and opaque fills. Accent scales carry meaning: blue for links, focus, and the primary call to action; red for errors and destructive actions; amber for warnings and booting states; plus green, teal, purple, and pink for status and tier accents.
Geist Sans sets UI and prose; Geist Mono sets code, data, terminal output, and tabular figures. The typography tokens above carry concrete fontFamily, fontSize, fontWeight, lineHeight, and letterSpacing:
- Headings,
heading-72throughheading-14, title pages and sections;letterSpacingtightens as the size grows. - Labels,
label-20throughlabel-12, carry single-line, scannable text: navigation, form labels, table headers, metadata. - Copy,
copy-24throughcopy-13, set multi-line body text with a tallerlineHeight. - Buttons,
button-16throughbutton-12, are medium-weight labels for buttons and compact controls.
copy-14 and label-14 cover most text. The -mono tokens pair Geist Mono with the same metrics; prefer tabular figures when numbers need to align.
Spacing follows a 4px scale: 4, 8, 12, 16, 24, 32, 40, 64, 96px. Keep a three-step rhythm: 8px inside a group, 16px between groups, 32–40px between sections. Cards use 24px padding, 16px when compact and 32px for hero areas. Center content in a 1200px column with side padding that grows at wider breakpoints, and make every layout work on mobile and desktop. Breakpoints are sm 401px, md 601px, lg 961px, xl 1200px, and 2xl 1400px.
Hierarchy comes from tonal surfaces and borders first, so shadows stay subtle. Apply these box-shadow values for the dark theme:
- Raised cards:
0 2px 2px rgba(0, 0, 0, 0.32) - Popovers and menus:
0 1px 1px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.24), 0 16px 24px -8px rgba(0, 0, 0, 0.32) - Modals and dialogs:
0 1px 1px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.24), 0 24px 32px -8px rgba(0, 0, 0, 0.4)
Tooltips take the lightest of these. Pair each elevation with the matching radius below.
Use motion only when it clarifies a change, never for decoration. Most interactions should feel instant: a duration of 0ms is often the snappiest and best choice, and the call is context-dependent. When motion genuinely helps, such as revealing or moving an element, keep it short and physical with the easing cubic-bezier(0.175, 0.885, 0.32, 1.1): roughly 150ms for state changes, 200ms for popovers and tooltips, and 300ms for overlays and modals. Avoid long, looping, or attention-grabbing animation, and honor prefers-reduced-motion by dropping nonessential motion.
Radii stay tight: 6px for everyday surfaces and controls, 12px for menus and modals, 16px for fullscreen surfaces. Reserve 9999px for pills, avatars, and circular controls. Keep one radius family per view rather than mixing rounded and sharp corners.
The components tokens above give ready-to-use values per element (backgroundColor, textColor, rounded, height) drawn from this theme:
- Primary button: solid
gray-1000fill with abackground-100label, for the single most important action on a view (e.g. New Container, Create). - Secondary button:
background-100fill with a translucentgray-alpha-400border. - Tertiary button: transparent fill with
gray-1000text for low-emphasis actions; it tints withgray-alphaon hover. - Error button: solid
red-800fill with white text, for destructive actions (e.g. Delete Container). - Input:
background-100fill, translucent border, 6px radius.
The variant tokens are the default medium (40px) size. Use the button-small/input-small (32px) and button-large/input-large (48px) tokens for the other sizes; large buttons step up to button-16. Hover and active states step up the scale: a 100 fill becomes 200 on hover and 300 on active, and borders move from 400 to 500 to 600. Disabled uses a gray-200 fill, gray-700 text, and a not-allowed cursor. Focus shows a two-layer ring (box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #0070f3): a 2px gap in the surface color, then a 2px blue-700 ring.
Container runtime views (emulator screen, agent console, terminal) use a pure #000 surface so guest output stays legible; the dashboard chrome, cards, modals, and settings share the same dark Geist palette (background-100, gray-1000 text).
Copy is part of the design; keep it precise and free of filler.
- Use Title Case for labels, buttons, titles, and tabs; sentence case for body, helper text, and toasts.
- Name actions with a verb and a noun (
New Container,Delete Container), neverConfirm,OK, or a bare verb. - Write errors as what happened plus what to do next:
Boot failed. Check that the OS image finished downloading, then try again. - Toasts name the specific thing that changed, drop the trailing period, and never say
successfully:Container deleted, notSuccessfully deleted the container. - Empty states point to the first action:
No containers yet. Create one to run an agent, app, or mini OS. - Use the present participle with an ellipsis for in-progress states:
Booting…,Saving…. - Use numerals (
3 containers), curly quotes, and the ellipsis character; skippleaseand marketing superlatives.
- Use the gray scale to rank information:
1000for primary text,900for secondary,700for disabled. - Keep solid accent color for state and the single most important action on a view.
- Hold WCAG AA contrast (4.5:1 for body text).
- Show the focus ring on every interactive element at
:focus-visible, and never remove an outline without a visible replacement. - Apply the typography tokens instead of setting font size, line height, or weight by hand.
- Don't signal state with color alone; pair it with an icon or text label.
- Don't use
background-200as a general fill; it is for subtle separation only. - Don't mix rounded and sharp corners, or more than two font weights, in one view.
- Don't swap
gray-*forbackground-*; they are separate scales.