design.md
Back to directory
dark · editorial · developer · cinematic

Cinescope Mail.

Pure black void with frost-blue borders. Editorial serif hero, geometric sans sections, pill CTAs, and a multi-color accent system that performs against the dark.

01 · Preview

The kitchen sink.

Cinescope.app
ProductPricingDocsAbout
Sign inGet started
dark · editorial · developer

Build with Cinescope Mail.

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
#F0F0F0
secondary
#A1A4A5
tertiary
#FF801F
neutral
#000000
surface
#000000
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
16px
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.

ArchetypeEditorial

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

Tab

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

DESIGN.md

markdown
1---
2name: "Cinescope Mail"
3description: "Pure black void with frost-blue borders. Editorial serif hero, geometric sans sections, pill CTAs, and a multi-color accent system that performs against the dark."
4tags: [dark, editorial, developer, cinematic]
5colors:
6  primary:   "#f0f0f0"
7  secondary: "#a1a4a5"
8  tertiary:  "#ff801f"
9  neutral:   "#000000"
10  surface:   "#000000"
11typography:
12  display: Fraunces
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1 / 400 / -0.96px"
17    h1:   "3.5rem / 1.2 / 400 / -2.8px"
18    h2:   "1.5rem / 1.3 / 500 / 0"
19    body: "1rem / 1.5 / 400 / 0"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "rgba(176, 199, 217, 0.145) 0 0 0 1px"
27borders:
28  card:    "1px solid rgba(214, 235, 253, 0.19)"
29  divider: "rgba(214, 235, 253, 0.19)"
30buttons:
31  primary:
32    background: #FFFFFF
33    color: #000000
34    border: none
35    shape: pill
36    padding: 10px 22px
37    font: 600
38  secondary:
39    background: #000000
40    color: #FFFFFF
41    border: 1px solid rgba(255,255,255,0.12)
42    shape: pill
43    padding: 10px 22px
44    font: 600
45  outline:
46    background: transparent
47    color: #FFFFFF
48    border: 1px solid rgba(135,206,250,0.4)
49    shape: pill
50    padding: 10px 22px
51    font: 600
52  ghost:
53    background: transparent
54    color: rgba(255,255,255,0.6)
55    border: none
56    shape: pill
57    padding: 10px 14px
58    font: 600
59charts:
60  variant: "thin-bars"
61  stroke_width: 1.5
62  fill_opacity: 0
63  gridlines: false
64  bar_gap: 12px
65  highlight: all
66  dot_marker: true
67  palette: ["#ff801f", "#11ff99", "#3b9eff", "#ffc53d", "#ff2047", "#ff801f", "#3b9eff"]
68fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Cinescope Mail
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 **Cinescope Mail** 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** — pill shape, bg `#FFFFFF`, text `#000000`, padding `10px 22px`, weight `600`.
110- **Secondary** — pill shape, bg `#000000`, text `#FFFFFF`, border `1px solid rgba(255,255,255,0.12)`, padding `10px 22px`, weight `600`.
111- **Outline** — pill shape, text `#FFFFFF`, border `1px solid rgba(135,206,250,0.4)`, padding `10px 22px`, weight `600`.
112- **Ghost** — pill shape, text `rgba(255,255,255,0.6)`, padding `10px 14px`, weight `600`.
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: `#000000`
121- Border: `1px solid rgba(214, 235, 253, 0.19)`
122- Shadow: `rgba(176, 199, 217, 0.145) 0 0 0 1px`
123- Radius: `radius.lg` (`16px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Charts
127 
128- Bar/line variant: `thin-bars`
129- No gridlines — let the bars/lines carry the data.
130- Highlight strategy: `all` — emphasize a single bar/point per chart.
131- Use the declared palette in order: `#ff801f`, `#11ff99`, `#3b9eff`, `#ffc53d`, `#ff2047`, `#ff801f`, `#3b9eff`.
132 
133#### Typography pairings
134 
135- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.
136- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
137- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
138 
139### 4 · Hard constraints
140 
141Never do any of the following without explicit instruction from the user:
142 
143- Introduce a new color, font, radius, or shadow that isn't declared above.
144- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
145- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
146- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
147- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
148 
149### 5 · Before you finish — verify
150 
151Run through this checklist for every screen you produce:
152 
153- [ ] Every color used appears in the Colors table above.
154- [ ] Headlines use the display font; body copy uses the body font.
155- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
156- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
157- [ ] Cards and dividers use the declared border + shadow tokens.
158- [ ] No values were invented; if you needed something missing, you stopped and asked.
159 
160---
161 
162## 1. Atmosphere
163 
164Cinescope Mail is dark, cinematic, and unhurried. The page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`) — a theatre-like experience where content performs on a void stage. This is not the typical developer-tool darkness. It is the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.
165 
166The typography is the lead actor. A three-font hierarchy: a dramatic display serif at massive 96px for hero headlines (line-height 1.00, tracking -0.96px) creates magazine-cover energy; a geometric sans handles section headings with even more aggressive tracking (-2.8px at 56px) for compressed engineered authority; a clean grotesk takes over for body and UI to let the display fonts shine. A monospace voice rounds out the family for code blocks — code is treated as a first-class visual element, not an afterthought.
167 
168The signature visual element is the **icy frost border**. Instead of neutral gray, every container is outlined in `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every divider a cold, crystalline quality against the black. Combined with pill-shaped CTAs (9999px), a multi-color accent system, and whisper-thin ring shadows, the result feels premium, precise, and quietly confident.
169 
170**Signature moves**
171- Pure `#000000` void background — never warm or charcoal
172- Three-font hierarchy: display serif (hero), geometric sans (sections), grotesk (body)
173- Icy frost borders `rgba(214, 235, 253, 0.19)` — cold crystalline shimmer
174- Multi-color accent system: orange, green, blue, yellow, red — each with its own role
175- Pill CTAs (9999px), white solid or transparent + frost
176- Mono as design element — used prominently, not hidden
177- Whisper ring shadows: `rgba(176, 199, 217, 0.145) 0 0 0 1px`
178 
179## 2. Palette
180 
181### Canvas
182- **Void Black** `#000000` — page background
183- **Near White** `#f0f0f0` — primary text
184- **Pure White** `#ffffff` — solid CTA, max emphasis
185 
186### Accent System
187- **Orange** `#ff801f` (primary), `#ffa057` (light), `#ff5900` (deep)
188- **Green** `#11ff99`, `#22ff99` — success, positive
189- **Blue** `#3b9eff` (links), `#0081fd` — interactive
190- **Yellow** `#ffc53d` — warnings, highlights
191- **Red** `#ff2047` — errors, destructive
192 
193### Neutrals
194- Silver `#a1a4a5` — secondary text
195- Dark Gray `#464a4d` — tertiary
196- Mid Gray `#5c5c5c` — hover
197 
198### Borders & Surface
199- Frost `rgba(214, 235, 253, 0.19)` — universal
200- Frost Soft `rgba(217, 237, 254, 0.145)` — list items
201- Ring `rgba(176, 199, 217, 0.145) 0 0 0 1px` — shadow-as-border
202 
203## 3. Typography
204 
205| Role | Font | Size | Weight | Leading | Tracking |
206|------|------|------|--------|---------|----------|
207| Display Hero | Serif | 96px | 400 | 1.00 | -0.96px |
208| Section Head | Sans | 56px | 400 | 1.20 | -2.8px |
209| Sub-heading | Sans | 20px | 400 | 1.30 | normal |
210| Feature title | Body | 24px | 500 | 1.50 | normal |
211| Body L | Body | 18px | 400 | 1.50 | normal |
212| Body | Body | 16px | 400 | 1.50 | normal |
213| Nav | Sans | 14px | 500 | 1.43 | +0.35px |
214| Caption | Body | 14px | 400 | 1.60 | normal |
215| Code | Mono | 16px | 400 | 1.50 | normal |
216 
217**The only positive tracking is on nav.** Display fonts compress (negative tracking); nav links breathe (+0.35px). Display serif is hero-only — never body. Each font has one job and never crosses lanes.
218 
219## 4. Buttons
220 
221### White Solid Pill (Primary)
222```css
223background: #ffffff;
224color: #000000;
225padding: 5px 12px;
226border-radius: 9999px;
227```
228 
229### Frost Pill (Secondary)
230- Transparent background, `#f0f0f0` text
231- `1px solid rgba(214, 235, 253, 0.19)`, 9999px radius
232- Hover: `rgba(255,255,255,0.28)` glass
233 
234### Ghost
235- Transparent, no border, `#f0f0f0` text, 4px radius
236 
237## 5. Cards
238 
239- Background: transparent or near-black
240- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost)
241- Radius: 16px standard, 24px large
242- Shadow: `rgba(176, 199, 217, 0.145) 0 0 0 1px` — ring only
243 
244## 6. Charts
245 
246**Multi-color accent bars.** Each bar takes its own color from the accent palette (orange / green / blue / yellow / red), creating syntax-highlighted data visualizations that match the code-block aesthetic. Line charts use thin strokes (1.5px) with no fill — pure linework against the void.
247 
248## 7. Spacing
249 
250- Base: 8px
251- Scale: `4, 6, 8, 12, 16, 20, 24, 32, 40, 80, 120`
252- Section vertical: 80–120px+ — cinematic black space
253 
254## 8. Depth & elevation
255 
256| Level | Treatment | Use |
257|-------|-----------|-----|
258| 0 | Flat black | Default |
259| 1 | Frost border | Cards, dividers, buttons |
260| 1b | Ring shadow `0 0 0 1px` | Floating panels |
261| 3 | Heavy black focus ring `0 0 0 8px` | Accessibility |
262 
263**Borders ARE the depth.** On pure black, traditional shadows disappear. Cinescope Mail uses thin icy borders to create floating-glass-in-space depth — borders catch light, shadows don't.
264 
265## 9. Do's & don'ts
266 
267✅ **Do**
268- Use `#000000` — pure void, never charcoal
269- Apply frost borders (`rgba(214,235,253,0.19)`) for all structural lines
270- Pin display serif to hero only, geometric sans to sections, grotesk to body
271- Use pill (9999px) for primary CTAs and tags
272- Use multi-color accents — each feature gets its own color
273- Use +0.35px tracking on nav (the only positive tracking)
274 
275❌ **Don't**
276- Use neutral gray borders — they kill the icy signature
277- Use bold display serif on body
278- Mix multiple accent colors in the same component
279- Use box-shadow elevation on dark — frost borders only
280- Apply opaque buttons — transparency + frost is the pattern
281 
282---
283 
284## Tokens
285 
286> Generated from the same source the live preview renders from.
287> Treat the values below as the contract — never substitute approximations.
288 
289### Colors
290 
291| Role      | Value |
292|-----------|-------|
293| primary   | `#f0f0f0` |
294| secondary | `#a1a4a5` |
295| tertiary  | `#ff801f` |
296| neutral   | `#000000` |
297| surface   | `#000000` |
298 
299### Typography
300 
301- **Display:** Fraunces
302- **Body:** Inter
303- **Mono:** JetBrains Mono
304 
305| Role | size / leading / weight / tracking |
306|------|------------------------------------|
307| Hero | 4.5rem / 1 / 400 / -0.96px |
308| H1   | 3.5rem / 1.2 / 400 / -2.8px |
309| H2   | 1.5rem / 1.3 / 500 / 0 |
310| Body | 1rem / 1.5 / 400 / 0 |
311 
312### Radius
313 
314- sm: `4px`
315- md: `8px`
316- lg: `16px`
317- pill: `9999px`
318 
319### Shadows
320 
321- **card:** `rgba(176, 199, 217, 0.145) 0 0 0 1px`
322 
323### Borders
324 
325- **card:** `1px solid rgba(214, 235, 253, 0.19)`
326- **divider:** `rgba(214, 235, 253, 0.19)`
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 | `pill` |
337| background | `#FFFFFF` |
338| color | `#000000` |
339| border | `none` |
340| padding | `10px 22px` |
341| fontWeight | `600` |
342 
343#### Secondary
344 
345| Property | Value |
346|----------|-------|
347| shape | `pill` |
348| background | `#000000` |
349| color | `#FFFFFF` |
350| border | `1px solid rgba(255,255,255,0.12)` |
351| padding | `10px 22px` |
352| fontWeight | `600` |
353 
354#### Outline
355 
356| Property | Value |
357|----------|-------|
358| shape | `pill` |
359| background | `transparent` |
360| color | `#FFFFFF` |
361| border | `1px solid rgba(135,206,250,0.4)` |
362| padding | `10px 22px` |
363| fontWeight | `600` |
364 
365#### Ghost
366 
367| Property | Value |
368|----------|-------|
369| shape | `pill` |
370| background | `transparent` |
371| color | `rgba(255,255,255,0.6)` |
372| border | `none` |
373| padding | `10px 14px` |
374| fontWeight | `600` |
375 
376### Charts
377 
378| Property | Value |
379|----------|-------|
380| variant | `thin-bars` |
381| strokeWidth | `1.5` |
382| fillOpacity | `0` |
383| gridlines | `false` |
384| barGap | `12px` |
385| highlight | `all` |
386| dotMarker | `true` |
387| palette | `#ff801f`, `#11ff99`, `#3b9eff`, `#ffc53d`, `#ff2047`, `#ff801f`, `#3b9eff` |
388 
389---
390 
391## Pro tokens
392 
393> Production-fidelity tokens. States, density, motion, elevation,
394> content rules and a measured WCAG contract — derived from the
395> resting tokens unless explicitly authored.
396 
397### States
398 
399#### Button
400 
401- **hover** — bg: `rgba(255, 128, 31, 0.92)`, shadow: `0 4px 20px -8px rgba(255, 128, 31, 0.4)`
402- **focus** — outline: `1.5px solid #ff801f`, 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: `#f0f0f0`, color: `#000000`
407 
408#### Input
409 
410- **hover** — border: `1px solid #f0f0f0`
411- **focus** — border: `1px solid #ff801f`, shadow: `0 1px 0 0 #ff801f`
412- **disabled** — opacity: `0.45`
413- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
414 
415#### Card
416 
417- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
418- **selected** — border: `1px solid #f0f0f0`
419 
420#### Tab
421 
422- **hover** — color: `#f0f0f0`
423- **focus** — outline: `1.5px solid #ff801f`, outline-offset: `3px`
424- **selected** — color: `#ff801f`, border: `0 0 2px 0 solid #ff801f`
425 
426### Density
427 
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### Motion
435 
436**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
437 
438```css
439transition: 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### Elevation
454 
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### Content
466 
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 `#ff801f`, underline `always`
472- **blockquote:** border `4px solid #ff801f`, padding `0.4em 0 0.4em 1.5em`
473- **code:** background `rgba(240, 240, 240, 0.06)`, color `#f0f0f0`
474 
475### Accessibility (WCAG 2.1)
476 
477**Overall:** AAA
478 
479| Pair | Ratio | Required | Grade | Suggested fix |
480|------|-------|----------|-------|---------------|
481| Body text on surface | 18.43:1 | AA | AAA | — |
482| Body text on canvas | 18.43:1 | AA | AAA | — |
483| Muted text on surface | 8.37:1 | AA | AAA | — |
484| Accent on surface | 8.36:1 | AA-Large | AAA | — |
485| Accent on canvas | 8.36:1 | AA-Large | AAA | — |
486
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=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&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: ['"Fraunces"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#f0f0f0',
        secondary: '#a1a4a5',
        accent:    '#ff801f',
        neutral:   '#000000',
        surface:   '#000000',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '16px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Maison Folio

Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow.

editorialagencyserifoversizedminimal
Maison.app
ProductPricingDocsAbout
Sign in→Get started
editorial · agency · serif

Build with Maison Folio.

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

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