1---
2name: Lumina
3description: Editorial-warm landing page for an AI-native workflow tool.
4colors:
5 cream: "#faf6ef"
6 cream-warm: "#f4ebdc"
7 peach: "#f6dfcb"
8 line: "#e6dccb"
9 ink: "#1f1a15"
10 soft: "#5b4f44"
11 accent: "#c8552b"
12 accent-deep: "#a8431f"
13typography:
14 display:
15 fontFamily: "Fraunces, Georgia, serif"
16 fontSize: "clamp(3rem, 7vw, 5.5rem)"
17 fontWeight: 400
18 lineHeight: 1.05
19 letterSpacing: "-0.02em"
20 headline:
21 fontFamily: "Fraunces, Georgia, serif"
22 fontSize: "clamp(2.25rem, 4.5vw, 3.25rem)"
23 fontWeight: 400
24 lineHeight: 1.1
25 letterSpacing: "-0.02em"
26 title:
27 fontFamily: "Fraunces, Georgia, serif"
28 fontSize: "1.375rem"
29 fontWeight: 500
30 lineHeight: 1.3
31 letterSpacing: "-0.01em"
32 body:
33 fontFamily: "Inter, system-ui, sans-serif"
34 fontSize: "1rem"
35 fontWeight: 400
36 lineHeight: 1.55
37 letterSpacing: "normal"
38 lede:
39 fontFamily: "Inter, system-ui, sans-serif"
40 fontSize: "1.25rem"
41 fontWeight: 400
42 lineHeight: 1.55
43 letterSpacing: "normal"
44 label:
45 fontFamily: "Inter, system-ui, sans-serif"
46 fontSize: "0.75rem"
47 fontWeight: 600
48 lineHeight: 1.4
49 letterSpacing: "0.16em"
50rounded:
51 card: "20px"
52 icon: "14px"
53 pill: "999px"
54spacing:
55 xs: "8px"
56 sm: "16px"
57 md: "24px"
58 lg: "32px"
59 xl: "56px"
60 2xl: "80px"
61 3xl: "120px"
62components:
63 button-primary:
64 backgroundColor: "{colors.ink}"
65 textColor: "{colors.cream}"
66 rounded: "{rounded.pill}"
67 padding: "14px 28px"
68 button-ghost:
69 backgroundColor: "transparent"
70 textColor: "{colors.ink}"
71 rounded: "{rounded.pill}"
72 padding: "14px 28px"
73 nav-pill:
74 backgroundColor: "{colors.ink}"
75 textColor: "{colors.cream}"
76 rounded: "{rounded.pill}"
77 padding: "9px 18px"
78 card:
79 backgroundColor: "{colors.cream-warm}"
80 textColor: "{colors.soft}"
81 rounded: "{rounded.card}"
82 padding: "40px 32px"
83 icon-tile:
84 backgroundColor: "{colors.cream}"
85 rounded: "{rounded.icon}"
86 size: "56px"
87---
88
89# Design System: Lumina
90
91## 1. Overview
92
93**Creative North Star: "Editorial confidence in warm light."**
94
95The system reads as a printed magazine spread, transposed to a screen. Cream paper as the page surface, ink-dark headlines in Fraunces, restrained pacing carried by whitespace. Density is mid. The accent (a burnt orange warming toward the lower stop of the cream-to-peach hero gradient) appears sparingly: on the eyebrow chip, the logo dot, and the italic emphasis inside the hero headline. Nowhere else.
96
97What the system explicitly rejects, per PRODUCT.md anti-references: glassmorphism, dark mode with neon glow, gradient text, side-stripe accents on cards, and the broader "Fraunces-cream-peach SaaS template" that this very page exemplifies. The DESIGN.md documents the current visual reality so the live-mode design panel can render it accurately. The brand intent is to diffuse away from it.
98
99**Key Characteristics:**
100- Warm-paper palette anchored on cream (#faf6ef)
101- Display in Fraunces, body in Inter
102- Editorial-leaning layout vocabulary
103- Rounded throughout (14px, 20px, 999px)
104- Flat: no shadows, depth via tonal layering
105
106## 2. Colors
107
108A single warm-cream family carrying both surface and neutral text, with one muted-orange accent that earns its rare appearances.
109
110### Primary
111- **Burnt Orange Accent** (#c8552b): the eyebrow chip's color, the logo dot, the italic emphasis inside the hero headline. Decorative; never a surface, never a button background.
112- **Accent Deep** (#a8431f): the darker variant for hover and emphasis states; same hue, a step deeper.
113
114### Neutral
115- **Cream** (#faf6ef): the page surface, the nav background (translucent), and the bottom of the hero gradient.
116- **Cream Warm** (#f4ebdc): the feature card surface; one shade darker than cream, anchors the card group as a contained set.
117- **Peach** (#f6dfcb): the warmer stop of the hero gradient. Atmospheric, not structural.
118- **Ink** (#1f1a15): primary body text; primary-button background; the dark CTA section's surface.
119- **Soft** (#5b4f44): secondary text; captions; footer copy; nav link rest state.
120- **Line** (#e6dccb): hairline borders on cards, the nav, the footer, and the icon tiles.
121
122### Named Rules
123**The Cream-Family Rule.** Every neutral surface tints toward the brand hue. No pure white anywhere, no pure black, no untinted gray. The eye should never read this page as "default browser."
124
125**The 10% Accent Rule.** The burnt orange covers no more than 10% of any rendered surface. Its rarity is the point.
126
127## 3. Typography
128
129**Display Font:** Fraunces (Georgia fallback, serif)
130**Body Font:** Inter (system-ui fallback, sans-serif)
131
132**Character:** A magazine-cover serif for the headlines and brand mark, paired with a refined sans for everything else. The italic Fraunces inside `<em>` is the system's only italic, used exactly once per page on a single word inside the hero headline.
133
134### Hierarchy
135- **Display** (Fraunces, clamp(48px, 7vw, 88px), weight 400, line-height 1.05, letter-spacing -0.02em): hero headlines only.
136- **Headline** (Fraunces, clamp(36px, 4.5vw, 52px), weight 400, line-height 1.1): section headlines.
137- **Title** (Fraunces, 22px, weight 500, letter-spacing -0.01em): card headings.
138- **Lede** (Inter, 20px, weight 400, line-height 1.55): the supporting paragraph below a hero headline.
139- **Body** (Inter, 15–18px, weight 400, line-height 1.55): default paragraph copy. Cap line length at 65–75ch.
140- **Label** (Inter, 12px, weight 600, letter-spacing 0.16em, uppercase): the eyebrow chip and any small uppercase labels.
141
142### Named Rules
143**The One-Italic Rule.** Italic appears exactly once per page: on a single emphasized word inside the hero headline. Nowhere else. The logo strip's italic Fraunces wordmarks are the exception that proves it (wordmark, not running italic).
144
145**The No-Gradient-Text Rule.** Type is solid color, always. The hero's cream-to-peach gradient is a section background, never a typographic effect.
146
147## 4. Elevation
148
149Flat. No shadows on cards, buttons, surfaces, or any rendered element. Depth is conveyed by three things and only those:
150
151- **Tonal layering**: cream (page) sits below cream-warm (cards), which sit below ink (the dark CTA section).
152- **Hairline borders**: 1px line color (`--line`) on every contained surface.
153- **Sticky-nav backdrop blur**: the only blur in the system, marking the nav as living above content.
154
155### Named Rules
156**The Flat-By-Default Rule.** Surfaces are flat at rest. Hover lift uses `transform: translateY(-1px)`, never a shadow. Glassmorphism, neon glow, and elevation halos are absent by design.
157
158## 5. Components
159
160### Buttons
161- **Shape:** fully rounded (border-radius: 999px). The full-size variant is 14px 28px padding; the smaller nav pill is 9px 18px.
162- **Primary** (`.btn-primary`, `.pill`): background ink, text cream. The primary CTA on every section.
163- **Ghost** (`.btn-ghost`): transparent background, ink 1px border, ink text. Secondary CTA, always paired with primary.
164- **Hover:** translateY(-1px), 150ms ease.
165- **Inverted Primary** (`.cta-section .btn-primary`): background cream, text ink. Used because the dark CTA section reverses the surface contrast.
166
167### Cards (Feature Tiles)
168- **Corner Style:** 20px rounded (less than pill, more than container).
169- **Background:** cream-warm (`--cream-warm`), one shade darker than the surrounding cream surface.
170- **Border:** 1px line color.
171- **Internal Padding:** 40px 32px (generous; cards breathe).
172- **Shadow:** none, see Elevation.
173
174### Icon Tile (inside Cards)
175- **Size:** 56×56px.
176- **Background:** cream (`--cream`).
177- **Border:** 1px line color.
178- **Corner Style:** 14px rounded.
179- **Position:** centered above the card heading, 24px bottom margin.
180
181### Eyebrow Chip
182- **Style:** uppercase Inter, 12px, weight 600, letter-spacing 0.16em, color accent-deep (#a8431f). No background or border — pure typographic label.
183- **Position:** standalone above the hero `<h1>`, with 32px bottom margin.
184
185### Navigation
186- **Background:** translucent cream (`rgba(250, 246, 239, 0.85)`) with `backdrop-filter: blur(10px)`. Sticky to the top.
187- **Border:** 1px line color at the bottom edge.
188- **Links:** 14px Inter, weight 400, color soft (rest), color ink (hover). The trailing pill CTA uses the nav-pill component.
189
190### Logo Strip
191- **Items:** Fraunces italic, 22px, color soft. Six wordmarks, justified across a single row, separated by hairline borders top and bottom.
192
193## 6. Do's and Don'ts
194
195### Do:
196- **Do** keep the burnt-orange accent under 10% of any visible surface; it's a typographic accent and a logo dot, not a button.
197- **Do** use Fraunces for display and Inter for body; respect the One-Italic Rule.
198- **Do** carry depth via tonal layering and hairline borders, not shadows.
199- **Do** tint every neutral toward the cream hue. Reject pure white and pure gray.
200- **Do** keep buttons fully rounded (999px) and cards moderately rounded (20px); the contrast is intentional.
201
202### Don't:
203- **Don't** add box-shadows to surfaces. The system is flat by default; hover lift uses transform, not shadow.
204- **Don't** introduce gradient text or `background-clip: text`. The hero gradient is a section background, never a typographic effect.
205- **Don't** add glassmorphism, neon glow, dark mode by default, or side-stripe colored borders — all banned in PRODUCT.md anti-references.
206- **Don't** introduce a fourth color outside the cream / ink / orange family without an explicit reason recorded in PRODUCT.md.
207- **Don't** drift into the broader "Fraunces-cream-peach SaaS template" the page already exemplifies. The PRODUCT.md anti-references this aesthetic; departure-mode variants should diffuse away from it.