Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent.
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: "Twilight Mail"3description: "Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent."4tags: [consumer, premium, minimal, editorial]5colors:6 primary: "#292827"7 secondary: "#55534e"8 tertiary: "#cbb7fb"9 neutral: "#1b1938"10 surface: "#ffffff"11typography:12 display: "Inter Tight"13 body: "Inter Tight"14 mono: "JetBrains Mono"15 scale:16 hero: "4rem / 0.96 / 500 / 0"17 h1: "3rem / 0.96 / 500 / -1.32px"18 h2: "1.75rem / 1.14 / 500 / -0.63px"19 body: "1rem / 1.5 / 500 / 0"20radius:21 sm: 8px22 md: 8px23 lg: 16px24shadows:25 card: "rgba(41,40,39,0.06) 0 1px 2px"26borders:27 card: "1px solid #dcd7d3"28 divider: "#dcd7d3"29buttons:30 primary:31 background: #e9e5dd32 color: #29282733 border: none34 shape: rounded35 padding: 12px 22px36 font: 70037 secondary:38 background: #29282739 color: #ffffff40 border: none41 shape: rounded42 padding: 12px 22px43 font: 60044 outline:45 background: #ffffff46 color: #29282747 border: 1px solid #dcd7d348 shape: rounded49 padding: 12px 22px50 font: 60051 ghost:52 background: transparent53 color: #714cb654 border: none55 shape: rounded56 padding: 12px 8px57 font: 54058 hover: underline59charts:60 variant: stepped61 stroke_width: 262 fill_opacity: 0.463 gridlines: false64 bar_gap: 0px65 highlight: all66 dot_marker: false67 palette: ["#cbb7fb", "#b59cf5", "#9d80ee", "#8364e0", "#714cb6", "#52378a", "#1b1938"]68fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"69dependencies: ["lucide-react"]70---71 72# Twilight 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 **Twilight 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** — rounded shape, bg `#e9e5dd`, text `#292827`, padding `12px 22px`, weight `700`.110- **Secondary** — rounded shape, bg `#292827`, text `#ffffff`, padding `12px 22px`, weight `600`.111- **Outline** — rounded shape, bg `#ffffff`, text `#292827`, border `1px solid #dcd7d3`, padding `12px 22px`, weight `600`.112- **Ghost** — rounded shape, text `#714cb6`, padding `12px 8px`, weight `540`.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: `#ffffff`121- Border: `1px solid #dcd7d3`122- Shadow: `rgba(41,40,39,0.06) 0 1px 2px`123- Radius: `radius.lg` (`16px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Charts127 128- Bar/line variant: `stepped`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: `#cbb7fb`, `#b59cf5`, `#9d80ee`, `#8364e0`, `#714cb6`, `#52378a`, `#1b1938`.132 133#### Typography pairings134 135- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.136- **Body (`Inter Tight`)** — 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 164Twilight Mail feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero is a **cinematic deep-purple gradient** (`#1b1938`) — twilight just before dawn — overlaid with confident white typography. Below that entrance, the page returns to white canvas with **charcoal ink** (`#292827`) text: warm near-black, never pure.165 166The typography is the true signature. The variable display family runs at non-standard weights — **460** and **540** — that sit deliberately between the conventional Regular (400) and Medium (500) stops. Weight 460 is the workhorse: heavier than expected, never aggressive. Display compresses to **0.96 line-height** for dense architectural blocks, while body relaxes to a generous 1.50 — tension between compressed power and breathing room defines the voice.167 168The design philosophy is maximum confidence through minimum decoration. **Warm cream** (`#e9e5dd`) buttons instead of bright CTAs, near-absence of borders and shadows, and **lavender purple** (`#cbb7fb`) as the sole accent. It's a productivity tool that markets itself like a luxury brand.169 170**Signature moves**171- Deep purple hero gradient (`#1b1938`) against pristine white content172- Variable font weights **460 / 540** — between conventional stops173- Display leading **0.96** — compressed power174- Warm Cream (`#e9e5dd`) buttons — never bright175- Lavender (`#cbb7fb`) as the *only* accent176- **Binary radius system** — 8px and 16px, nothing else177- No pill shapes, no micro-rounding178- Charcoal Ink (`#292827`) text — warmer than pure black179 180## 2. Palette181 182### Primary183- **Mysteria Purple** `#1b1938` — hero gradient, darkest brand expression184- **Lavender Glow** `#cbb7fb` — single accent185- **Charcoal Ink** `#292827` — primary text on light186 187### Surface188- Pure White `#ffffff` · Warm Cream `#e9e5dd` (button) · Parchment Border `#dcd7d3`189 190### Secondary191- Amethyst Link `#714cb6` — underlined links192- Translucent White `rgba(255,255,255,0.95)` / `rgba(255,255,255,0.8)` — text on dark193 194## 3. Typography195 196Single variable family. Weight stops: **460, 540, 600, 700**.197 198| Role | Size | Weight | Leading | Tracking |199|------|------|--------|---------|----------|200| Display Hero | 64px | 540 | 0.96 | 0 |201| Section Display | 48px | 460 | 0.96 | -1.32px |202| Feature Title | 28px | 540 | 1.14 | -0.63px |203| Sub-heading L | 26px | 460 | 1.30 | 0 |204| Card Heading | 22px | 460 | 0.76 | -0.315px |205| Body Heading | 20px | 460 | 1.20 | 0 |206| Emphasis Body | 18px | 540 | 1.50 | -0.135px |207| Body | 16px | 460 | 1.50 | 0 |208| Button | 16px | 600–700 | 1.00 | 0 |209| Nav | 16px | 460 | 1.20 | 0 |210| Caption | 14px | 500–600 | 1.20–1.29 | -0.315px / 0 |211| Micro | 12px | 700 | 1.50 | 0 |212 213**460 is the new 400.** Display compresses (0.96), body breathes (1.50). Negative tracking surgical: large only.214 215## 4. Buttons216 217### Warm Cream Primary218```css219background: #e9e5dd;220color: #292827;221padding: 12px 22px;222border-radius: 8px;223```224 225### Dark Inverse226- Background `#292827`, text white, 8px radius227 228### Ghost / Text Link229- Underline decoration, Amethyst Link (`#714cb6`)230 231## 5. Cards232- Background white233- Border `1px solid #dcd7d3`234- Radius **16px** (cards) or **8px** (small) — no other values235- Hero containment: `rgba(255,255,255,0.2)` border on the purple gradient236 237## 6. Charts238**Stepped lavender gradient bars, no gaps** — calm productivity, not financial hype. The bars step from soft Lavender Glow (`#cbb7fb`) into Mysteria Purple (`#1b1938`), creating a gradient narrative across the chart. No gridlines.239 240## 7. Spacing241- Base 8px242- Scale: `2, 4, 6, 8, 12, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56`243- Section padding 48–80px244 245## 8. Depth & elevation246 247| Level | Treatment | Use |248|-------|-----------|-----|249| 0 | Flat | Page canvas |250| 1 | `1px solid #dcd7d3` | Card |251| 2 | `1px solid #292827` | Header / dark separator |252| 3 | Subtle blur | Product screenshot frames |253| 4 | `rgba(255,255,255,0.2)` border | Hero gradient overlay |254 255**Hero gradient creates depth**, not shadows. Lavender accents float over the purple field — a stellar/atmospheric effect.256 257## 9. Do's & don'ts258 259✅ **Do**260- Use weight 460 as default — slightly heavier than regular, the brand signature261- Hold display leading at 0.96 — compression is intentional262- Use Warm Cream (`#e9e5dd`) buttons — never white, never gray263- Limit radius to **8px and 16px** only264- Apply negative tracking on display, never body265- Use Lavender (`#cbb7fb`) as the *only* accent266 267❌ **Don't**268- Use conventional weights 400/500/600 for display — 460/540 is the signature269- Add bright/saturated CTAs (blue, green, red) — buttons are intentionally muted270- Introduce additional accents — palette is single-accent by design271- Use pill shapes — not in this system272- Use pure black text — Charcoal Ink (`#292827`) is warmer273- Add micro-rounding (2–4px) — radius is binary274 275---276 277## Tokens278 279> Generated from the same source the live preview renders from.280> Treat the values below as the contract — never substitute approximations.281 282### Colors283 284| Role | Value |285|-----------|-------|286| primary | `#292827` |287| secondary | `#55534e` |288| tertiary | `#cbb7fb` |289| neutral | `#1b1938` |290| surface | `#ffffff` |291 292### Typography293 294- **Display:** Inter Tight295- **Body:** Inter Tight296- **Mono:** JetBrains Mono297 298| Role | size / leading / weight / tracking |299|------|------------------------------------|300| Hero | 4rem / 0.96 / 500 / 0 |301| H1 | 3rem / 0.96 / 500 / -1.32px |302| H2 | 1.75rem / 1.14 / 500 / -0.63px |303| Body | 1rem / 1.5 / 500 / 0 |304 305### Radius306 307- sm: `8px`308- md: `8px`309- lg: `16px`310 311### Shadows312 313- **card:** `rgba(41,40,39,0.06) 0 1px 2px`314 315### Borders316 317- **card:** `1px solid #dcd7d3`318- **divider:** `#dcd7d3`319 320### Buttons321 322Four variants, each fully tokenized. The preview renders from these exact values.323 324#### Primary325 326| Property | Value |327|----------|-------|328| shape | `rounded` |329| background | `#e9e5dd` |330| color | `#292827` |331| border | `none` |332| padding | `12px 22px` |333| fontWeight | `700` |334 335#### Secondary336 337| Property | Value |338|----------|-------|339| shape | `rounded` |340| background | `#292827` |341| color | `#ffffff` |342| border | `none` |343| padding | `12px 22px` |344| fontWeight | `600` |345 346#### Outline347 348| Property | Value |349|----------|-------|350| shape | `rounded` |351| background | `#ffffff` |352| color | `#292827` |353| border | `1px solid #dcd7d3` |354| padding | `12px 22px` |355| fontWeight | `600` |356 357#### Ghost358 359| Property | Value |360|----------|-------|361| shape | `rounded` |362| background | `transparent` |363| color | `#714cb6` |364| border | `none` |365| padding | `12px 8px` |366| fontWeight | `540` |367| hoverHint | `underline` |368 369### Charts370 371| Property | Value |372|----------|-------|373| variant | `stepped` |374| strokeWidth | `2` |375| fillOpacity | `0.4` |376| gridlines | `false` |377| barGap | `0px` |378| highlight | `all` |379| dotMarker | `false` |380| palette | `#cbb7fb`, `#b59cf5`, `#9d80ee`, `#8364e0`, `#714cb6`, `#52378a`, `#1b1938` |381 # 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;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter Tight"', 'serif'], sans: ['"Inter Tight"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#292827', secondary: '#55534e', accent: '#cbb7fb', neutral: '#1b1938', surface: '#ffffff', }, borderRadius: { sm: '8px', md: '8px', lg: '16px', }, }, },};Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
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.
A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed.
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.