design.md
Back to directory
consumer · premium · minimal · editorial

Twilight Mail.

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.

01 · Preview

The kitchen sink.

Twilight.app
ProductPricingDocsAbout
Sign inGet started
consumer · premium · minimal

Build with Twilight 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
#292827
secondary
#55534E
tertiary
#CBB7FB
neutral
#1B1938
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
8px
md
8px
lg
16px
pill
999px
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: "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: 8px
22  md: 8px
23  lg: 16px
24shadows:
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: #e9e5dd
32    color: #292827
33    border: none
34    shape: rounded
35    padding: 12px 22px
36    font: 700
37  secondary:
38    background: #292827
39    color: #ffffff
40    border: none
41    shape: rounded
42    padding: 12px 22px
43    font: 600
44  outline:
45    background: #ffffff
46    color: #292827
47    border: 1px solid #dcd7d3
48    shape: rounded
49    padding: 12px 22px
50    font: 600
51  ghost:
52    background: transparent
53    color: #714cb6
54    border: none
55    shape: rounded
56    padding: 12px 8px
57    font: 540
58    hover: underline
59charts:
60  variant: stepped
61  stroke_width: 2
62  fill_opacity: 0.4
63  gridlines: false
64  bar_gap: 0px
65  highlight: all
66  dot_marker: false
67  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 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 **Twilight 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** — 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 tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
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#### Charts
127 
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 pairings
134 
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 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 
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 content
172- Variable font weights **460 / 540** — between conventional stops
173- Display leading **0.96** — compressed power
174- Warm Cream (`#e9e5dd`) buttons — never bright
175- Lavender (`#cbb7fb`) as the *only* accent
176- **Binary radius system** — 8px and 16px, nothing else
177- No pill shapes, no micro-rounding
178- Charcoal Ink (`#292827`) text — warmer than pure black
179 
180## 2. Palette
181 
182### Primary
183- **Mysteria Purple** `#1b1938` — hero gradient, darkest brand expression
184- **Lavender Glow** `#cbb7fb` — single accent
185- **Charcoal Ink** `#292827` — primary text on light
186 
187### Surface
188- Pure White `#ffffff` · Warm Cream `#e9e5dd` (button) · Parchment Border `#dcd7d3`
189 
190### Secondary
191- Amethyst Link `#714cb6` — underlined links
192- Translucent White `rgba(255,255,255,0.95)` / `rgba(255,255,255,0.8)` — text on dark
193 
194## 3. Typography
195 
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. Buttons
216 
217### Warm Cream Primary
218```css
219background: #e9e5dd;
220color: #292827;
221padding: 12px 22px;
222border-radius: 8px;
223```
224 
225### Dark Inverse
226- Background `#292827`, text white, 8px radius
227 
228### Ghost / Text Link
229- Underline decoration, Amethyst Link (`#714cb6`)
230 
231## 5. Cards
232- Background white
233- Border `1px solid #dcd7d3`
234- Radius **16px** (cards) or **8px** (small) — no other values
235- Hero containment: `rgba(255,255,255,0.2)` border on the purple gradient
236 
237## 6. Charts
238**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. Spacing
241- Base 8px
242- Scale: `2, 4, 6, 8, 12, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56`
243- Section padding 48–80px
244 
245## 8. Depth & elevation
246 
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'ts
258 
259✅ **Do**
260- Use weight 460 as default — slightly heavier than regular, the brand signature
261- Hold display leading at 0.96 — compression is intentional
262- Use Warm Cream (`#e9e5dd`) buttons — never white, never gray
263- Limit radius to **8px and 16px** only
264- Apply negative tracking on display, never body
265- Use Lavender (`#cbb7fb`) as the *only* accent
266 
267❌ **Don't**
268- Use conventional weights 400/500/600 for display — 460/540 is the signature
269- Add bright/saturated CTAs (blue, green, red) — buttons are intentionally muted
270- Introduce additional accents — palette is single-accent by design
271- Use pill shapes — not in this system
272- Use pure black text — Charcoal Ink (`#292827`) is warmer
273- Add micro-rounding (2–4px) — radius is binary
274 
275---
276 
277## Tokens
278 
279> Generated from the same source the live preview renders from.
280> Treat the values below as the contract — never substitute approximations.
281 
282### Colors
283 
284| Role      | Value |
285|-----------|-------|
286| primary   | `#292827` |
287| secondary | `#55534e` |
288| tertiary  | `#cbb7fb` |
289| neutral   | `#1b1938` |
290| surface   | `#ffffff` |
291 
292### Typography
293 
294- **Display:** Inter Tight
295- **Body:** Inter Tight
296- **Mono:** JetBrains Mono
297 
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### Radius
306 
307- sm: `8px`
308- md: `8px`
309- lg: `16px`
310 
311### Shadows
312 
313- **card:** `rgba(41,40,39,0.06) 0 1px 2px`
314 
315### Borders
316 
317- **card:** `1px solid #dcd7d3`
318- **divider:** `#dcd7d3`
319 
320### Buttons
321 
322Four variants, each fully tokenized. The preview renders from these exact values.
323 
324#### Primary
325 
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#### Secondary
336 
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#### Outline
347 
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#### Ghost
358 
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### Charts
370 
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 
382---
383 
384## Pro tokens
385 
386> Production-fidelity tokens. States, density, motion, elevation,
387> content rules and a measured WCAG contract — derived from the
388> resting tokens unless explicitly authored.
389 
390### States
391 
392#### Button
393 
394- **hover** — bg: `rgba(203, 183, 251, 0.92)`, shadow: `0 4px 20px -8px rgba(203, 183, 251, 0.4)`
395- **focus** — outline: `1.5px solid #cbb7fb`, outline-offset: `4px`
396- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
397- **disabled** — opacity: `0.45`
398- **loading** — opacity: `0.7`
399- **selected** — bg: `#292827`, color: `#ffffff`
400 
401#### Input
402 
403- **hover** — border: `1px solid #292827`
404- **focus** — border: `1px solid #cbb7fb`, shadow: `0 1px 0 0 #cbb7fb`
405- **disabled** — opacity: `0.45`
406- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
407 
408#### Card
409 
410- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
411- **selected** — border: `1px solid #292827`
412 
413#### Tab
414 
415- **hover** — color: `#292827`
416- **focus** — outline: `1.5px solid #cbb7fb`, outline-offset: `3px`
417- **selected** — color: `#cbb7fb`, border: `0 0 2px 0 solid #cbb7fb`
418 
419### Density
420 
421| Mode | padding × | row × | body | radius × | Use for |
422|------|-----------|-------|------|----------|---------|
423| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
424| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
425| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
426 
427### Motion
428 
429**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
430 
431```css
432transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
433```
434 
435| Token | Value |
436|-------|-------|
437| duration.instant | `80ms` |
438| duration.fast | `180ms` |
439| duration.base | `320ms` |
440| duration.slow | `500ms` |
441| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
442| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
443| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
444| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
445 
446### Elevation
447 
448Five-level scale, system-specific recipe.
449 
450| Level | Shadow | Recipe |
451|-------|--------|--------|
452| level0 | `none` | Hairline only — typical editorial resting state. |
453| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
454| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
455| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
456| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
457 
458### Content
459 
460- **measure:** `60ch` (max line length for body prose)
461- **paragraph spacing:** `1.5em`
462- **list indent:** `1.75em`
463- **list gap:** `0.55em`
464- **link:** color `#cbb7fb`, underline `always`
465- **blockquote:** border `4px solid #cbb7fb`, padding `0.4em 0 0.4em 1.5em`
466- **code:** background `rgba(41, 40, 39, 0.06)`, color `#292827`
467 
468### Accessibility (WCAG 2.1)
469 
470**Overall:** FAIL
471 
472| Pair | Ratio | Required | Grade | Suggested fix |
473|------|-------|----------|-------|---------------|
474| Body text on surface | 14.72:1 | AA | AAA | — |
475| Body text on canvas | 1.15:1 | AA | FAIL | `#878481` → 4.54:1 (AA) |
476| Muted text on surface | 7.68:1 | AA | AAA | — |
477| Accent on surface | 1.79:1 | AA-Large | FAIL | `#8556f6` → 4.51:1 (AA) |
478| Accent on canvas | 9.42:1 | AA-Large | AAA | — |
479
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+Tight: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 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone Press.

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

Frostlite

Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode.

glasslightminimalpremiumsaasmodern
Frostlite.app
ProductPricingDocsAbout
Sign inGet started
glass · light · minimal

Build with Frostlite.

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