Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.
1---2name: "Helvetic Grid"3description: "Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint."4tags: [swiss, minimal, editorial, premium, modern]5colors:6 primary: "#0a0a0a"7 secondary: "#5a5a5a"8 tertiary: "#0a0a0a"9 neutral: "#ece8df"10 surface: "#f4f0e6"11typography:12 display: "Inter Tight"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "7.5rem / 0.88 / 900 / -0.05em"17 h1: "4.5rem / 0.96 / 800 / -0.04em"18 h2: "2.25rem / 1.1 / 700 / -0.025em"19 body: "1rem / 1.55 / 400 / -0.005em"20radius:21 sm: 0px22 md: 0px23 lg: 0px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(10,10,10,0.14)"30 divider: rgba(10,10,10,0.14)31buttons:32 primary:33 background: #0a0a0a34 color: #f4f0e635 border: none36 shape: sharp37 padding: 13px 24px38 font: 600 / 0.8125rem / 0.04em39 uppercase: true40 secondary:41 background: transparent42 color: #0a0a0a43 border: 1px solid #0a0a0a44 shape: sharp45 padding: 13px 24px46 font: 600 / 0.8125rem / 0.04em47 uppercase: true48 outline:49 background: transparent50 color: #0a0a0a51 border: 1px solid rgba(10,10,10,0.20)52 shape: sharp53 padding: 13px 24px54 font: 600 / 0.8125rem / 0.04em55 uppercase: true56 ghost:57 background: transparent58 color: #5a5a5a59 border: none60 shape: sharp61 padding: 13px 18px62 font: 600 / 0.8125rem / 0.04em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 12px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Helvetic Grid77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Helvetic Grid** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#0a0a0a`, text `#f4f0e6`, padding `13px 24px`, weight `600`, uppercased.114- **Secondary** — sharp shape, text `#0a0a0a`, border `1px solid #0a0a0a`, padding `13px 24px`, weight `600`, uppercased.115- **Outline** — sharp shape, text `#0a0a0a`, border `1px solid rgba(10,10,10,0.20)`, padding `13px 24px`, weight `600`, uppercased.116- **Ghost** — sharp shape, text `#5a5a5a`, padding `13px 18px`, weight `600`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#f4f0e6`125- Border: `1px solid rgba(10,10,10,0.14)`126- Shadow: `none`127- Radius: `radius.lg` (`0px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `thin-bars`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Helvetic Grid is Swiss-poster discipline applied at web scale. Headlines run in Inter Tight at 900 weight, 120px, with -0.05em tracking — letterforms compressed into a single block that fills the column. Body sits in Inter at 16px, ink on a warm bone `#f4f0e6` (never white). The 12-column grid is visible as 1px hairlines at 14% ink — not decorative, structural. The single accent is vermillion `#e23420`, used only as a 2px underline beneath the active navigation item. Nothing else gets color.172 173The discipline is in the absence: no shadows, no radii, no decorative chrome. Just type, grid, and one red mark.174 175**Signature moves**176- Inter Tight 900 at 120px hero with -0.05em tracking — typography fills the column edge-to-edge177- Visible 12-column grid as 1px hairlines at 14% ink — structure is part of the design178- Sharp 0px radius everywhere — corners are forbidden179- Vermillion `#e23420` only as a 2px underline under the active nav — never as a fill180- All UI labels uppercase 0.04em tracking — that's the poster voice181 182## 2. Palette183 184### Surfaces185- **Bone** `#f4f0e6` — page background (warm, never white)186- **Bone Lift** `#ece8df` — secondary surfaces, table headers187- **Hairline** `rgba(10,10,10,0.14)` — grid lines, dividers, card edges188 189### Ink190- **Ink** `#0a0a0a` — text, headings, primary CTA fill191- **Ink 60** `#5a5a5a` — secondary text192 193### Accent194- **Vermillion** `#e23420` — active nav underline (2px), chart highlight bar195- That is the only color in the system.196 197## 3. Typography198 199| Role | Font | Size | Weight | Leading | Tracking |200|------|------|------|--------|---------|----------|201| Hero | Inter Tight | 120px | 900 | 0.88 | -0.05em |202| H1 | Inter Tight | 72px | 800 | 0.96 | -0.04em |203| H2 | Inter Tight | 36px | 700 | 1.1 | -0.025em |204| Body | Inter | 16px | 400 | 1.55 | -0.005em |205| UI / Button | Inter | 13px | 600 | 1.4 | 0.04em uppercase |206| Caption / Mono | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |207 208Inter Tight does all display work — its narrow proportions are the poster voice. Inter handles UI and body. Mono is reserved for figure numbers, dates, and column markers.209 210## 4. Buttons211 212### Primary (Ink Block)213```css214background: #0a0a0a;215color: #f4f0e6;216padding: 13px 24px;217border-radius: 0;218font-weight: 600;219text-transform: uppercase;220letter-spacing: 0.04em;221```222 223### Secondary (Ink Outline)224- Transparent, 1px solid ink, ink text — same sharp shape, same uppercase voice225 226### Outline & Ghost227- Outline: transparent, 1px hairline at 20% ink228- Ghost: no border, ink-secondary, hover underlines229 230## 5. Cards231 232```css233background: #f4f0e6;234border: 1px solid rgba(10,10,10,0.14);235border-radius: 0;236box-shadow: none;237```238 239NO shadows, NO radii, NO inset highlights. Cards are demarcated by 1px hairlines and the grid. Featured cards get a 1px ink top border (3px wide) — that is the only chrome.240 241## 6. Charts242 243Thin precise bars (3px wide, 12px gap). One bar in vermillion, others in 18% ink. NO gridlines (the column grid does that work). Line charts at 1px ink with no fill. Y-axis labels in JetBrains Mono uppercase 11px set in the left margin.244 245## 7. Tabs246 247Underline 2px in vermillion for the active state. Inactive tabs are ink-secondary in uppercase 0.04em. Hover = ink text, no underline. Tabs sit on a 1px hairline baseline that runs the full column width.248 249## 8. Spacing250 251- Base 8px (column-aware)252- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160`253- Section padding: 128px desktop, 64px mobile254- 12-column grid with 24px gutters — visible at 14% ink255 256## 9. Do's & don'ts257 258✅ **Do**259- Hold Inter Tight at 900 / -0.05em for the hero — the compression IS the brand260- Show the 12-column grid at 14% ink — structure is the design261- Use vermillion only as a 2px nav underline + chart highlight — never as a fill262- Use sharp 0px radius on everything — corners break the poster263 264❌ **Don't**265- Use a second accent color — vermillion alone, on two specific surfaces266- Use any radius — pills are forbidden, even on badges267- Add card shadows or inset highlights — flat is the law268- Use Inter Tight under 700 weight — anything lighter loses the block269 270---271 272## Tokens273 274> Generated from the same source the live preview renders from.275> Treat the values below as the contract — never substitute approximations.276 277### Colors278 279| Role | Value |280|-----------|-------|281| primary | `#0a0a0a` |282| secondary | `#5a5a5a` |283| tertiary | `#0a0a0a` |284| neutral | `#ece8df` |285| surface | `#f4f0e6` |286 287### Typography288 289- **Display:** Inter Tight290- **Body:** Inter291- **Mono:** JetBrains Mono292 293| Role | size / leading / weight / tracking |294|------|------------------------------------|295| Hero | 7.5rem / 0.88 / 900 / -0.05em |296| H1 | 4.5rem / 0.96 / 800 / -0.04em |297| H2 | 2.25rem / 1.1 / 700 / -0.025em |298| Body | 1rem / 1.55 / 400 / -0.005em |299 300### Radius301 302- sm: `0px`303- md: `0px`304- lg: `0px`305- pill: `9999px`306 307### Shadows308 309- **card:** `none`310- **button:** `none`311 312### Borders313 314- **card:** `1px solid rgba(10,10,10,0.14)`315- **divider:** `rgba(10,10,10,0.14)`316 317### Buttons318 319Four variants, each fully tokenized. The preview renders from these exact values.320 321#### Primary322 323| Property | Value |324|----------|-------|325| shape | `sharp` |326| background | `#0a0a0a` |327| color | `#f4f0e6` |328| border | `none` |329| padding | `13px 24px` |330| fontWeight | `600` |331| fontSize | `0.8125rem` |332| tracking | `0.04em` |333| uppercase | `true` |334 335#### Secondary336 337| Property | Value |338|----------|-------|339| shape | `sharp` |340| background | `transparent` |341| color | `#0a0a0a` |342| border | `1px solid #0a0a0a` |343| padding | `13px 24px` |344| fontWeight | `600` |345| fontSize | `0.8125rem` |346| tracking | `0.04em` |347| uppercase | `true` |348 349#### Outline350 351| Property | Value |352|----------|-------|353| shape | `sharp` |354| background | `transparent` |355| color | `#0a0a0a` |356| border | `1px solid rgba(10,10,10,0.20)` |357| padding | `13px 24px` |358| fontWeight | `600` |359| fontSize | `0.8125rem` |360| tracking | `0.04em` |361| uppercase | `true` |362 363#### Ghost364 365| Property | Value |366|----------|-------|367| shape | `sharp` |368| background | `transparent` |369| color | `#5a5a5a` |370| border | `none` |371| padding | `13px 18px` |372| fontWeight | `600` |373| fontSize | `0.8125rem` |374| tracking | `0.04em` |375| uppercase | `true` |376 377### Charts378 379| Property | Value |380|----------|-------|381| variant | `thin-bars` |382| strokeWidth | `1` |383| fillOpacity | `0` |384| gridlines | `false` |385| barGap | `12px` |386| highlight | `single` |387| dotMarker | `false` |388 389---390 391## Pro tokens392 393> Production-fidelity tokens. States, density, motion, elevation,394> content rules and a measured WCAG contract — derived from the395> resting tokens unless explicitly authored.396 397### States398 399#### Button400 401- **hover** — bg: `rgba(10, 10, 10, 0.92)`, shadow: `0 4px 20px -8px rgba(10, 10, 10, 0.4)`402- **focus** — outline: `1.5px solid #0a0a0a`, outline-offset: `4px`403- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`404- **disabled** — opacity: `0.45`405- **loading** — opacity: `0.7`406- **selected** — bg: `#0a0a0a`, color: `#f4f0e6`407 408#### Input409 410- **hover** — border: `1px solid #0a0a0a`411- **focus** — border: `1px solid #0a0a0a`, shadow: `0 1px 0 0 #0a0a0a`412- **disabled** — opacity: `0.45`413- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`414 415#### Card416 417- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`418- **selected** — border: `1px solid #0a0a0a`419 420#### Tab421 422- **hover** — color: `#0a0a0a`423- **focus** — outline: `1.5px solid #0a0a0a`, outline-offset: `3px`424- **selected** — color: `#0a0a0a`, border: `0 0 2px 0 solid #0a0a0a`425 426### Density427 428| Mode | padding × | row × | body | radius × | Use for |429|------|-----------|-------|------|----------|---------|430| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |431| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |432| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |433 434### Motion435 436**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.437 438```css439transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);440```441 442| Token | Value |443|-------|-------|444| duration.instant | `80ms` |445| duration.fast | `180ms` |446| duration.base | `320ms` |447| duration.slow | `500ms` |448| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |449| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |450| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |451| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |452 453### Elevation454 455Five-level scale, system-specific recipe.456 457| Level | Shadow | Recipe |458|-------|--------|--------|459| level0 | `none` | Hairline only — typical editorial resting state. |460| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |461| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |462| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |463| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |464 465### Content466 467- **measure:** `60ch` (max line length for body prose)468- **paragraph spacing:** `1.5em`469- **list indent:** `1.75em`470- **list gap:** `0.55em`471- **link:** color `#0a0a0a`, underline `always`472- **blockquote:** border `4px solid #0a0a0a`, padding `0.4em 0 0.4em 1.5em`473- **code:** background `rgba(10, 10, 10, 0.06)`, color `#0a0a0a`474 475### Accessibility (WCAG 2.1)476 477**Overall:** AA478 479| Pair | Ratio | Required | Grade | Suggested fix |480|------|-------|----------|-------|---------------|481| Body text on surface | 17.4:1 | AA | AAA | — |482| Body text on canvas | 16.19:1 | AA | AAA | — |483| Muted text on surface | 6.06:1 | AA | AA | — |484| Accent on surface | 17.4:1 | AA-Large | AAA | — |485| Accent on canvas | 16.19:1 | AA-Large | AAA | — |486 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter Tight"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#0a0a0a', secondary: '#5a5a5a', accent: '#0a0a0a', neutral: '#ece8df', surface: '#f4f0e6', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design.
Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows.