design.md
Back to directory
minimal · warm · productivity · saas

Warm Canvas.

Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent.

01 · Preview

The kitchen sink.

Warm.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · productivity

Build with Warm Canvas.

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
#000000
secondary
#615D59
tertiary
#0075DE
neutral
#FFFFFF
surface
#FFFFFF
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
4px
md
8px
lg
12px
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 · Pro tokens

The states behind the resting style.

ArchetypeSoft

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.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Warm Canvas"
3description: "Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent."
4tags: [minimal, warm, productivity, saas]
5colors:
6  primary:   "#000000"
7  secondary: "#615d59"
8  tertiary:  "#0075de"
9  neutral:   "#ffffff"
10  surface:   "#ffffff"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4rem / 1 / 700 / -2.125px"
17    h1:   "3rem / 1 / 700 / -1.5px"
18    h2:   "1.625rem / 1.23 / 700 / -0.625px"
19    body: "1rem / 1.5 / 400 / 0"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px"
27  button: "rgba(0,117,222,0.15) 0 4px 12px"
28borders:
29  card:    "1px solid rgba(0,0,0,0.1)"
30  divider: rgba(0,0,0,0.1)
31buttons:
32  primary:
33    background: #2F2F2F
34    color: #FFFFFF
35    border: none
36    shape: rounded
37    padding: 8px 16px
38    font: 500 / 0.875rem
39  secondary:
40    background: #F7F6F3
41    color: #2F2F2F
42    border: 1px solid #E9E5DC
43    shape: rounded
44    padding: 8px 16px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #2F2F2F
49    border: 1px solid #2F2F2F
50    shape: rounded
51    padding: 8px 16px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #787673
56    border: none
57    shape: rounded
58    padding: 8px 12px
59    font: 500 / 0.875rem
60charts:
61  variant: stepped
62  stroke_width: 2
63  fill_opacity: 0.12
64  gridlines: true
65  bar_gap: 0px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Warm Canvas
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Warm Canvas** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#2F2F2F`, text `#FFFFFF`, padding `8px 16px`, weight `500`.
110- **Secondary** — rounded shape, bg `#F7F6F3`, text `#2F2F2F`, border `1px solid #E9E5DC`, padding `8px 16px`, weight `500`.
111- **Outline** — rounded shape, text `#2F2F2F`, border `1px solid #2F2F2F`, padding `8px 16px`, weight `500`.
112- **Ghost** — rounded shape, text `#787673`, padding `8px 12px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#ffffff`
121- Border: `1px solid rgba(0,0,0,0.1)`
122- Shadow: `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px`
123- Radius: `radius.lg` (`12px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Charts
127 
128- Bar/line variant: `stepped`
129- Highlight strategy: `single` — emphasize a single bar/point per chart.
130 
131#### Typography pairings
132 
133- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
134- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
135- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
136 
137### 4 · Hard constraints
138 
139Never do any of the following without explicit instruction from the user:
140 
141- Introduce a new color, font, radius, or shadow that isn't declared above.
142- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
143- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
144- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
145- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
146 
147### 5 · Before you finish — verify
148 
149Run through this checklist for every screen you produce:
150 
151- [ ] Every color used appears in the Colors table above.
152- [ ] Headlines use the display font; body copy uses the body font.
153- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
154- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
155- [ ] Cards and dividers use the declared border + shadow tokens.
156- [ ] No values were invented; if you needed something missing, you stopped and asked.
157 
158---
159 
160## 1. Atmosphere
161 
162Warm Canvas embodies the philosophy of a great workspace: a blank canvas that gets out of your way. The system is built on warm neutrals rather than cold grays — distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page background is pure white (`#ffffff`) but the text isn't pure black — it sits at `rgba(0,0,0,0.95)`, softening the read imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.
163 
164A modified geometric sans is the backbone of the system. At display sizes (64px) it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical: 400 for body, 500 for UI, 600 for semi-bold labels, 700 for display headings. OpenType features `"lnum"` and `"locl"` are enabled on larger text, adding sophistication that rewards close reading.
165 
166What makes Warm Canvas distinctive is its **border philosophy**. Rather than heavy borders or shadows, it uses ultra-thin `1px solid rgba(0,0,0,0.1)` — borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer 4-stack with cumulative opacity never exceeding 0.05, depth that's felt rather than seen.
167 
168**Signature moves**
169- Compressed sans at -2.125px tracking on 64px display
170- Warm neutrals: yellow-brown undertones throughout (`#f6f5f4` warm white, `#31302e` warm dark)
171- Near-black text via `rgba(0,0,0,0.95)` — micro-warmth
172- Whisper borders: `1px solid rgba(0,0,0,0.1)` — barely there
173- Multi-layer 4-stack shadows with sub-0.05 opacity
174- Single saturated blue accent (`#0075de`) — the only color in core UI chrome
175- Pill badges (9999px) with tinted blue background for status
176 
177## 2. Palette
178 
179### Primary
180- **Near Black** `rgba(0,0,0,0.95)` — text, headings
181- **Pure White** `#ffffff` — page, cards
182- **Canvas Blue** `#0075de` — CTA, links, single saturated accent
183 
184### Warm Neutrals
185- Warm White `#f6f5f4` — section alternation
186- Warm Dark `#31302e` — dark surface
187- Warm Gray 500 `#615d59` — secondary text
188- Warm Gray 300 `#a39e98` — placeholders, disabled
189 
190### Semantic
191- Teal `#2a9d99` — success
192- Green `#1aae39` — completion
193- Orange `#dd5b00` — warning
194- Pink `#ff64c8` — decorative
195 
196### Interactive
197- Active `#005bab` — pressed
198- Focus `#097fe8` — ring
199- Badge bg `#f2f9ff`, text `#097fe8`
200 
201## 3. Typography
202 
203| Role | Size | Weight | Leading | Tracking |
204|------|------|--------|---------|----------|
205| Display Hero | 64px | 700 | 1.00 | -2.125px |
206| Display 2 | 54px | 700 | 1.04 | -1.875px |
207| Section | 48px | 700 | 1.00 | -1.5px |
208| Sub-heading L | 40px | 700 | 1.50 | normal |
209| Sub-heading | 26px | 700 | 1.23 | -0.625px |
210| Card title | 22px | 700 | 1.27 | -0.25px |
211| Body L | 20px | 600 | 1.40 | -0.125px |
212| Body | 16px | 400 | 1.50 | normal |
213| Nav | 15px | 600 | 1.33 | normal |
214| Badge | 12px | 600 | 1.33 | +0.125px |
215 
216**Four-weight system.** 400 (read), 500 (interact), 600 (emphasize), 700 (announce). Tracking compresses with size and relaxes at body. Badges are the only positive-tracking text.
217 
218## 4. Buttons
219 
220### Primary Blue
221```css
222background: #0075de;
223color: #ffffff;
224padding: 8px 16px;
225border-radius: 4px;
226```
227Hover `#005bab`. Active scale(0.9).
228 
229### Secondary Translucent
230- Background `rgba(0,0,0,0.05)`, text near-black
231- 4px radius, scale(1.05) on hover
232 
233### Pill Badge
234- Background `#f2f9ff`, text `#097fe8`
235- 9999px radius, 4px 8px padding, 12px weight 600
236 
237## 5. Cards
238 
239- Background: `#ffffff`
240- Border: `1px solid rgba(0,0,0,0.1)` (whisper)
241- Radius: 12px standard, 16px featured
242- Shadow: 4-layer stack, max opacity 0.04
243 
244## 6. Charts
245 
246**Stepped charts.** Bars are flush (no gap) with a thin top accent line, giving an organic, blocky productivity-tool feel. Gridlines are dashed at 14% opacity. Line charts use a 2px stroke with subtle 12% area fill — no end-dot.
247 
248## 7. Spacing
249 
250- Base: 8px
251- Scale: `2, 3, 4, 5, 6, 7, 8, 11, 12, 14, 16, 24, 32`
252- Section vertical: 64–120px
253 
254## 8. Depth & elevation
255 
256| Level | Treatment | Use |
257|-------|-----------|-----|
258| 0 | None | Page, text |
259| 1 | Whisper border `1px solid rgba(0,0,0,0.1)` | Cards, dividers |
260| 2 | 4-stack shadow (max 0.04) | Content cards |
261| 3 | 5-stack shadow (max 0.05, 52px blur) | Modals, hero |
262 
263**Layered, ambient, embedded.** Multiple layers with extremely low individual opacity accumulate into soft natural-looking elevation — elements feel embedded in the page, not floating above it.
264 
265## 9. Do's & don'ts
266 
267✅ **Do**
268- Use warm neutrals exclusively — yellow-brown undertones
269- Compress display tracking to -2.125px at 64px
270- Use whisper borders at `rgba(0,0,0,0.1)` — never heavier
271- Layer 4–5 shadows with sub-0.05 individual opacity
272- Reserve canvas blue (`#0075de`) for CTAs and links
273 
274❌ **Don't**
275- Use blue-gray neutrals — kills the warmth
276- Apply pill radius to cards — pill is for badges only
277- Use heavy single shadows — multi-layer ambient only
278- Introduce more saturated colors in core chrome
279- Use bold (`#000000`) — `rgba(0,0,0,0.95)` only
280 
281---
282 
283## Tokens
284 
285> Generated from the same source the live preview renders from.
286> Treat the values below as the contract — never substitute approximations.
287 
288### Colors
289 
290| Role      | Value |
291|-----------|-------|
292| primary   | `#000000` |
293| secondary | `#615d59` |
294| tertiary  | `#0075de` |
295| neutral   | `#ffffff` |
296| surface   | `#ffffff` |
297 
298### Typography
299 
300- **Display:** Inter
301- **Body:** Inter
302- **Mono:** JetBrains Mono
303 
304| Role | size / leading / weight / tracking |
305|------|------------------------------------|
306| Hero | 4rem / 1 / 700 / -2.125px |
307| H1   | 3rem / 1 / 700 / -1.5px |
308| H2   | 1.625rem / 1.23 / 700 / -0.625px |
309| Body | 1rem / 1.5 / 400 / 0 |
310 
311### Radius
312 
313- sm: `4px`
314- md: `8px`
315- lg: `12px`
316- pill: `9999px`
317 
318### Shadows
319 
320- **card:** `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px`
321- **button:** `rgba(0,117,222,0.15) 0 4px 12px`
322 
323### Borders
324 
325- **card:** `1px solid rgba(0,0,0,0.1)`
326- **divider:** `rgba(0,0,0,0.1)`
327 
328### Buttons
329 
330Four variants, each fully tokenized. The preview renders from these exact values.
331 
332#### Primary
333 
334| Property | Value |
335|----------|-------|
336| shape | `rounded` |
337| background | `#2F2F2F` |
338| color | `#FFFFFF` |
339| border | `none` |
340| padding | `8px 16px` |
341| fontWeight | `500` |
342| fontSize | `0.875rem` |
343 
344#### Secondary
345 
346| Property | Value |
347|----------|-------|
348| shape | `rounded` |
349| background | `#F7F6F3` |
350| color | `#2F2F2F` |
351| border | `1px solid #E9E5DC` |
352| padding | `8px 16px` |
353| fontWeight | `500` |
354| fontSize | `0.875rem` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `rounded` |
361| background | `transparent` |
362| color | `#2F2F2F` |
363| border | `1px solid #2F2F2F` |
364| padding | `8px 16px` |
365| fontWeight | `500` |
366| fontSize | `0.875rem` |
367 
368#### Ghost
369 
370| Property | Value |
371|----------|-------|
372| shape | `rounded` |
373| background | `transparent` |
374| color | `#787673` |
375| border | `none` |
376| padding | `8px 12px` |
377| fontWeight | `500` |
378| fontSize | `0.875rem` |
379 
380### Charts
381 
382| Property | Value |
383|----------|-------|
384| variant | `stepped` |
385| strokeWidth | `2` |
386| fillOpacity | `0.12` |
387| gridlines | `true` |
388| barGap | `0px` |
389| highlight | `single` |
390| dotMarker | `false` |
391 
392---
393 
394## Pro tokens
395 
396> Production-fidelity tokens. States, density, motion, elevation,
397> content rules and a measured WCAG contract — derived from the
398> resting tokens unless explicitly authored.
399 
400### States
401 
402#### Button
403 
404- **hover** — shadow: `0 8px 24px -10px rgba(0, 117, 222, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
405- **focus** — outline: `2px solid rgba(0, 117, 222, 0.4)`, outline-offset: `3px`
406- **active** — transform: `translateY(0) scale(0.98)`
407- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
408- **loading** — opacity: `0.65`
409- **selected** — bg: `rgba(0, 117, 222, 0.18)`, color: `#0075de`
410 
411#### Input
412 
413- **hover** — bg: `rgba(0, 117, 222, 0.03)`, border: `1px solid rgba(0, 117, 222, 0.4)`
414- **focus** — border: `1px solid rgba(0, 117, 222, 0.6)`, shadow: `0 0 0 4px rgba(0, 117, 222, 0.12)`
415- **disabled** — opacity: `0.4`
416- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
417 
418#### Card
419 
420- **hover** — shadow: `0 16px 40px -16px rgba(0, 117, 222, 0.3)`, transform: `translateY(-3px)`
421- **selected** — bg: `rgba(0, 117, 222, 0.04)`, border: `1px solid rgba(0, 117, 222, 0.5)`
422- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
423 
424#### Tab
425 
426- **hover** — bg: `rgba(0, 117, 222, 0.08)`, color: `#0075de`
427- **focus** — outline: `2px solid rgba(0, 117, 222, 0.4)`, outline-offset: `2px`
428- **selected** — bg: `rgba(0, 117, 222, 0.16)`, color: `#0075de`
429 
430### Density
431 
432| Mode | padding × | row × | body | radius × | Use for |
433|------|-----------|-------|------|----------|---------|
434| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
435| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
436| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
437 
438### Motion
439 
440**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
441 
442```css
443transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
444```
445 
446| Token | Value |
447|-------|-------|
448| duration.instant | `120ms` |
449| duration.fast | `240ms` |
450| duration.base | `400ms` |
451| duration.slow | `600ms` |
452| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
453| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
454| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
455| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
456 
457### Elevation
458 
459Five-level scale, system-specific recipe.
460 
461| Level | Shadow | Recipe |
462|-------|--------|--------|
463| level0 | `none` | Flat — the tone separates, not the shadow. |
464| level1 | `0 2px 6px -2px rgba(0, 117, 222, 0.12)` | Soft tinted lift. |
465| level2 | `0 8px 24px -10px rgba(0, 117, 222, 0.2)` | Floating card — pastel-tinted shadow. |
466| level3 | `0 16px 48px -16px rgba(0, 117, 222, 0.28)` | Sheet — visible tinted glow. |
467| level4 | `0 32px 80px -24px rgba(0, 117, 222, 0.4)` | Modal — tinted wash, scrim required. |
468 
469### Content
470 
471- **measure:** `64ch` (max line length for body prose)
472- **paragraph spacing:** `1.35em`
473- **list indent:** `1.5em`
474- **list gap:** `0.6em`
475- **link:** color `#0075de`, underline `hover`
476- **blockquote:** border `2px solid rgba(0, 117, 222, 0.5)`, padding `0.9em 1.2em`
477- **code:** background `rgba(0, 117, 222, 0.1)`, color `#000000`
478 
479### Accessibility (WCAG 2.1)
480 
481**Overall:** AA
482 
483| Pair | Ratio | Required | Grade | Suggested fix |
484|------|-------|----------|-------|---------------|
485| Body text on surface | 21:1 | AA | AAA | — |
486| Body text on canvas | 21:1 | AA | AAA | — |
487| Muted text on surface | 6.53:1 | AA | AA | — |
488| Accent on surface | 4.57:1 | AA-Large | AA | — |
489| Accent on canvas | 4.57:1 | AA-Large | AA | — |
490
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#000000',
        secondary: '#615d59',
        accent:    '#0075de',
        neutral:   '#ffffff',
        surface:   '#ffffff',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Studio Margaux

A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.

editorialagencywarmpremiumasymmetric
Studio.app
ProductPricingDocsAbout
Sign inGet started
editorial · agency · warm

Build with Studio Margaux.

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

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.

swissminimaleditorialpremiummodern
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