Authoritative reference for twin hi-fi HTML mockups. Tokens and components are implemented in CSS; this page maps Figma-scale specs to those implementations (Outfit + Material Symbols; palette in hifi-common.css).
New mockup file: load stylesheets in this order:
<link rel="stylesheet" href="hifi-common.css" /> <link rel="stylesheet" href="hifi-components.css" /> <!-- optional: form controls --> <link rel="stylesheet" href="hifi-controls.css" /> <link rel="stylesheet" href="hifi-theme-el.css" />
README Mockups index Buttons (full) Checkboxes & radios (full) Cards (full)
Swatches use live CSS variables from :root (hifi-common.css). Hex labels mirror the token file — keep them in sync when editing ramps.
Primary brand (--pb-*)
#3a39ff#4d4cff#6160ff#7574ff#8888ff#9c9cff#b0afff#c3c3ff#d7d7ff#ebebffSecondary brand (--sb-*)
#dcb8fe#dfbffe#e3c6fe#e6cdfe#ead4fe#eddbfe#f1e2fe#f4e9fe#f8f0fe#fbf7feThird / coral (--tc-*)
#de3f17#e1522e#e46545#e7785c#eb8b73#ee9f8b#f1b2a2#f5c5b9#f8d8d0#fbebe7Primary dark (--pd-*)
#0b0539#231d4c#3b3760#545074#6c6988#85829c#9d9baf#b5b4c3#ceced7#e6e6ebPrimary background (--pbg-*)
#f8f3ee#f8f4ef#f7f5f1#f8f6f3#f9f7f4#faf9f6#fbfaf8#fcfbf9#fdfcfb#fefdfdGreen success (--g-*)
#308242#448e54#599b67#6ea77a#82b48d#97c0a0#accbb3#c0d9c6#d5e6d9#eaf2ecRed danger (--r-*)
#d91d17#dc332e#e04a45#e4605c#e77773#ec8e8b#efa4a2#f3bbb9#f7d1d0#fbe8e7Yellow warning (--y-*)
#ffaa00#ffb219#ffbb33#ffc34c#ffcc66#ffd47f#ffdd99#ffe5b2#ffeecc#fff6e5Prefer these aliases in new UI; they map to palette steps in hifi-common.css.
| Token | Resolves to | Use |
|---|---|---|
--primary | --pb-10 | Primary actions, links |
--text-primary | --pd-10 | Body text |
--deep-ink / --text-heading | --pd-0 | Headings |
--text-secondary | --pd-50 | Secondary copy |
--surface / --white | --pbg-90 | Cards, inputs |
--input-border | --pd-90 | Default borders |
--success / --success-bg | --g-0 / --g-90 | Positive state |
--warning / --warning-bg | --y-0 / --y-90 | Warning state |
--error / --error-bg | --r-0 / --r-90 | Error / destructive |
Figma references General Sans Variable; mockups use Outfit via --font-sans. Sizes and line heights follow the UI kit scale; letter-spacing is 0. Copy the .ds-* class names below into page-local styles or match values in your own rules.
| Role | Weight | Size / line | Sample class |
|---|---|---|---|
| H1 | 700 | 48 / 58 | .ds-h1 |
| H2 | 700 | 40 / 48 | .ds-h2-type |
| H3 | 700 | 32 / 38 | .ds-h3-type |
| H4 | 700 | 26 / 31 | .ds-h4-type |
| H5 | 700 | 24 / 28 | .ds-h5-type |
| S1 | 600 | 18 / 28 | .ds-s1 |
| S2 | 600 | 16 / 24 | .ds-s2 |
| B1 / B2 | 400 / 500 | 16 / 24 | .ds-b1 / .ds-b2 |
| B3 / B4 | 400 / 500 | 14 / 20 | .ds-b3 / .ds-b4 |
| C1 / C2 / C3 | 400 / 500 / 500 | 12×16, 10×14 | .ds-c1 … .ds-c3 |
| Label | 500 | 12 / 16 | .ds-label-type |
H1 Headline
H2 Headline
H3 Headline
S1 Subtitle — key supporting line
B1 Body regular for paragraphs and form descriptions.
C1 Caption or helper
Label
Giant 18/24
Large 16/20
Medium 14/18
Small 12/16
Tiny 10/12
Viewport reference 1440 × 1024. Twelve columns, 120px side margins, 20px gutter.
Reference 393 × 852. Four columns, 16px margins and gutter.
Phone mockups in this repo use the framed device (~440×956 CSS px); align content to the 4-column mental model for consistency.
Implemented CSS variables (actual values in hifi-common.css): inputs --radius-input (12px), cards --radius-card (16px), buttons pill via --radius-btn (40px / full pill on .twin-btn), chips --radius-chip (20px).
Use Material Symbols Outlined as ligature text inside <span class="hifi-icon"> (or .twin-btn__icon on buttons). Stroke-based Figma icons map to the nearest ligature name. Typical optical sizes: 16–24px (.hifi-icon--sm where defined).
Use .twin-btn with .twin-btn-primary, .twin-btn-secondary, or .twin-btn-text. Sizes: .twin-btn--sm, .twin-btn--xs. Trailing icon: <span class="twin-btn__icon" aria-hidden="true">arrow_forward</span>.
Default field stack: .hifi-field, .hifi-label, .hifi-input. State modifiers: .hifi-input--success, .hifi-input--warning, .hifi-input--error, .hifi-input--disabled (or native disabled).
Pill field: .hifi-search with .hifi-search__icon (Material ligature), .hifi-search__input (plain input; may also combine .hifi-input.hifi-search__input — height is reset inside .hifi-search), and optional button.hifi-search__action.hifi-search__action--circle or --pill.
Checkboxes and radios use .hifi-checkbox / .hifi-radio patterns from hifi-controls.css.
Labeled horizontal flow: .hifi-stepper with .hifi-stepper__labels / .hifi-stepper__col / .hifi-stepper__label, then .hifi-stepper__rail with .hifi-stepper__track, .hifi-stepper__track-fill (width %), and .hifi-stepper__dots with .hifi-stepper__dot + --current / --complete. Compact wizard dots remain .hifi-steps / .hifi-step in screens.
Non-interactive reference only. Styles use the .ds-cal* prefix in this page. Promote to shared CSS if a real scheduling screen ships.
Representative patterns from hifi-components.css. Use full markup from cards-showcase.html when cloning.
Introduction to democracy
20 min · Lesson
Chips: .hifi-pill / .hifi-pill--active. Tag field for multi-value: .hifi-tag-field, .hifi-tag-chip, .hifi-tag-chip--selected, .hifi-tag-field__input. Menu: .hifi-dropdown + button.hifi-dropdown__item (+ --selected).