Case view:
- Header card gets gold right-border, serif display title, pill-style
action links with gold hover
- Document groups: gold-underlined section headers, hover rows with
parchment background
Wizard (new case):
- Step tabs in display font with separators; active/done states use
navy/success colors with proper background contrast
- Nav buttons separated by hairline divider
Skills page:
- Pill badges for ok/warn, gold icon, hover elevation
Upload zone:
- Larger dashed border, serif header, gold-wash hover state
Loading skeletons:
- .skeleton / .skeleton-line classes with shimmer animation
- Case list shows 3 skeleton cards while loading
- Style report shows skeleton hero while loading
Empty states:
- Case list gets ornamental ❦ + emotional copy in display font
- Error messages include underlying error detail
Print stylesheet:
- Hides header/nav/sidebar/buttons
- Forces card borders and page-break-inside for portrait printing
- Expands details elements so content prints
Responsive:
- Mobile: simplified hero, narrower process panel, wrapping header
- Tablet: home grid collapses to single column
Fixes:
- DONUT_COLORS reverts to hex literals (was var(--color-gold) string
which doesn't interpolate in conic-gradient reliably across browsers)
- Sig-phrase headline now prefers clean phrases over template-heavy ones
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces Frank Ruhl Libre + Assistant with single-family Heebo for both
display and body. Weight contrast (900/700 for headings, 400 for body,
300 for light captions) provides the hierarchy. Single font family reduces
network requests and renders consistently.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New design-system.css: CSS variables for Navy/Cream/Gold palette,
Frank Ruhl Libre (display) + Assistant (body) typography via Google Fonts,
spacing/shadow/motion tokens, RTL-safe utilities
- All body paragraphs justify to both sides (text-align: justify, inter-word)
- Existing inline <style> migrated from hardcoded #e94560/#1a1a2e/#27ae60 to
CSS variables
- Header: deep navy with gold accent rule under, display-font brand mark,
active nav link marked with gold underline
- Buttons: navy primary, gold-wash focus rings, elevation on hover
- Case cards: gold right-border, hairline top glow on hover, display font
on case number
- Home dashboard: new hero with eyebrow/title/subtitle, 4 KPI cards with
gold-rule side marker, loadKPIs() fetches case count, corpus size,
pattern count, processing queue
- Style report: larger hero h1, ornamental pull-quote headline with
drop-cap open quote, gold divider under section titles
- Toast, status bar, form inputs: navy/gold palette, serif italics for
subtitles and empty states
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
