DESIGN.md

name: Lumina description: Editorial-warm landing page for an AI-native workflow tool. colors: cream: "#faf6ef" cream-warm: "#f4ebdc" peach: "#f6dfcb" line: "#e6dccb" ink: "#1f1a15" soft: "#5b4f44" accent: "#c8552b" accent-deep: "#a8431f" typography: display: fontFamily: "Fraunces, Georgia, serif" fontSize: "clamp(3rem, 7vw, 5.5rem)" fontWeight: 400 lineHeight: 1.05 letterSpacing: "-0.02em" headline: fontFamily: "Fraunces, Georgia, serif" fontSize: "clamp(2.25rem, 4.5vw, 3.25rem)" fontWeight: 400 lineHeight: 1.1 letterSpacing: "-0.02em" title: fontFamily: "Fraunces, Georgia, serif" fontSize: "1.375rem" fontWeight: 500 lineHeight: 1.3 letterSpacing: "-0.01em" body: fontFamily: "Inter, system-ui, sans-serif" fontSize: "1rem" fontWeight: 400 lineHeight: 1.55 letterSpacing: "normal" lede: fontFamily: "Inter, system-ui, sans-serif" fontSize: "1.25rem" fontWeight: 400 lineHeight: 1.55 letterSpacing: "normal" label: fontFamily: "Inter, system-ui, sans-serif" fontSize: "0.75rem" fontWeight: 600 lineHeight: 1.4 letterSpacing: "0.16em" rounded: card: "20px" icon: "14px" pill: "999px" spacing: xs: "8px" sm: "16px" md: "24px" lg: "32px" xl: "56px" 2xl: "80px" 3xl: "120px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.cream}" rounded: "{rounded.pill}" padding: "14px 28px" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" rounded: "{rounded.pill}" padding: "14px 28px" nav-pill: backgroundColor: "{colors.ink}" textColor: "{colors.cream}" rounded: "{rounded.pill}" padding: "9px 18px" card: backgroundColor: "{colors.cream-warm}" textColor: "{colors.soft}" rounded: "{rounded.card}" padding: "40px 32px" icon-tile: backgroundColor: "{colors.cream}" rounded: "{rounded.icon}" size: "56px"

Design System: Lumina

1. Overview

Creative North Star: "Editorial confidence in warm light."

The 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.

What 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.

Key Characteristics:

  • Warm-paper palette anchored on cream (#faf6ef)
  • Display in Fraunces, body in Inter
  • Editorial-leaning layout vocabulary
  • Rounded throughout (14px, 20px, 999px)
  • Flat: no shadows, depth via tonal layering

2. Colors

A single warm-cream family carrying both surface and neutral text, with one muted-orange accent that earns its rare appearances.

Primary

  • 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.
  • Accent Deep (#a8431f): the darker variant for hover and emphasis states; same hue, a step deeper.

Neutral

  • Cream (#faf6ef): the page surface, the nav background (translucent), and the bottom of the hero gradient.
  • Cream Warm (#f4ebdc): the feature card surface; one shade darker than cream, anchors the card group as a contained set.
  • Peach (#f6dfcb): the warmer stop of the hero gradient. Atmospheric, not structural.
  • Ink (#1f1a15): primary body text; primary-button background; the dark CTA section's surface.
  • Soft (#5b4f44): secondary text; captions; footer copy; nav link rest state.
  • Line (#e6dccb): hairline borders on cards, the nav, the footer, and the icon tiles.

Named Rules

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."

The 10% Accent Rule. The burnt orange covers no more than 10% of any rendered surface. Its rarity is the point.

3. Typography

Display Font: Fraunces (Georgia fallback, serif) Body Font: Inter (system-ui fallback, sans-serif)

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.

Hierarchy

  • Display (Fraunces, clamp(48px, 7vw, 88px), weight 400, line-height 1.05, letter-spacing -0.02em): hero headlines only.
  • Headline (Fraunces, clamp(36px, 4.5vw, 52px), weight 400, line-height 1.1): section headlines.
  • Title (Fraunces, 22px, weight 500, letter-spacing -0.01em): card headings.
  • Lede (Inter, 20px, weight 400, line-height 1.55): the supporting paragraph below a hero headline.
  • Body (Inter, 15–18px, weight 400, line-height 1.55): default paragraph copy. Cap line length at 65–75ch.
  • Label (Inter, 12px, weight 600, letter-spacing 0.16em, uppercase): the eyebrow chip and any small uppercase labels.

Named Rules

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).

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.

4. Elevation

Flat. No shadows on cards, buttons, surfaces, or any rendered element. Depth is conveyed by three things and only those:

  • Tonal layering: cream (page) sits below cream-warm (cards), which sit below ink (the dark CTA section).
  • Hairline borders: 1px line color (--line) on every contained surface.
  • Sticky-nav backdrop blur: the only blur in the system, marking the nav as living above content.

Named Rules

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.

5. Components

Buttons

  • Shape: fully rounded (border-radius: 999px). The full-size variant is 14px 28px padding; the smaller nav pill is 9px 18px.
  • Primary (.btn-primary, .pill): background ink, text cream. The primary CTA on every section.
  • Ghost (.btn-ghost): transparent background, ink 1px border, ink text. Secondary CTA, always paired with primary.
  • Hover: translateY(-1px), 150ms ease.
  • Inverted Primary (.cta-section .btn-primary): background cream, text ink. Used because the dark CTA section reverses the surface contrast.

Cards (Feature Tiles)

  • Corner Style: 20px rounded (less than pill, more than container).
  • Background: cream-warm (--cream-warm), one shade darker than the surrounding cream surface.
  • Border: 1px line color.
  • Internal Padding: 40px 32px (generous; cards breathe).
  • Shadow: none, see Elevation.

Icon Tile (inside Cards)

  • Size: 56×56px.
  • Background: cream (--cream).
  • Border: 1px line color.
  • Corner Style: 14px rounded.
  • Position: centered above the card heading, 24px bottom margin.

Eyebrow Chip

  • Style: uppercase Inter, 12px, weight 600, letter-spacing 0.16em, color accent-deep (#a8431f). No background or border — pure typographic label.
  • Position: standalone above the hero <h1>, with 32px bottom margin.
  • Background: translucent cream (rgba(250, 246, 239, 0.85)) with backdrop-filter: blur(10px). Sticky to the top.
  • Border: 1px line color at the bottom edge.
  • Links: 14px Inter, weight 400, color soft (rest), color ink (hover). The trailing pill CTA uses the nav-pill component.

Logo Strip

  • Items: Fraunces italic, 22px, color soft. Six wordmarks, justified across a single row, separated by hairline borders top and bottom.

6. Do's and Don'ts

Do:

  • Do keep the burnt-orange accent under 10% of any visible surface; it's a typographic accent and a logo dot, not a button.
  • Do use Fraunces for display and Inter for body; respect the One-Italic Rule.
  • Do carry depth via tonal layering and hairline borders, not shadows.
  • Do tint every neutral toward the cream hue. Reject pure white and pure gray.
  • Do keep buttons fully rounded (999px) and cards moderately rounded (20px); the contrast is intentional.

Don't:

  • Don't add box-shadows to surfaces. The system is flat by default; hover lift uses transform, not shadow.
  • Don't introduce gradient text or background-clip: text. The hero gradient is a section background, never a typographic effect.
  • Don't add glassmorphism, neon glow, dark mode by default, or side-stripe colored borders — all banned in PRODUCT.md anti-references.
  • Don't introduce a fourth color outside the cream / ink / orange family without an explicit reason recorded in PRODUCT.md.
  • 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.