{"path":"design-guide.md","content":"# Deliberus Design & Styling Guide\n\n**The visual identity of Deliberus: dark, focused, alive. Every surface whispers \"there's depth here.\" The design serves the [analysis ↔ attunement dialectic](analysis-and-attunement.md) — analytical structure rendered warmly, complexity made navigable, the graph made inhabitable.**\n\n---\n\n## Foundation\n\n**Font**: Manrope (variable weight, 400-800). Clean geometric sans-serif with personality.\n\n**Background**: `#0d1117` (near-black blue-gray). All content sits on this.\n\n**Ambient glow**: Faint purple radial gradient (`body::before`) centered at 200px from top, 110% page width. Scrolls with content (position: absolute, not fixed). Gives the page a subtle depth — the logo area feels lit from within.\n\n**Page width**: `max-width: 820px` centered. All pages share this constraint.\n\n**Page transitions**: View Transitions API — blur-out (200ms) on old, fade-in (300ms) on new. Smooth cross-page navigation.\n\n---\n\n## Color System\n\n### Design Tokens (CSS custom properties)\n\nAll colors live in `:root` in `app.css`. Change one value → changes everywhere.\n\n**Naming convention**: `--dl-{category}-{variant}` (dl = deliberus)\n\n#### Surfaces (dark → light stacking order)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--dl-bg` | `#0d1117` | Page background — the darkest layer |\n| `--dl-card` | `#1d2535` | Card/block solid background |\n| `--dl-card-grad-dark` | `#10162a` | Gradient card dark end (deep indigo) |\n| `--dl-card-grad-light` | `#161d32` | Gradient card light end (purple tint) |\n| `--dl-card-nested` | `#0d1117` | Card inside card (same as bg — creates depth) |\n| `--dl-border` | `#1e2736` | Default border — sits between card and hover brightness |\n| `--dl-hover` | `#252f3e` | Hover state — barely brighter than border |\n\n#### Text (bright → ghost)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--dl-text-bright` | `#e2e8f0` | Headings, emphasized text |\n| `--dl-text` | `#d1d5db` | Primary body text |\n| `--dl-text-muted` | `#9ca3af` | Secondary text |\n| `--dl-text-dim` | `#6b7280` | Tertiary, hints |\n| `--dl-text-faint` | `#5c6a7e` | Subtitles, section hints |\n| `--dl-text-ghost` | `#4a5568` | Placeholders, least visible |\n\n#### Accents\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--dl-indigo` | `#6366f1` | Primary accent |\n| `--dl-indigo-light` | `#818cf8` | Links, active states |\n| `--dl-indigo-pale` | `#a5b4fc` | Hover text, highlights |\n| `--dl-purple` | `#a78bfa` | Secondary accent, logo dot |\n| `--dl-purple-deep` | `#8b5cf6` | Gradient middle |\n| `--dl-pink` | `#ec4899` | Tertiary accent, decompose theme |\n| `--dl-pink-light` | `#f472b6` | Beacon, sorry marker |\n\n#### Semantic\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--dl-success` | `#34d399` | Supports, agree, valid, QBAF green |\n| `--dl-danger` | `#f87171` | Attacks, disagree, challenged |\n| `--dl-warning` | `#fbbf24` | Qualifies, needs evidence, amber |\n| `--dl-info` | `#60a5fa` | Empirical, decomposes, blue |\n\n#### Claim Types\n\n| Token | Value | Type |\n|-------|-------|------|\n| `--dl-type-empirical` | `#3b82f6` | Blue |\n| `--dl-type-normative` | `#f59e0b` | Amber |\n| `--dl-type-definitional` | `#8b5cf6` | Purple |\n| `--dl-type-value` | `#ec4899` | Pink |\n\n#### Radii\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--dl-radius-sm` | `8px` | Small badges, inputs |\n| `--dl-radius` | `14px` | Buttons, standard cards |\n| `--dl-radius-lg` | `16px` | Large cards, obsidian surfaces |\n| `--dl-radius-xl` | `20px` | Hero elements |\n| `--dl-radius-pill` | `20px` | Pill buttons, mode toggles |\n\n---\n\n## Composable Element Classes\n\nNamed by **vibe**, not by use. Mix and match: `class=\"obsidian breathe shimmer\"`.\n\n### `.obsidian` — Polished dark surface\nThe base card. Dark bg, subtle border, rounded corners. Everything sits on obsidian.\n```css\nbackground: var(--dl-card);\nborder: 1px solid var(--dl-border);\nborder-radius: var(--dl-radius-lg);\n```\n\n### `.breathe` — Alive on hover\nAdds hover transition: background brightens, purple glow appears. No raise/lift.\n```css\n.breathe:hover {\n background: var(--dl-hover);\n box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);\n}\n```\n\n### `.aurora` — Gradient shimmer button\nThe primary action button. Indigo → purple → pink gradient. Purple glow on hover.\n```css\nbackground: linear-gradient(135deg, var(--dl-indigo), var(--dl-purple-deep), var(--dl-pink));\n/* Hover: box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25) */\n```\n\n### `.ember` — Warm glow cards (foundation cards, invitation cards)\nGradient background with colored border. Three temperature variants:\n- `.ember--warm` — pink border (decompose, value premise)\n- `.ember--golden` — amber border (evidence, strategic)\n- `.ember--cool` — indigo border (conceptual, analytical)\n\n### `.crystal` — Small hard badge\nTiny uppercase label. Used for claim types, status indicators.\n\n### `.shimmer` — Gradient border on hover\nInvisible border that lights up on hover with indigo → purple → pink gradient.\n\n### `.stance` — Vote buttons\nTwo variants:\n- `.stance--agree` — green accent on hover, green glow\n- `.stance--oppose` — red accent on hover, red glow\n\n### `.facet` — Mode pills (feed modes)\nPill-shaped toggle buttons. `.active` state gets indigo border + indigo bg tint.\n\n### `.pulse` — Progress bar\n4px bar with gradient fill. Used during extraction.\n\n### `.trail` — Breadcrumb navigation\nWith `.trail-sep` for separators. Uses `BackLogo` component for the Deliberus home link.\n\n### `.beacon` — Sorry markers\nPink border + bg tint. Signals \"help needed here.\" `cursor: help`.\n\n### `.undercurrent` — Subtle claim links\nNo decoration by default; indigo underline on hover with `text-underline-offset: 3px`.\n\n### `.murmur` — Quiet contextual text\nItalic, dim, small. For attribution, reasoning, secondary context.\n\n### `.monolith` — Large commanding text\n1.8rem, bold, bright. For claim text on claim detail pages.\n\n---\n\n## Hover & Interaction Effects\n\n### The glow system\nEvery interactive element gets a **same-colored outer glow** on hover (100ms transition):\n\n| Element | Glow color | Intensity |\n|---------|-----------|-----------|\n| Aurora buttons | `rgba(99, 102, 241, 0.25)` | 8px blur, 24px spread |\n| Cards (obsidian, ember, breathe) | `rgba(99, 102, 241, 0.15)` | 4px blur, 20px spread |\n| Banners (feed, full picture) | `rgba(99, 102, 241, 0.15)` | 4px blur, 20px spread |\n| Concept keywords | `text-shadow: 0 0 12px rgba(99, 102, 241, 0.4)` | Text glow |\n| Agree button | `rgba(16, 185, 129, 0.2)` | Green glow |\n| Disagree button | `rgba(239, 68, 68, 0.15)` | Red glow |\n| Decompose CTA | `rgba(236, 72, 153, 0.2)` | Pink glow |\n| Evidence CTA | `rgba(245, 158, 11, 0.2)` | Amber glow |\n| CQ answer buttons | `rgba(139, 92, 246, 0.2)` | Purple glow |\n\n### Rules\n- **Never raise/lift** buttons on hover (`translateY` is banned)\n- **All glows fade** in/out via `transition: box-shadow 0.1s`\n- **Buttons on bright backgrounds** (inside cards) get dark glow instead: `rgba(0, 0, 0, 0.4)`\n- **Active/pulsing** state available via `.glow-active` (2s ease-in-out infinite)\n\n---\n\n## Logo\n\n### Main logo (landing page)\n`deliberus` in gradient text (indigo → purple → indigo) + three dots in therefore (∴) pattern.\n- Font: 2.5rem, weight 800, `letter-spacing: -0.02em`\n- Dots: 9px, positioned in 20×22px container\n- Colors: dot1 = `--dl-indigo-light`, dot2 = `--dl-purple`, dot3 = `#c084fc`\n\n### Back logo (sub-pages)\nShared `BackLogo.svelte` component. Same gradient text + dots at smaller scale (1.1rem, 5px dots in 11×12px container). Optional `showArrow` prop (default true, false for breadcrumb use).\n- Arrow: `←` at 1.1rem, `position: relative; top: 1px`\n- Alignment: `align-items: baseline`\n- No underline ever (even on hover)\n\n### Tagline\n\"Weaving our minds together.\" in `--dl-text-faint`, 0.95rem, weight 400.\n\n---\n\n## Layout Patterns\n\n### Landing page (top → bottom)\n1. Header: logo + tagline (centered)\n2. \"Help me think about...\" input section\n3. \"The Full Picture\" banner → /about\n4. Concept keywords: `Attunement · Lenses · Bridging · Depth · Convergence · Vision` (lavender, 1.25rem, linked)\n5. Four about paragraphs (0.95rem, `--dl-text-muted`, line-height 1.7)\n6. \"Browse the Feed\" banner\n7. Previous extractions grid (2-column auto-fill, 280px min)\n\n### Sub-pages\n1. `BackLogo` (← deliberus ∴)\n2. Content\n3. Footer: \"Built by Fredrik Bränström\" (centered, ghost color, linked)\n\n### Foundation cards (about page)\n2×2 grid. Each card: `.ember .breathe` with icon, italic title, description. Four color variants.\n\n### Extraction cards\nBlue-tinted bg (`rgba(30, 36, 54, 0.6)`), faint indigo border (`0.1`). Source type icon (PDF/link/voice/text) in top-right corner at ghost opacity.\n\n### Banners (Full Picture, Browse Feed)\nHorizontal: icon + title/desc + arrow. Gradient bg (indigo → purple, very low opacity). Purple glow on hover.\n\n---\n\n## Typography\n\n| Element | Size | Weight | Color | Tracking |\n|---------|------|--------|-------|----------|\n| Landing h1 | 2.5rem | 800 | Gradient | -0.02em |\n| Landing h2 | 1.8rem | 700 | `--dl-text-bright` | -0.01em |\n| Doc h1 | 2rem | 700 | `--dl-text-bright` | -0.02em |\n| Doc h2 | 1.4rem | 700 | `--dl-text-bright` | -0.01em |\n| Doc h3 | 1.15rem | 600 | `#c7d2fe` | — |\n| Body text | 0.95rem | 400 | `--dl-text` | — |\n| About blocks | 0.95rem | 400 | `--dl-text-muted` | — |\n| Badges/pills | 0.65-0.75rem | 600-700 | varies | 0.04-0.08em |\n| Footer | 0.8rem | 500 | `--dl-text-ghost` | — |\n\nDoc h1 gets `text-wrap: balance` to prevent orphaned single words.\n\n---\n\n## Component Reference\n\n### Shared Components (`web/src/lib/components/`)\n\n| Component | Use |\n|-----------|-----|\n| `BackLogo.svelte` | Logo back-navigation. Props: `showArrow` (default true) |\n| `Footer.svelte` | \"Built by Fredrik Bränström\" — in layout, every page |\n| `AuthButton.svelte` | Google sign-in / user avatar + sign-out |\n| `VoiceInput.svelte` | Microphone button for voice transcription |\n| `ClaimGraph.svelte` | D3 force-directed ego-graph on claim pages |\n| `SorryMarker.svelte` | Decompose/evidence/CQ invitation cards |\n\n### Sign-out button\nFaint desaturated lavender (`rgba(148, 130, 180, 0.5)`), no border, no background, left margin from username.\n\n### Quality tooltip\nClick the green quality badge on extraction pages → slide/fade tooltip explaining current AI-based scoring and upcoming QEM community-driven scoring. Backdrop dismisses.\n\n---\n\n## Key Principles\n\n1. **Dark, not black.** The background is `#0d1117` — a deep blue-gray, not pure black. Every surface has a hint of blue-indigo warmth.\n\n2. **Glow, not lift.** Hover effects use colored box-shadows, never `translateY`. Elements feel lit, not floating.\n\n3. **Structure emerges, never demanded.** The UI mirrors the project's philosophy — complexity is available but never forced. Progressive disclosure through expand/collapse, not through separate screens.\n\n4. **Color carries meaning.** Claim types, relationship types, vote states — each has a dedicated color that's consistent throughout. Green = supports/agree. Red = attacks/disagree. Amber = qualifies/evidence. Purple = reframes/decompose. Blue = empirical/decomposes.\n\n5. **The graph is a map, not the product.** The D3 graph on claim pages is supplementary — the primary experience is card-based text. The graph is for orientation.\n\n6. **Every claim is a link.** Any claim text displayed anywhere must be clickable, linking to `/claim/{id}`. Indigo underline on hover, `text-underline-offset: 3px`.\n\n---\n\n---\n\n## File Reference\n\n### Source of truth\n- `web/src/app.css` — design tokens + composable classes + global styles\n- Page-specific styles scoped in each `.svelte` file's `