Foundations

Space, shape and motion

A 4px spacing grid, a small set of radii, elevation mapped to purpose, translucent glass with a solid floor, and motion that explains rather than decorates.

4px base unit5 elevation levelsHonors reduced motion

Spacing

Every gap, padding and margin comes from one geometric scale on a 4px base. Pick the step, never a pixel value.

14pxIcon to label inside badges.

1.56pxIcon to label inside small buttons.

28pxGaps between related controls.

312pxPadding inside menus and compact rows.

416pxTable cell padding, form field gaps.

520pxCard padding.

624pxGaps between cards in a grid.

832pxPortal page gutters on desktop.

1248pxGaps between docs sections.

1664pxVertical rhythm between page bands.

2496pxHero padding on marketing surfaces.

Layout and breakpoints

Docs read best around 70 characters, so long-form content caps at 56rem. Portal screens use the full width up to 1400px, with 16, 24 and 32px gutters as the viewport grows.

Portal grid

12 columns with 24px gaps on desktop. Cards span 3, 4, 6 or 12 columns and collapse to one column under 768px.

sm640pxSearch shows its label, toasts move to the corner.
md768pxSteppers go horizontal, two-column grids appear.
lg1024pxSidebars become persistent. Below this they are sheets.
xl1280pxThe on-this-page rail appears in docs.
2xl1536pxPortal content caps at 1400px and centers.

Radius

Radius grows with the size of the surface. Controls are 10px, cards 14px, dialogs and the shell 18px. Status pills are fully round so they never read as buttons.

rounded-sm6px
Checkboxes, keyboard keys.
rounded-md8px
Badges, small buttons, menu items.
rounded-lg10px
Buttons, inputs, selects.
rounded-xl14px
Cards, tables, toasts, menus.
rounded-2xl18px
Dialogs, glass panels, the shell.
rounded-full9999px
Status pills, avatars, switches.

Elevation

Depth is mapped to purpose, not picked per surface. In dark mode shadows deepen and gain a faint top highlight, because shadow alone barely shows on navy.

shadow-card
Resting cards, tables, inputs, outline buttons.
shadow-raised
Hovered link cards and glass panels.
shadow-popover
Menus, tooltips, toasts.
shadow-modal
Dialogs and the command palette.
shadow-glow
One focal element per view, such as the live wave.

Glass surfaces

Glass is for chrome that floats above content: the top bar, sidebars, toasts and hero panels. Content itself sits on solid cards so text contrast never depends on what scrolls behind.

glass

72% surface, 20px blur, 160% saturation, a hairline border and the raised shadow.

Solid card

For tables, forms and any dense content. Contrast is fixed and fully predictable.

No blur support
Glass falls back to the solid card color.
Reduce transparency
The system preference turns glass fully solid.
Busy backgrounds
Never place glass over charts or imagery with text on it.

Motion shows cause and effect: a menu grows from its trigger, a toast arrives from the edge, progress fills toward its value. Anything that travels more than a few pixels is removed when reduced motion is on.

Easing curves at the slow duration

ease-standardAnything that moves within the page.
ease-enterElements arriving: menus, toasts, dialogs.
ease-exitElements leaving the screen.

duration-120120ms
Hover and press feedback, tooltips.
duration-200200ms
Menus, toasts, tab indicators.
duration-320320ms
Dialogs, drawers, progress changes.

Iconography

Icons come from lucide at a 2px stroke. Use 16px inside controls, 20px in navigation and alerts, and 24px only in empty states. Icons label nothing on their own: pair them with text or an accessible name.

Sizes

16px · controls

20px · navigation

24px · empty states

Icon tiles

ConnectionsStudioCertifiedRecovery

Give icon-only buttons a name

An icon button carries aria-label text and a tooltip, so its purpose is announced and visible on hover or focus.

Mixed glyphs and pictographs

Don't

Use emoji or mixed icon sets

Emoji render differently on every platform and clash with the stroke icons. One library, one stroke weight.