DESIGN.md

version	alpha
name	Impeccable Editorial System
description	A high-contrast editorial design system for a Codex-first design skill pack.
colors	ink text-primary paper cream charcoal ash mist background accent accent-hover accent-dim accent-soft category-create-bg category-create-border category-create-text category-evaluate-bg category-evaluate-border category-evaluate-text category-refine-bg category-refine-border category-refine-text category-simplify-bg category-simplify-border category-simplify-text category-harden-bg category-harden-border category-harden-text category-system-bg category-system-border category-system-text oklch(10% 0 0) oklch(10% 0 0) oklch(98% 0 0) oklch(96% 0.005 350) oklch(25% 0 0) oklch(55% 0 0) oklch(92% 0 0) oklch(96% 0.005 350) oklch(60% 0.25 350) oklch(52% 0.25 350) oklch(60% 0.25 350 / 0.15) oklch(60% 0.25 350 / 0.25) #fdf2f8 #ec4899 #be185d #fdf4ff #d946ef #a21caf #eff6ff #3b82f6 #1d4ed8 #fffbeb #f59e0b #b45309 #f0fdf4 #22c55e #15803d #f5f5f4 #78716c #44403c
typography	display body mono fontFamily fontWeight lineHeight letterSpacing Cormorant Garamond, Georgia, serif 400 1.1 -0.02em fontFamily fontSize lineHeight Instrument Sans, system-ui, sans-serif 16px 1.625 fontFamily Space Grotesk, monospace
spacing	xs sm md lg xl 2xl 3xl 8px 16px 24px 32px 48px 80px 120px
rounded	hairline small medium pill 2px 4px 8px 99px
layout	max-width content-width 1400px 900px
motion	ease-out ease-in-out ease-out-quint duration-fast duration-base duration-slow duration-slower cubic-bezier(0.16, 1, 0.3, 1) cubic-bezier(0.65, 0, 0.35, 1) cubic-bezier(0.22, 1, 0.36, 1) 0.15s 0.3s 0.6s 0.8s
components	site-header command-pill code-chip background border blur color-mix(in oklch, var(--color-paper) 94%, transparent) 1px solid var(--color-mist) saturate(1.4) blur(16px) background border rounded {colors.cream} 1px solid {colors.mist} {rounded.pill} background textColor rounded {colors.accent-dim} {colors.accent} {rounded.small}

Design System

Overview

Impeccable uses an editorial, high-contrast visual system: paper, ink, considered serif display type, precise sans-serif body text, and a single assertive magenta accent. The system should feel like a design publication that happens to ship tooling, not a generic developer SaaS site.

The product critiques generic AI aesthetics, so the interface must avoid the same tells. It can be expressive, but expression comes from type scale, spacing, confident hierarchy, and clear examples rather than decorative noise.

Colors

• Ink (oklch(10% 0 0)): primary headings, strong text, active navigation, and dark fills.
• Paper (oklch(98% 0 0)): main page surface. Keep it clean and high contrast.
• Cream (oklch(96% 0.005 350)): quiet secondary surface for pills, panels, and callouts.
• Charcoal (oklch(25% 0 0)): secondary body text where pure ink would feel too heavy.
• Ash (oklch(55% 0 0)): metadata, captions, index numbers, and lower-priority UI labels.
• Mist (oklch(92% 0 0)): borders, dividers, scroll thumbs, and low-emphasis structure.
• Accent (oklch(60% 0.25 350)): active links, selection, command highlights, and a small number of interactive cues.

Category colors are functional and should remain scoped to command/category navigation. Do not let them become the whole page palette.

Typography

• Display: Cormorant Garamond, regular, tight leading, slight negative tracking. Use for brand-scale headings and editorial section titles.
• Body: Instrument Sans, regular to semibold, readable line length, generous leading. Use for prose, UI labels, and dense documentation.
• Mono: Space Grotesk. Use for command names, code-adjacent metadata, counters, and detector-oriented labels.

Display headings carry the brand. Body text carries trust. Mono text should be sparing and functional, not a full terminal aesthetic.

Layout

• Use 1400px as the broad page max-width and 900px as the readable content width.
• Space on an 8px base with larger editorial jumps: 8, 16, 24, 32, 48, 80, 120.
• Prefer full-width sections with constrained inner content over nested cards.
• Use generous vertical rhythm around explanatory sections; use denser spacing only in reference surfaces, navs, and command grids.
• Mobile layouts should preserve hierarchy rather than simply stacking every decorative module.

Shapes, Elevation & Depth

• Default corners are restrained: 2px for frames, 4px for code chips and tiny controls, 8px for ordinary UI, 99px for pills.
• Shadows are rare and should feel like paper depth, not glowing panels.
• Borders do most structural work. Use mist borders for quiet structure and ink borders only for active or high-value surfaces.
• The site may use subtle grain, but the grain must remain background texture and never compete with content.

Components

• Site header: sticky, translucent paper surface, blurred backdrop, mist bottom border, serif brand mark, quiet nav links.
• Buttons and command pills: compact, type-led, high contrast when active. Prefer ink fills or cream pills with mist borders.
• Cards: use cards for repeated items and actual framed artifacts. Avoid page sections styled as floating cards.
• Code chips: mono type, accent-dim background, accent text, 4px radius.
• Galleries and demos: framed like specimens. Use clear labels and restrained borders so before/after changes do the work.
• Detector/category badges: use the category palette only to identify command groups or detector layers.

Do's And Don'ts

• Do let typography and spacing provide most of the personality.
• Do use the magenta accent sparingly and deliberately.
• Do keep examples concrete: show the command, the before state, and the improved state.
• Do respect reduced motion and keep animated demos optional or non-blocking.
• Don't use purple-blue hero gradients, glassmorphism, bokeh blobs, or neon tool-marketing tropes.
• Don't bury Codex command syntax behind generic product copy.
• Don't add decorative cards where a clean section or list would be clearer.
• Don't let category colors dominate the interface outside category-specific surfaces.