Interface Foundations
Grid & Width
Desktop information pages use a 12-column grid with a maximum body width of about 864 px; complex console pages may widen to 1280 px. Mobile uses a 4-column grid with at least 16 px of safe margin on both sides. Avoid fixed pixel widths that could cause horizontal scrollbars.
Spacing
All common spacing follows a 4 px stepping system: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Inside components use 8, 12, or 16; between components use 16, 24, or 32. Avoid off-system values like 13 px or 19 px that are added for visual intuition alone.
Radius
| Radius type | Value | Use |
|---|---|---|
| Small | 6 px | Tags, small tooltips |
| Control | 8 px | Buttons, inputs |
| Card | 12 px | Cards, panels |
| Large | 16 px | Large containers, brand areas |
Capsule (pill) shapes are only for short status tags and avatars; long-text buttons, tables, and regular containers must not use them.
Elevation
Cards use a 1px border by default to define boundaries instead of shadows. Small shadows suit popover menus, medium shadows suit dialogs, and large shadows are only for blocking top layers. Avoid combining thick borders, strong shadows, and gradients on the same element.
Motion
- 100 ms: presses and immediate states.
- 150 ms: hover and focus.
- 200 ms: expand, collapse, and regular transitions.
- 300 ms: page-level or large-container transitions.
Only animate properties like opacity and transform that don't trigger reflow/repaint of the layout. Also respect prefers-reduced-motion to automatically remove non-essential animations.
Theming
The site's colors and theme variables are maintained centrally in global styles. Theme state toggles data-theme="light|dark" on the root element; when unset, it follows the system preference by default. Avoid writing theme-detection logic or redefining theme colors inside components.