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.
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.
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: Fraunces13 body: Inter14 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: 4px22 md: 8px23 lg: 16px24 pill: 9999px25shadows: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: #FFFFFF33 color: #00000034 border: none35 shape: pill36 padding: 10px 22px37 font: 60038 secondary:39 background: #00000040 color: #FFFFFF41 border: 1px solid rgba(255,255,255,0.12)42 shape: pill43 padding: 10px 22px44 font: 60045 outline:46 background: transparent47 color: #FFFFFF48 border: 1px solid rgba(135,206,250,0.4)49 shape: pill50 padding: 10px 22px51 font: 60052 ghost:53 background: transparent54 color: rgba(255,255,255,0.6)55 border: none56 shape: pill57 padding: 10px 14px58 font: 60059charts:60 variant: "thin-bars"61 stroke_width: 1.562 fill_opacity: 063 gridlines: false64 bar_gap: 12px65 highlight: all66 dot_marker: true67 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 Mail73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Cinescope Mail** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 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 recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 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 tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 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#### Charts127 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 pairings134 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 constraints140 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 — verify150 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. Atmosphere163 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 charcoal172- Three-font hierarchy: display serif (hero), geometric sans (sections), grotesk (body)173- Icy frost borders `rgba(214, 235, 253, 0.19)` — cold crystalline shimmer174- Multi-color accent system: orange, green, blue, yellow, red — each with its own role175- Pill CTAs (9999px), white solid or transparent + frost176- Mono as design element — used prominently, not hidden177- Whisper ring shadows: `rgba(176, 199, 217, 0.145) 0 0 0 1px`178 179## 2. Palette180 181### Canvas182- **Void Black** `#000000` — page background183- **Near White** `#f0f0f0` — primary text184- **Pure White** `#ffffff` — solid CTA, max emphasis185 186### Accent System187- **Orange** `#ff801f` (primary), `#ffa057` (light), `#ff5900` (deep)188- **Green** `#11ff99`, `#22ff99` — success, positive189- **Blue** `#3b9eff` (links), `#0081fd` — interactive190- **Yellow** `#ffc53d` — warnings, highlights191- **Red** `#ff2047` — errors, destructive192 193### Neutrals194- Silver `#a1a4a5` — secondary text195- Dark Gray `#464a4d` — tertiary196- Mid Gray `#5c5c5c` — hover197 198### Borders & Surface199- Frost `rgba(214, 235, 253, 0.19)` — universal200- Frost Soft `rgba(217, 237, 254, 0.145)` — list items201- Ring `rgba(176, 199, 217, 0.145) 0 0 0 1px` — shadow-as-border202 203## 3. Typography204 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. Buttons220 221### White Solid Pill (Primary)222```css223background: #ffffff;224color: #000000;225padding: 5px 12px;226border-radius: 9999px;227```228 229### Frost Pill (Secondary)230- Transparent background, `#f0f0f0` text231- `1px solid rgba(214, 235, 253, 0.19)`, 9999px radius232- Hover: `rgba(255,255,255,0.28)` glass233 234### Ghost235- Transparent, no border, `#f0f0f0` text, 4px radius236 237## 5. Cards238 239- Background: transparent or near-black240- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost)241- Radius: 16px standard, 24px large242- Shadow: `rgba(176, 199, 217, 0.145) 0 0 0 1px` — ring only243 244## 6. Charts245 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. Spacing249 250- Base: 8px251- Scale: `4, 6, 8, 12, 16, 20, 24, 32, 40, 80, 120`252- Section vertical: 80–120px+ — cinematic black space253 254## 8. Depth & elevation255 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'ts266 267✅ **Do**268- Use `#000000` — pure void, never charcoal269- Apply frost borders (`rgba(214,235,253,0.19)`) for all structural lines270- Pin display serif to hero only, geometric sans to sections, grotesk to body271- Use pill (9999px) for primary CTAs and tags272- Use multi-color accents — each feature gets its own color273- Use +0.35px tracking on nav (the only positive tracking)274 275❌ **Don't**276- Use neutral gray borders — they kill the icy signature277- Use bold display serif on body278- Mix multiple accent colors in the same component279- Use box-shadow elevation on dark — frost borders only280- Apply opaque buttons — transparency + frost is the pattern281 282---283 284## Tokens285 286> Generated from the same source the live preview renders from.287> Treat the values below as the contract — never substitute approximations.288 289### Colors290 291| Role | Value |292|-----------|-------|293| primary | `#f0f0f0` |294| secondary | `#a1a4a5` |295| tertiary | `#ff801f` |296| neutral | `#000000` |297| surface | `#000000` |298 299### Typography300 301- **Display:** Fraunces302- **Body:** Inter303- **Mono:** JetBrains Mono304 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### Radius313 314- sm: `4px`315- md: `8px`316- lg: `16px`317- pill: `9999px`318 319### Shadows320 321- **card:** `rgba(176, 199, 217, 0.145) 0 0 0 1px`322 323### Borders324 325- **card:** `1px solid rgba(214, 235, 253, 0.19)`326- **divider:** `rgba(214, 235, 253, 0.19)`327 328### Buttons329 330Four variants, each fully tokenized. The preview renders from these exact values.331 332#### Primary333 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#### Secondary344 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#### Outline355 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#### Ghost366 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### Charts377 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 # 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=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};A warm, high-contrast palette rooted in broadsheet newspaper aesthetics.
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.
Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.
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.