swiss · minimal · editorial · premium · modern

Helvetic Grid.

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.

01 · Preview

The kitchen sink.

Helvetic.app

ProductPricingDocsAbout

Sign inGet started

swiss · minimal · editorial

Build with Helvetic Grid.

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.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#0A0A0A

secondary

#5A5A5A

tertiary

#0A0A0A

neutral

#ECE8DF

surface

#F4F0E6

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

0px

md

0px

lg

0px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

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:    Inter
14  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: 0px
22  md: 0px
23  lg: 0px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(10,10,10,0.14)"
30  divider: rgba(10,10,10,0.14)
31buttons:
32  primary:
33    background: #0a0a0a
34    color: #f4f0e6
35    border: none
36    shape: sharp
37    padding: 13px 24px
38    font: 600 / 0.8125rem / 0.04em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #0a0a0a
43    border: 1px solid #0a0a0a
44    shape: sharp
45    padding: 13px 24px
46    font: 600 / 0.8125rem / 0.04em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #0a0a0a
51    border: 1px solid rgba(10,10,10,0.20)
52    shape: sharp
53    padding: 13px 24px
54    font: 600 / 0.8125rem / 0.04em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #5a5a5a
59    border: none
60    shape: sharp
61    padding: 13px 18px
62    font: 600 / 0.8125rem / 0.04em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 12px
70  highlight: single
71  dot_marker: false
72fonts_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 Grid
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Helvetic Grid** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  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 recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
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 tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
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#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
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 pairings
141 
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 constraints
147 
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 — verify
157 
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. Atmosphere
170 
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-edge
177- Visible 12-column grid as 1px hairlines at 14% ink — structure is part of the design
178- Sharp 0px radius everywhere — corners are forbidden
179- Vermillion `#e23420` only as a 2px underline under the active nav — never as a fill
180- All UI labels uppercase 0.04em tracking — that's the poster voice
181 
182## 2. Palette
183 
184### Surfaces
185- **Bone** `#f4f0e6` — page background (warm, never white)
186- **Bone Lift** `#ece8df` — secondary surfaces, table headers
187- **Hairline** `rgba(10,10,10,0.14)` — grid lines, dividers, card edges
188 
189### Ink
190- **Ink** `#0a0a0a` — text, headings, primary CTA fill
191- **Ink 60** `#5a5a5a` — secondary text
192 
193### Accent
194- **Vermillion** `#e23420` — active nav underline (2px), chart highlight bar
195- That is the only color in the system.
196 
197## 3. Typography
198 
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. Buttons
211 
212### Primary (Ink Block)
213```css
214background: #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 voice
225 
226### Outline & Ghost
227- Outline: transparent, 1px hairline at 20% ink
228- Ghost: no border, ink-secondary, hover underlines
229 
230## 5. Cards
231 
232```css
233background: #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. Charts
242 
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. Tabs
246 
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. Spacing
250 
251- Base 8px (column-aware)
252- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160`
253- Section padding: 128px desktop, 64px mobile
254- 12-column grid with 24px gutters — visible at 14% ink
255 
256## 9. Do's & don'ts
257 
258✅ **Do**
259- Hold Inter Tight at 900 / -0.05em for the hero — the compression IS the brand
260- Show the 12-column grid at 14% ink — structure is the design
261- Use vermillion only as a 2px nav underline + chart highlight — never as a fill
262- Use sharp 0px radius on everything — corners break the poster
263 
264❌ **Don't**
265- Use a second accent color — vermillion alone, on two specific surfaces
266- Use any radius — pills are forbidden, even on badges
267- Add card shadows or inset highlights — flat is the law
268- Use Inter Tight under 700 weight — anything lighter loses the block
269 
270---
271 
272## Tokens
273 
274> Generated from the same source the live preview renders from.
275> Treat the values below as the contract — never substitute approximations.
276 
277### Colors
278 
279| Role      | Value |
280|-----------|-------|
281| primary   | `#0a0a0a` |
282| secondary | `#5a5a5a` |
283| tertiary  | `#0a0a0a` |
284| neutral   | `#ece8df` |
285| surface   | `#f4f0e6` |
286 
287### Typography
288 
289- **Display:** Inter Tight
290- **Body:** Inter
291- **Mono:** JetBrains Mono
292 
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### Radius
301 
302- sm: `0px`
303- md: `0px`
304- lg: `0px`
305- pill: `9999px`
306 
307### Shadows
308 
309- **card:** `none`
310- **button:** `none`
311 
312### Borders
313 
314- **card:** `1px solid rgba(10,10,10,0.14)`
315- **divider:** `rgba(10,10,10,0.14)`
316 
317### Buttons
318 
319Four variants, each fully tokenized. The preview renders from these exact values.
320 
321#### Primary
322 
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#### Secondary
336 
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#### Outline
350 
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#### Ghost
364 
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### Charts
378 
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

03 · How to use it

Wire it into your agent.

markdown

# 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.

04 · Required setup

Three snippets.

Google Fonts link

html

<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" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Pierre Dev

Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles.

darkdeveloperminimalmodernpremium

Pierre.app

ProductPricingDocsAbout

Sign inGet started→

dark · developer · minimal

Build with Pierre Dev.

Start building →→View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Prism Glass

Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration.

glassminimalpremiummodernsoft

Prism.app

ProductPricingDocsAbout

Sign inGet started

glass · minimal · premium

Build with Prism Glass.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational