1---
  2name: Impeccable
  3description: Warm-paper editorial sanctuary — committed serif display, one decisive magenta, flat surfaces at rest.
  4
  5# Colors use OKLCH per `The OKLCH-Only Rule` in §2. Stitch's linter validates
  6# hex sRGB only, so it will warn on these entries — deliberate trade for one
  7# source of truth and full wide-gamut fidelity. Our own parser accepts strings.
  8colors:
  9  editorial-magenta: "oklch(60% 0.25 350)"
 10  editorial-magenta-deep: "oklch(52% 0.25 350)"
 11  warm-ash-cream: "oklch(96% 0.005 350)"
 12  crisp-paper-white: "oklch(98% 0 0)"
 13  deep-graphite: "oklch(10% 0 0)"
 14  soft-charcoal: "oklch(25% 0 0)"
 15  mid-ash: "oklch(55% 0 0)"
 16  paper-mist: "oklch(92% 0 0)"
 17  magenta-whisper: "oklch(60% 0.25 350 / 0.15)"
 18  magenta-veil: "oklch(60% 0.25 350 / 0.25)"
 19
 20typography:
 21  display:
 22    fontFamily: "Cormorant Garamond, Georgia, serif"
 23    fontSize: "clamp(2.5rem, 7vw, 4.5rem)"
 24    fontWeight: 300
 25    lineHeight: 1
 26  headline:
 27    fontFamily: "Cormorant Garamond, Georgia, serif"
 28    fontSize: "clamp(1.75rem, 4vw, 2.5rem)"
 29    fontWeight: 400
 30    lineHeight: 1.2
 31  title:
 32    fontFamily: "Cormorant Garamond, Georgia, serif"
 33    fontSize: "clamp(1.125rem, 2.5vw, 1.75rem)"
 34    fontWeight: 400
 35    lineHeight: 1.3
 36  body:
 37    fontFamily: "Instrument Sans, system-ui, sans-serif"
 38    fontSize: "1rem"
 39    fontWeight: 400
 40    lineHeight: 1.6
 41  body-lead:
 42    fontFamily: "Instrument Sans, system-ui, sans-serif"
 43    fontSize: "1.0625rem"
 44    fontWeight: 400
 45    lineHeight: 1.65
 46  supporting:
 47    fontFamily: "Instrument Sans, system-ui, sans-serif"
 48    fontSize: "0.875rem"
 49    fontWeight: 400
 50    lineHeight: 1.6
 51  label:
 52    fontFamily: "Instrument Sans, system-ui, sans-serif"
 53    fontSize: "0.9rem"
 54    fontWeight: 500
 55    letterSpacing: "0.05em"
 56  micro-label:
 57    fontFamily: "Instrument Sans, system-ui, sans-serif"
 58    fontSize: "0.6875rem"
 59    fontWeight: 500
 60    letterSpacing: "0.1em"
 61  mono:
 62    fontFamily: "Space Grotesk, monospace"
 63    fontSize: "0.75rem"
 64    fontWeight: 400
 65
 66rounded:
 67  none: "0"
 68  sm: "4px"
 69  md: "8px"
 70  lg: "12px"
 71  xl: "16px"
 72
 73spacing:
 74  xs: "8px"
 75  sm: "16px"
 76  md: "24px"
 77  lg: "32px"
 78  xl: "48px"
 79  "2xl": "80px"
 80  "3xl": "120px"
 81
 82components:
 83  button-primary:
 84    backgroundColor: "{colors.deep-graphite}"
 85    textColor: "{colors.crisp-paper-white}"
 86    typography: "{typography.label}"
 87    rounded: "{rounded.none}"
 88    padding: "16px 48px"
 89  button-primary-hover:
 90    backgroundColor: "{colors.editorial-magenta}"
 91    textColor: "{colors.crisp-paper-white}"
 92  input-text:
 93    backgroundColor: "transparent"
 94    textColor: "{colors.deep-graphite}"
 95    rounded: "{rounded.sm}"
 96    padding: "8px 12px"
 97  card:
 98    backgroundColor: "{colors.warm-ash-cream}"
 99    textColor: "{colors.deep-graphite}"
100    rounded: "{rounded.md}"
101    padding: "24px"
102  card-feature:
103    backgroundColor: "{colors.crisp-paper-white}"
104    textColor: "{colors.deep-graphite}"
105    rounded: "{rounded.lg}"
106    padding: "48px"
107  nav-link:
108    textColor: "{colors.deep-graphite}"
109    typography: "{typography.body}"
110  nav-link-hover:
111    textColor: "{colors.editorial-magenta}"
112---
113
114# Design System: Impeccable
115
116## 1. Overview: The Editorial Sanctuary
117
118**Creative North Star: "The Editorial Sanctuary"**
119
120The Impeccable site reads more like a printed design publication than a SaaS landing page. Committed typography, generous breathing room, and a single decisive accent that cuts through warm paper. The interface feels **considered, unhurried, and expert** — the work of someone who has made the calls a thousand times and has zero interest in chasing the current AI-tool aesthetic.
121
122The aesthetic philosophy is **restraint in service of craft**. Every element earns its place. Nothing is decorative without function. The palette is dominated by warm paper tones with one vibrant voice. The typography pairs a stately italic serif with a clean neutral sans. Motion is reserved for moments that actually communicate state. The site is the demo — it must pass the same anti-pattern audit it asks its users to run on their own work.
123
124This system explicitly rejects the AI-tool visual vocabulary that surrounds the product: dark mode with purple gradients, neon accents, glassmorphism, glowing cyan-on-black, SaaS hero-metric layouts, and identical-card feature grids. When in doubt, do less than a marketing site would, more than a portfolio would.
125
126**Key Characteristics:**
127- Warm off-white paper tones with an almost-imperceptible magenta tint for subliminal palette cohesion.
128- A single decisive magenta accent used on no more than 10% of any screen. Its rarity is the point.
129- Italic serif for display type; clean neutral sans for body at 1.6+ line-height.
130- Sharp, uppercase, letter-tracked primary CTAs — no rounded-rectangle-with-drop-shadow defaults.
131- Flat surfaces at rest. Shadows appear only as a response to state (hover, elevation, focus).
132- Asymmetric magazine-scale spacing; intentionally skips the 4px step.
133
134## 2. Colors: The Warm-Paper Palette
135
136A two-chord palette: warm paper neutrals carrying a near-invisible magenta tint, plus one decisive accent in the same hue family. No secondary or tertiary accents in the core system — the restraint is doctrinal.
137
138### Primary
139- **Editorial Magenta** (oklch(60% 0.25 350)): The one vibrant voice. Primary CTAs, active navigation states, live-state indicators, rare editorial emphasis. Never used as a gradient, never as a background wash, never as text fill. Rarity is the design choice.
140
141### Neutral
142- **Warm Ash Cream** (oklch(96% 0.005 350)): Primary page background. Near-white with a near-imperceptible magenta tint that creates subconscious cohesion with Editorial Magenta. Used on `body` and standard surfaces.
143- **Crisp Paper White** (oklch(98% 0 0)): Pure background. Used for inverted text moments (white-on-dark CTAs) and surfaces needing maximum contrast. Almost never the page background — too cold alone.
144- **Deep Graphite** (oklch(10% 0 0)): Primary text for body copy and headlines. Softer than pure black, reads as confident-but-not-aggressive on warm paper. Background of the primary CTA.
145- **Soft Charcoal** (oklch(25% 0 0)): Secondary text — taglines, hook paragraphs, supporting copy. Clearly subordinate to Deep Graphite without being washed out.
146- **Mid Ash** (oklch(55% 0 0)): Tertiary text — micro-labels, captions, meta lines, "works with" labels. At small sizes reads as intentionally recessed metadata.
147- **Paper Mist** (oklch(92% 0 0)): Hairline borders, section dividers, the barely-visible structural seams.
148
149### Accent Alpha Variants
150- **Editorial Magenta Deep** (oklch(52% 0.25 350)): Hover/active state for Editorial Magenta. Small darkening, confirms interaction without shouting.
151- **Magenta Whisper** (oklch(60% 0.25 350 / 0.15)): Glow backdrop under accent elements on hover (diffuse shadows only), subtle selection highlights.
152- **Magenta Veil** (oklch(60% 0.25 350 / 0.25)): Slightly stronger translucent tint for focus rings and emphasis shells.
153
154### Command Category Tints (fenced — do not extend)
155A separate six-tint vocabulary used exclusively to color-code the periodic-table visualization of impeccable's 23 commands. These tints predate the OKLCH system and live in one component. **Do not extend this vocabulary elsewhere.**
156
157- **Create** (bg `#fdf2f8` / border `#ec4899` / text `#be185d`)
158- **Evaluate** (bg `#fdf4ff` / border `#d946ef` / text `#a21caf`)
159- **Refine** (bg `#eff6ff` / border `#3b82f6` / text `#1d4ed8`)
160- **Simplify** (bg `#fffbeb` / border `#f59e0b` / text `#b45309`)
161- **Harden** (bg `#f0fdf4` / border `#22c55e` / text `#15803d`)
162- **System** (bg `#f5f5f4` / border `#78716c` / text `#44403c`)
163
164### Named Rules
165
166**The One Voice Rule.** Editorial Magenta is the only vibrant color in the system. No supporting accent is added, ever, no matter how much a layout "wants" a second color. If a second emphasis point is needed, use scale or weight, never a second hue.
167
168**The Paper-Not-White Rule.** The page background is Warm Ash Cream, never Crisp Paper White. Pure white is reserved for specific inverted surfaces. Warmth is load-bearing — without it, the site reads as generic and the decisive magenta reads as abrasive rather than decisive.
169
170**The OKLCH-Only Rule.** All new colors must be declared in OKLCH. Legacy hex values exist only in the fenced Command Category Tints. Do not introduce new hex-declared colors into the system.
171
172## 3. Typography: The Italic-and-Ink Voice
173
174**Display Font:** Cormorant Garamond (with Georgia fallback)
175**Body Font:** Instrument Sans (with system-ui fallback)
176**Label/Mono Font:** Space Grotesk (used as a geometric mono, not for code blocks)
177
178**Character:** The display face is a refined transitional serif used in its **italic** cut — stately without being stuffy, drawing on long-form editorial headline traditions. The body face is a clean neutral sans with subtle geometric warmth, chosen to set long paragraphs without visual overhead. The "mono" is a contemporary grotesque reserved for small labels and metadata where a machine-adjacent feel reinforces the command-line product story.
179
180### Hierarchy
181
182- **Display** (display family, weight 300, italic, clamp(2.5rem, 7vw, 4.5rem), line-height 1): Hero title only. The light weight + italic cursive reads as an author signature rather than a marketing headline.
183- **Headline** (display family, weight 400, clamp(1.75rem, 4vw, 2.5rem), line-height 1.2): Section headings. Larger editorial moments.
184- **Title** (display family, weight 400, italic, clamp(1.125rem, 2.5vw, 1.75rem), line-height 1.3): Hero tagline / section leads. A quieter second display voice.
185- **Body** (body family, weight 400, 1rem, line-height 1.6): Paragraph copy. Capped at 65–75ch for readability.
186- **Body Lead** (body family, weight 400, 1rem–1.0625rem, line-height 1.6–1.65): The one or two "lead" paragraphs on each page. Slightly relaxed leading.
187- **Supporting** (body family, weight 400, 0.875rem, line-height 1.6): Captions, footnotes, supporting context.
188- **Label** (body family, weight 500, 0.9rem, `text-transform: uppercase`, `letter-spacing: 0.05em`): CTA labels. Short, declarative.
189- **Micro-Label** (body family, weight 500, 0.625–0.6875rem, `text-transform: uppercase`, `letter-spacing: 0.1em`): "Works with", "What's Included", "v3.0 Changelog".
190- **Monospace Meta** (mono family, weight 400–500, 0.6875–0.8125rem): Command names in inline prose, periodic-table tile labels.
191
192### Named Rules
193
194**The Italic-Is-Voice Rule.** Italic is used as a voice choice for display type, not as emphasis within body copy. Body emphasis is carried by weight or by swapping to the mono family (see `<em>` in command menus). Treating italic as emphasis inside paragraphs dilutes the display voice.
195
196**The 1.6 Leading Rule.** Body line-height is 1.6 everywhere. Not 1.5, not 1.7, not "relaxed". This is the load-bearing readability decision — when the site reads as calm and editorial, it's 1.6 doing the work.
197
198**The Fluid-Headlines-Only Rule.** Headings use `clamp()` fluid sizing. Body copy uses fixed `rem` values. Fluid body sizes look clever and feel wrong — they make line-lengths wander off spec.
199
200## 4. Elevation
201
202Flat by default. Depth is conveyed through **state response**, not structural shadow. Surfaces rest on a single tonal layer (Warm Ash Cream); shadows appear only when an element is hovered, deliberately lifted, or requires ambient separation from a busy area.
203
204### Shadow Vocabulary
205
206- **Soft Hover Lift** (`0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06)`): The default hover response on cards and interactive surfaces. Diffuse, offset downward.
207- **Lifted Card** (`0 20px 40px rgba(0,0,0,0.08)`): Deliberately elevated content (featured cards, install blocks). Low alpha — never reads as dark.
208- **Accent Glow** (`0 20px 60px var(--color-accent-dim)`): Magenta-tinted ambient shadow under the one or two moments that should feel magnetic. Used sparingly — this is the "rare ingredient" of the shadow vocabulary.
209- **Tooltip / Popover** (`0 0 20px rgba(0,0,0,0.15)` or `0 2px 8px rgba(0,0,0,0.1)`): Tight shadow for small floating UI.
210
211### Named Rules
212
213**The Flat-By-Default Rule.** Surfaces are flat at rest. If you find yourself adding a shadow to a non-interactive, non-elevated element, stop — you're reaching for Material Design muscle memory. Use a hairline Paper Mist border instead, or no articulation at all.
214
215**The Low-Alpha Rule.** Every shadow in the system uses ≤0.15 alpha on its strongest blur. Higher alphas read as 2014 Material Design drop shadows — an immediate tell that the design wasn't considered.
216
217**The Tinted-Shadow-Only-For-Accent Rule.** Neutral shadows (black alpha) for structure. Colored (magenta-dim) shadows only for the deliberate accent-glow moments. Never tint shadows for decorative effect.
218
219## 5. Components
220
221### Buttons
222
223- **Shape:** Flat and squared by default (`border-radius: 0`). Sharp corners are an explicit editorial choice — the site rejects the rounded-rectangle-with-drop-shadow default that marks most AI-adjacent marketing pages.
224- **Primary (hero-cta-combined):** Deep Graphite background, Crisp Paper White text. Padding 16px / 48px (`--spacing-sm` / `--spacing-xl`). Uppercase, `letter-spacing: 0.05em`, weight 500. No border, no shadow at rest.
225- **Hover:** `transform: translateY(-2px)` and background shifts to Editorial Magenta. Transition 200ms linear ease. A small confident step up, never a bounce.
226- **Focus:** Browser-default focus ring combined with the hover treatment. Visible keyboard focus is required.
227- **Secondary:** Inline text link in body copy, weight 500, hover shifts to Editorial Magenta. **No boxed secondary button exists in the system** — the site avoids the "stack of equal-weight CTAs" pattern entirely.
228- **Chip (picker overlay):** Radius 3–5px, small padding, mono-family label. Used in the live-mode action selector.
229
230### Cards & Containers
231
232- **Corner Style:** Controlled vocabulary — 4px (chips / inline callouts), 8px (standard cards and card-CTAs), 12px (feature cards, install blocks), 16px (large content frames). No single "rounded-lg" default. Radius is picked per component weight.
233- **Background:** Warm Ash Cream or Crisp Paper White depending on layering. Deeper nested surfaces may lift to Paper Mist as a near-imperceptible tone shift.
234- **Shadow:** Flat at rest — see Elevation for the shadow vocabulary that applies on hover/lift.
235- **Border:** Hairline 1px in Paper Mist when a surface needs articulation without shadow.
236- **Internal Padding:** 16–32px for typical cards; large editorial frames 48px+. Padding matches visual weight, not applied uniformly.
237
238### Inputs / Fields
239
240The site is primarily editorial, so inputs are minimal:
241
242- **Email / text field:** Radius 4–6px, hairline Paper Mist border, transparent background. Focus state shifts border to Editorial Magenta with a Magenta Whisper backdrop glow.
243- **Combobox / select (filter controls):** Same stroke vocabulary, smaller padding, chevron glyph in Mid Ash.
244- **No custom checkbox/radio styling** beyond what the live-mode command picker needs.
245
246### Navigation
247
248- **Site Header:** 62px compact bar, left-aligned brand lockup (monochrome mark + wordmark), right-aligned link cluster.
249- **Typography:** Body family, weight 500, 0.9–1rem. Normal case — the header is readable prose, not a set of signals.
250- **Default State:** Deep Graphite on Warm Ash Cream.
251- **Hover / Active:** Smooth color transition to Editorial Magenta, 200ms. No underline bar at rest; if an active indicator is needed, a thin accent-colored underline appears.
252- **Mobile:** Collapses to an icon-triggered drawer when horizontal space is insufficient.
253
254### Periodic Table of Commands (signature component)
255
256A distinctive custom element worth documenting: the 23 commands are laid out as a periodic-table grid of 56×64px tiles, each with a category tint background, category-colored border, atomic number in the top-left (mono family, 7px), a symbol in the center (display family, weight 500, 20px), and a command label in mono below. Hover lifts the tile 2px with a category-colored shadow. Tiles are the one place where the Category Tint vocabulary (see Colors) is used on a colored surface rather than as a text accent.
257
258### Layout & Spacing (fold from spec-absent Layout section)
259
260- **Max width:** Content blocks cap at 900px (`--width-content`); page-level containers at 1400px (`--width-max`). Prose further constrained to 65–75ch.
261- **Spacing scale:** 8 / 16 / 24 / 32 / 48 / 80 / 120px (`--spacing-xs` through `--spacing-3xl`). The 4px step is deliberately omitted — this is an editorial scale, not an app-UI scale.
262- **Rhythm:** 80–120px between top-level sections, 24–48px between content groups within a section, 6–16px inside tight clusters.
263- **Grid:** No traditional column grid. Hero layouts are asymmetric two-column splits. Feature sections use `repeat(auto-fit, minmax(280px, 1fr))` rather than breakpoint-driven columns.
264- **Motion:** 150ms for color/opacity, 300–400ms for transforms, 600–1200ms for orchestrated entrances. All use `--ease-out` (`cubic-bezier(0.16, 1, 0.3, 1)`) or `--ease-out-quint`. `prefers-reduced-motion` collapses every non-essential transition.
265
266## 6. Do's and Don'ts
267
268### Do:
269
270- **Do** treat Warm Ash Cream (not Crisp Paper White) as the default page background. Warmth is load-bearing — see The Paper-Not-White Rule.
271- **Do** use Editorial Magenta on ≤10% of any given screen. Scarcity is what makes it read as decisive rather than noisy — see The One Voice Rule.
272- **Do** set all new colors in OKLCH. Hex is for the fenced Command Category Tints only.
273- **Do** use italic display type as a voice, not as emphasis inside paragraphs. Body emphasis is carried by weight.
274- **Do** use `clamp()` fluid sizing for headings; use fixed `rem` for body — see The Fluid-Headlines-Only Rule.
275- **Do** keep the primary CTA sharp and squared. `border-radius: 0`, uppercase, letter-tracked. This is the editorial signature.
276- **Do** use `--ease-out` (`cubic-bezier(0.16, 1, 0.3, 1)`) or `--ease-out-quint` on transitions. Expo-out only.
277- **Do** leave surfaces flat at rest. Reach for shadows only on hover or for deliberate elevation — see The Flat-By-Default Rule.
278- **Do** respect `prefers-reduced-motion` on every animation.
279- **Do** cap body line length at 65–75ch via `max-width`.
280
281### Don't:
282
283- **Don't** use pure black (#000) or pure white (#fff). Always the tinted neutrals (Deep Graphite / Warm Ash Cream / Crisp Paper White).
284- **Don't** use `border-left` or `border-right` greater than 1px as a colored stripe on cards, list items, callouts, or alerts. Ever. This is the single most recognizable AI-dashboard tell.
285- **Don't** use `background-clip: text` with a gradient. Gradient text is banned across the site. If you want emphasis, use weight or size, never gradient fill.
286- **Don't** default to dark mode. The site is light mode because editorial reading is a light-mode activity. Dark mode with glowing accents is the AI-tool aesthetic Impeccable exists to replace.
287- **Don't** use glassmorphism (blurred translucent cards, glass borders, glow backgrounds as decoration). It is on PRODUCT.md's explicit anti-reference list.
288- **Don't** add a second accent color. If a layout "needs" a second emphasis point, use scale or weight, not hue.
289- **Don't** use rounded rectangles with generic drop shadows. That's the "could be any AI output" fingerprint.
290- **Don't** use bounce or elastic easing. Real objects decelerate smoothly — expo-out is the signature.
291- **Don't** animate layout properties (`width`, `height`, `padding`, `margin`). Use `transform` and `opacity` only.
292- **Don't** nest cards inside cards. Flatten the hierarchy.
293- **Don't** use identical card grids (same-sized cards with icon + heading + text, repeated endlessly).
294- **Don't** use the hero-metric layout template (big number + small label + supporting stats + gradient accent). SaaS cliché.
295- **Don't** extend the Command Category Tints vocabulary. Those hex tints are scoped to the periodic-table viz.
296- **Don't** hedge in UI copy. "Maybe consider" and "could be helpful" are banned in-product — match PRODUCT.md's expert-decisive voice.
297- **Don't** introduce a new spacing token outside the 8/16/24/32/48/80/120 scale. If you need a specific pixel gap, use a literal value rather than polluting the token scale.