Skip to content

DESIGN.md

Latest commit

 

History

History
79 lines (60 loc) · 4.65 KB

DESIGN.md

File metadata and controls

79 lines (60 loc) · 4.65 KB

Lede — Design System (current state, before Impeccable polish)

Color strategy

Restrained. Tinted paper neutrals + one warm accent ≤10% surface.

Token OKLCH-equivalent Hex Usage
paper warm cream #f4f1ea Page background
paper-50 softer cream #faf8f3 Section alt-background, input fill
ink warm near-black #14110d Primary text, high-contrast surfaces
ink-soft warm dark #2a241d Body copy on paper
muted warm graphite #6f6960 Secondary text, captions
rule pale warm taupe #d9d2c4 Borders, hairlines, dividers
accent burnt sienna #b8423a Eyebrows, hovers, brand accent
accent-soft terracotta wash #d97a6c (defined, currently unused)

No #000, no #fff. Every neutral tinted toward warm-paper. The accent is editorial print-pull-quote red, not a SaaS brand-blue.

Typography

Three families, three roles:

  • font-display: Fraunces (variable, axes: SOFT, WONK, opsz). Display headlines, wordmark, article titles. Editorial print-magazine feel.
  • font-sans: Inter. Body copy, manifesto paragraphs, helper text.
  • font-mono: JetBrains Mono. Captions, labels, metadata, smallcaps, tile sublabels, footer disclosure.

Scale (current Tailwind classes in use):

  • Wordmark: text-3xl
  • H1 manifesto: text-5xl lg:text-6xl with leading-[1.05]
  • H2 section: text-3xl or text-4xl
  • H3 article-card: text-lg
  • Body: text-lg leading-relaxed (manifesto), default text-base
  • Caption: text-xs or text-[11px]
  • Microcaption: text-[10px]

Smallcaps utility (.smallcaps) for eyebrows: font-variant-caps: all-small-caps; letter-spacing: 0.08em.

Layout & spacing

  • Max width: max-w-7xl for landing sections, max-w-7xl for article detail.
  • Horizontal padding: px-6 lg:px-12
  • Section vertical rhythm: py-12, py-16, py-20 — varies for cadence (manifesto and try-it use py-20; showcase and visitor use py-16).
  • Grid: 12-column on landing manifesto split (lg:grid-cols-12 with 7/5 or 8/4).
  • Bakeoff grid: 1 → 2 → 4 columns at sm/lg breakpoints.
  • Card grid: 1 → 2 → 3 columns at md/lg.

Components

  • Wordmark: Lede. with accent dot.
  • Eyebrow: smallcaps text-xs text-accent above section heads.
  • ArticleCard: aspect-video original image + overlay on hover, then card body with title + subline.
  • BakeoffGrid: two-section layout. (1) Cloud row: 4-tile grid (original + 3 generations) labeled "On the bench · cloud". (2) Optional Local row: 2-tile grid (Flux Krea dev, FLUX.2 Klein 9B) labeled "On the bench · local", rendered only when localGenerations is populated. Each figure: aspect-video image + 2-line caption. Generation tiles use object-contain bg-rule so models that return non-16:9 aspects letterbox cleanly; original tile uses object-cover since published heroes vary.
  • ZoomableImage: click → fullscreen overlay with caption strip and close button. ESC closes. Backdrop click closes. Body scroll locks.
  • StreamingBakeoffGrid: live-paste version with stage indicator, placeholder strings, pulsing animation on active tile.
  • BakeForm: input + submit + reset. NDJSON streaming consumer. Shows persisted-link button on success.

Motion

  • Hover transitions: transition-colors (200ms default).
  • Lightbox open: opacity fade (no layout animation).
  • Streaming tile placeholder: lede-pulse keyframe (1.4s ease-in-out).

Decorative utilities

  • .editorial-rule: dotted hairline (8px dash repeat) — defined but currently unused. Available for division between sections.

Identified weaknesses (entry points for the polish pass)

  1. The whole page is built from horizontal border-b rules. Reads as a stack of cards, not as one continuous publication.
  2. No real grid baseline. Spacing is rhythmic but not systematic.
  3. Hover states are uniform (hover:text-ink / hover:border-ink). Missing tactile detail.
  4. The wordmark Lede. is small for a brand-page register.
  5. No focus-ring discipline. Default browser focus rings will disrupt the editorial feel.
  6. Section eyebrows are correct color but undifferentiated rhythm — they all feel the same weight.
  7. Streaming progress (the 3-stage indicator) is functional but bland. A small editorial visual move could turn this into one of the page's most memorable elements.
  8. The article detail sidebar (Time to bake / Models rendered / Generated) is correct register but visually too uniform — three identical blocks.
  9. Lightbox close button is ascetic but the caption strip feels detached from the image.
  10. No print-style touches: no drop caps, no rule lines that break the SaaS-page reflex, no subtle paper-grain texture.