Layout
A 4px base with an 8px rhythm, four size classes, shell dimensions, seven page templates, three densities, responsive tables and the website layout.
Units and spacing
Pixels, on a 4px base with an 8px rhythm:
| Token | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| px | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64 | 80 |
Use 1–4 inside components, 4–6 between components, 8–12 between sections and 16–20 between website sections.
Size classes (by window width)
| Class | Width | Navigation | Grid columns | Page margin | Gutter | Primary action |
|---|---|---|---|---|---|---|
| Compact | < 640 | Top bar + drawer (304, from the left) | 4 | 16 | 12 | In the header as an icon button, or in a bottom action bar |
| Medium | 640–1023 | Top bar + overlay drawer | 8 | 24 | 16 | Header, right side |
| Expanded | 1024–1279 | Sidebar 256, collapsible to a 72 rail | 12 | 32 | 20 | Header, right side |
| Large | ≥ 1280 | Sidebar 256; content up to 1440, centered | 12 | 40 | 24 | Header, right side |
Code breakpoints map to Tailwind: sm 640, lg 1024, xl 1280 (md 768 only for local arrangements, such as a donut chart beside its legend).
Shell dimensions
| Part | Size |
|---|---|
| Sidebar | 256 (expanded) / 72 (rail); table background, no right border; nav items 36 high, r-sm |
| Navigation drawer | 304, overlay level 4 |
| Top bar | 60 (compact 56); transparent until the page scrolls |
| Mobile bottom action bar | 64 + bottom safe area |
| Content area | Up to 1440; reading content 68ch / 720 |
| Page header | Page title (title-lg) + one line of description; actions on the right; 24 between header and content |
┌──────────────┬────────────────────────────────────────────────┐
│ Sidebar 256 │ Top bar 60 (transparent; frosted + elev-1 │
│ canvas │ once scrolled) │
│ Brand ├────────────────────────────────────────────────┤
│ Nav 36 │ Header: title · description [Filter] [Primary] │
│ Current = │ ↕ 24 │
│ lit slab │ Content (max 1440, margin 32/40) │
│ Quota card │ │
└──────────────┴────────────────────────────────────────────────┘Page templates
Every console page starts from one of these seven templates.
① Overview
Dashboard, analytics home. Metric cards are at least 200 wide; card spacing = --gap.
Header ─────────────────────────────── [Site] [Range]
[Metric][Metric][Metric][Metric] ← 4 columns; medium 2; compact 2
[Main chart, 8 cols ][Share, 4 ] ← single column below medium
[List 4][List 4][List 4] ← single column below medium
[Full-width table card]② Collection
Articles, sites, orders. On compact screens rows become cards (see responsive tables).
Header ─────────────────────────────────────── [Primary]
[Search ⌕][Filter chips …][Sort] [View]
┌ List table (full width, header 32, rows 52) ─┐
│ ☐ Title Status Owner Updated ⋯ │
└──────────────────────────────────────────────┘
Pagination (right) Bulk bar (rises from the bottom on selection)③ Detail
Article detail, site detail.
← Back / breadcrumb
[Tile 44] Object name (title-lg) [Status] [Secondary][Primary]
[Segmented: Overview | Versions | Distribution | Log] ← ≤ 4 views; more use tabs
┌ Main, 8 cols ──────────┐┌ Aside, 4 cols ─┐
│ Content cards ││ Grouped list │
└─────────────────────────┘└────────────────┘④ Settings
Below medium the left navigation becomes a segmented control or a dropdown at the top.
Header
┌ Group nav 220 ────┐┌ Content, max 720 ───────────┐
│ General ││ Grouped list (surface+r-lg) │
│ Members ││ [Tile] Name Value › │
│ Billing … ││ Grouped list … │
└────────────────────┘└─────────────────────────────┘
Save bar (rises when there are changes)⑤ Editor
Article editing. The editor hides the sidebar (full-screen shell); below medium the inspector becomes a bottom sheet.
Top bar: ← Article · Saving… / Saved 10:32 [Preview][Submit for review]
┌ Canvas, max 720, centered ─────────┐┌ Inspector 320 (collapsible) ┐
│ Title ││ SEO / GEO / Publish │
│ Body ││ AI suggestions (dispersion)│
└────────────────────────────────────┘└────────────────────────────┘⑥ Flow
Site setup, SDK onboarding, first order.
Steps: ① Basics ── ② Domain ── ③ Theme ── ④ Done
┌ Single column, max 560, centered ┐
│ Form │
└──────────────────────────────────┘
[Back] [Next] (bottom right; the key light goes to Next only)⑦ Empty / first run
Centered in a card or the content area with ≥ 48 above and below; no illustrations.
[Icon tile 64, domain color]
Title (title)
One line of explanation (ink-2, ≤ 2 lines)
[Primary] Text link: Learn moreDensity (data-density)
| Token | Comfortable | Default | Compact |
|---|---|---|---|
| Used in | Website, cluster sites | Console | Admin |
--control control height | 40 | 36 | 32 |
--row row height | 56 | 52 | 44 |
--pad card padding | 24 | 20 | 16 |
--gap card spacing | 24 | 20 | 16 |
--section section spacing | 40 | 32 | 24 |
data-densitycan apply to part of a page (such as one wide table in the admin app).- On touch devices (
pointer: coarse)--controlis at least 44 regardless of density.
Responsive tables
| Rule | Detail |
|---|---|
| Column priority | P1 always visible (name, main value); P2 ≥ md (768); P3 ≥ xl (1280) |
| Compact class | Rows become cards: name on one line, status badge on the right, secondary info in two caption columns |
| Truncation | The name column truncates flexibly (truncate + a tooltip with the full text); number columns never truncate |
| Three list cards side by side | Keep only 2–3 number columns; hide the rest below 2xl (1536) |
| Horizontal scroll | Only for wide admin tables, with the first column fixed |
Website layout
- Content up to 1200; page margin
max(16px, safe area), 32 from 720 up. - Section padding
clamp(56px, 8vw, 104px); section title 40 / 48 + lead 18 / 30, max 68ch. - The hero carries one claim and one primary action; the refraction illustration is the hero's only dispersion element.
Type, shape & icons
Geist with system CJK fonts, the console type scale and typesetting rules; radius tokens and the concentric rule; Lucide icons and icon tiles.
Interaction
State model, hit targets, response timing, feedback levels, destructive actions, hide versus disable, forms, keyboard, tooltips, bulk selection, drag and drop, copy, navigation and touch gestures.