--- version: alpha name: Hume description: Emotionally intelligent voice AI dressed in warm cream and pastel iridescence — Fellix at weight 520 for confident headings, PP Fraktion Mono uppercase labels for a scientific edge, and a signature spectrum gradient bridging lavender through blush to amber. colors: # Primary surfaces background: "#fff9f3" # warm cream — the dominant canvas surface: "#ffffff" # white card surface surface-warm: "#fff4e8" # deepened warm cream, per manifest theme-color surface-dark: "#222222" # footer / dark section canvas # Text / ink ink: "#222222" # near-black primary text ink-warm: "#fff9f3" # warm cream text on dark backgrounds on-primary: "#000000" # text on the amber primary on-surface: "#222222" # Brand accent — amber / warm orange primary: "#ffb760" # amber — semantic primary per dembrandt primary-hover: "#d99c52" # darkened amber for hover # Spectrum palette (gradient stops + emotion accents) accent-lavender: "#c094e4" # soft purple — gradient start accent-blush: "#f7bbe6" # pink blush — gradient mid accent-sky: "#7fb8ef" # periwinkle blue — emotion accent accent-mint: "#85e4c5" # cool mint green — emotion accent accent-coral: "#f89d6b" # warm coral — gradient/emotion accent # Section gradient (warm pastel wash behind hero/CTA) gradient-lavender: "#f0e0f0" # approx rgb(240,224,240) — gradient section start gradient-peach: "#fde8e0" # approx rgb(253,232,224) gradient-cream: "#fff0d8" # approx rgb(255,240,216) gradient-mauve: "#edd8f0" # approx rgb(237,216,240) # Borders border: "#e8e0d8" # warm-tinted subtle border, opaque approx of oklab(.../ 0.1) over cream border-subtle: "#f0ebe4" # ultra-light border for section dividers # Shadow shadow-soft: "#e8ddd4" # opaque approx of oklab(0.25 .../0.05) inset shadow over cream canvas # Focus focus-ring: "#c094e4" # lavender accent for focus states typography: display-hero: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 48px fontWeight: 520 lineHeight: 1.00 letterSpacing: -1.2px heading-section: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 36px fontWeight: 520 lineHeight: 1.11 letterSpacing: -0.9px heading-sub: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 30px fontWeight: 520 lineHeight: 1.20 letterSpacing: -0.75px heading-card: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 24px fontWeight: 520 lineHeight: 1.33 letterSpacing: -0.6px heading-small: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 20px fontWeight: 520 lineHeight: 1.25 letterSpacing: -0.5px body-large: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 18px fontWeight: 520 lineHeight: 1.56 letterSpacing: -0.45px body: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px body-medium: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 16px fontWeight: 520 lineHeight: 1.50 letterSpacing: -0.4px nav-link: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px label-mono: fontFamily: "PP Fraktion Mono, PPFraktionMono-Variable, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0.35px fontFeature: "\"calt\" 0, \"liga\" 0" caption: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px micro-mono: fontFamily: "PP Fraktion Mono, PPFraktionMono-Variable, ui-monospace, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.3px fontFeature: "\"calt\" 0, \"liga\" 0" micro: fontFamily: "Fellix, FellixVF, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.63 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 40px 5xl: 48px 6xl: 64px 7xl: 96px 8xl: 112px rounded: none: 0px sm: 8px md: 12px lg: 16px xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink-warm}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.ink-warm}" button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 20px border: 1px solid {colors.border} button-ghost-hover: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink}" button-cta: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink-warm}" typography: "{typography.label-mono}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" padding: 24px border: 1px solid {colors.border} card-lg: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: 32px border: 1px solid {colors.border} input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 48px 12px 20px input-focus: backgroundColor: "{colors.surface}" border: 1px solid {colors.accent-lavender} nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 16px 24px nav-link: textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 8px 16px nav-link-hover: textColor: "{colors.surface-dark}" badge-mono: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.micro-mono}" rounded: "{rounded.pill}" padding: 4px 10px border: 1px solid {colors.border} model-icon: backgroundColor: "{colors.accent-lavender}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" padding: 8px spectrum-gradient: background: "linear-gradient(to right, {colors.accent-lavender}, {colors.accent-blush}, {colors.primary})" --- # Hume Design System ## Overview Hume's visual identity is built on a premise that scientific precision and emotional warmth are not opposites — they are the same thing. The canvas is a cream so soft it borders on blush (`{colors.background}`), sourced directly from the PWA manifest theme-color, giving even a fresh browser tab a skin-warm quality before any content loads. Against this, near-black ink (`{colors.ink}`) reads with clean authority, and white card surfaces (`{colors.surface}`) feel slightly cooler and sharper by contrast — a subtle spatial layering with no shadows required. The typographic system pairs two self-hosted fonts to articulate this duality. Fellix, a variable humanist sans-serif loaded as `FellixVF.fe9bc08b.woff2`, carries all display and body text at weight 520 — heavier than regular but lighter than semibold, creating a tone that is confident without shouting. Its negative tracking at display sizes (-1.2px at 48px) gives headings a composed, editorial grip. Stepping in wherever classification, labels, or section-category tags are needed, PP Fraktion Mono enters as an uppercase monospaced voice at 12–14px. With letter-spacing of 0.3–0.35px and ligatures disabled (`"calt" 0, "liga" 0`), it reads like a scientific annotation — precise, detached, calibrated. The tension between Fellix's humanist curves and Fraktion Mono's clinical uppercase is where Hume's design character lives. The signature visual element is the spectrum gradient: lavender (`{colors.accent-lavender}`) through pink blush (`{colors.accent-blush}`) to amber (`{colors.primary}`), laid as a linear sweep. It appears as a section wash behind the CTAs and as a one-line decorative stripe in the header wordmark — the full emotional spectrum of the human voice compressed into a horizontal band of pastel light. Buttons are decisively dark: near-black pill shapes (`{colors.surface-dark}`) dropped onto the warm cream canvas, with PP Fraktion Mono uppercase labels telegraphing function with the same scientific register as the mono labels throughout. **Key Characteristics:** - Warm cream canvas (`{colors.background}`, `{colors.surface-warm}`) from PWA manifest — warmth before a pixel loads - Fellix weight 520 at tight negative tracking — confident editorial, not bold - PP Fraktion Mono uppercase with disabled ligatures — scientific annotation register - Spectrum gradient: `{colors.accent-lavender}` → `{colors.accent-blush}` → `{colors.primary}` — the emotional color signature - Near-black pill buttons (`{colors.surface-dark}`) as sharp counterpoint to soft surfaces - Pastel emotion accents (`{colors.accent-sky}`, `{colors.accent-mint}`, `{colors.accent-coral}`) used sparingly in model/product avatars - Pill-only border-radius for all interactive elements — no square corners in the interaction layer - 8px base spacing grid with a generous upper range (96px–112px for section gutters) - Dark footer (`{colors.surface-dark}`) creates hard closure — cream and dark as two poles - Motion is brisk: 150ms default, `cubic-bezier(0.4, 0, 0.2, 1)` throughout ## Colors ### Primary Surfaces - **Warm Cream** (`{colors.background}`): The site canvas. Present in every section — warm, skin-close, never neutral white. - **White** (`{colors.surface}`): Card and panel surfaces. Slightly cooler than the canvas, creating implicit card depth without shadow. - **Deep Cream** (`{colors.surface-warm}`): PWA theme color — used in section washes and button label tints. - **Near-Black** (`{colors.surface-dark}`): Footer and dark-mode section canvas. Also the primary button background. ### Text - **Near-Black Ink** (`{colors.ink}`): All primary text. Count of 531 in raw extraction — the dominant element. - **Warm Cream Text** (`{colors.ink-warm}`): Text on dark backgrounds; button labels on dark buttons. ### Brand Accent - **Amber** (`{colors.primary}`): The warm terminal stop in the spectrum gradient. Semantic primary in dembrandt extraction. Used as gradient endpoint and feature highlight. - **Amber Hover** (`{colors.primary-hover}`): Darkened amber for hover states. ### Spectrum Palette - **Lavender** (`{colors.accent-lavender}`): Gradient origin, model icon tints — the emotional cool end. - **Blush** (`{colors.accent-blush}`): Gradient midpoint. Pink softness between lavender and amber. - **Sky Blue** (`{colors.accent-sky}`): Product accent, feature highlights — periwinkle cool. - **Mint** (`{colors.accent-mint}`): Open-source / research accent — fresh scientific green. - **Coral** (`{colors.accent-coral}`): Warm emotional accent, gradient variant. ### Section Gradient Wash `{colors.gradient-lavender}` → `{colors.gradient-peach}` → `{colors.gradient-cream}` → `{colors.gradient-mauve}` form a 135° pastel wash used as full-section backgrounds behind CTAs. ### Structure - **Border** (`{colors.border}`): Warm-tinted card borders — opaque approximation of a 10% opacity white over the cream canvas. - **Shadow Soft** (`{colors.shadow-soft}`): Opaque approximation of the 5% inset ring shadow used on interactive elements. - **Focus Ring** (`{colors.focus-ring}`): Lavender focus indicator, consistent with the spectrum accent. ## Typography ### Font Families - **Primary**: `Fellix` (variable font `FellixVF.fe9bc08b.woff2`), fallback: `system-ui, sans-serif` - **Monospace**: `PP Fraktion Mono` (variable font `PPFraktionMono-Variable.2878c400.ttf`), fallback: `ui-monospace, monospace` Both fonts are self-hosted. No Google Fonts, no Adobe Fonts — full typographic control. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Page headlines — 48px Fellix 520, -1.2px tracking, line-height 1.00 | | `heading-section` | Section titles — 36px Fellix 520 | | `heading-sub` | Sub-sections and product titles — 30px Fellix 520 | | `heading-card` | Card headings — 24px Fellix 520 | | `heading-small` | Feature labels, small headings — 20px Fellix 520 | | `body-large` | Intro paragraphs — 18px Fellix 520, -0.45px tracking | | `body` | Running text — 16px Fellix 400, neutral tracking | | `body-medium` | Emphasized body / list items — 16px Fellix 520, -0.4px tracking | | `nav-link` | Navigation items — 16px Fellix 400 | | `button-ui` | Standard button labels — 14px Fellix 400 | | `label-mono` | Mono uppercase labels (section categories, status tags) — 14px PP Fraktion Mono | | `caption` | Metadata, card footnotes — 14px Fellix 400 | | `micro-mono` | Smallest mono labels, eyebrow caps — 12px PP Fraktion Mono, 0.3px tracking | | `micro` | Fine print, helper text — 12px Fellix 400 | ### OpenType Features PP Fraktion Mono disables contextual alternates and standard ligatures (`"calt" 0, "liga" 0`) globally. This forces a strict, mechanical letterform — every character reads in isolation, like a lab readout. ### Principles - **Weight 520 as the headline voice**: Fellix's variable axis allows weight 520 — heavier than regular (400) but not a traditional semibold (600). This is a deliberate tonal choice: present without assertive. - **Negative tracking scales with size**: Display text at -1.2px, headings at -0.9px through -0.4px. Body text returns to 0. The scale mirrors how optical spacing tightens at larger sizes. - **Mono as annotation, not decoration**: PP Fraktion Mono is never used for body text or headings — only for labels, categories, and status indicators. Its uppercase-only deployment creates a clear register separation. - **No bold weight**: Weight 520 is the heaviest display weight used. The system resists conventional bold. ## Layout ### Spacing System Base unit is **8px**. The scale in YAML runs from `xs` (4px) through `8xl` (112px). The 96–112px range is actively used for section top padding, creating the generous vertical breathing room that characterizes premium AI product sites. ### Grid & Container - Centered content, single max-width column for hero and prose sections - Three-column card grid for model/product comparisons - Full-width gradient wash sections as visual chapter breaks - Dark footer with reversed wordmark and link clusters ### Whitespace Philosophy - **Generous vertical rhythm**: The 96–112px section padding makes each section feel like its own exhibit rather than a flowing scroll. - **Card definition via border, not shadow**: Cards are bordered (`{colors.border}`) rather than elevated — the soft cream canvas reads as the base plane, cards read as content containers rather than floating panels. - **Warm emptiness**: The cream background turns empty space into a presence. Whitespace isn't neutral — it carries the warmth of the brand. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page background, prose text blocks | | Card (Level 1) | 1px border `{colors.border}` | Standard cards and content containers | | Inset Ring (Level 1.5) | 1px inset shadow (opaque approx: `{colors.shadow-soft}`) | Input fields, interactive pill elements | | Section Wash (Level 2) | Full-width gradient or dark background | CTA sections, footer — color-based depth | | Focus | Lavender ring via `{colors.focus-ring}` | Keyboard focus on interactive elements | **Shadow Philosophy**: Hume's elevation system is almost entirely flat. Depth is created through color-field switching (cream → white for cards, cream → dark for footers, cream → pastel gradient for CTAs) rather than drop shadows. The only shadow-like treatment is the subtle inset ring on inputs — a near-invisible 1px inset that defines the form boundary without introducing weight. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved — virtually unused | | `sm` | 8px | Small internal elements, model icon avatars | | `md` | 12px | Standard cards | | `lg` | 16px | Large cards and panels | | `xl` | 24px | Featured sections, large modal containers | | `pill` | 9999px | All buttons, inputs, nav items, badge chips | The system is decisively split: structural containers use 8–24px radius, all interactive elements use the pill. There is no mid-range interactive radius — pressing a button always feels round, never geometric. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly. ### Buttons - **`button-primary`** — Near-black pill (`{colors.surface-dark}`) with warm cream text. The primary action in every context. Fellix 14px body weight for labels. - **`button-cta`** — Same dark pill but uses `{typography.label-mono}` (PP Fraktion Mono uppercase) for scientific-register CTA labels like "CONTACT RESEARCH". - **`button-ghost`** — White pill with warm border. Secondary actions and "learn more" patterns on light sections. ### Cards - **`card`** — White surface, 12px radius, 1px warm border. Standard model/product comparison cards. - **`card-lg`** — 16px radius, 32px padding. Featured or hero-adjacent content panels. ### Inputs - **`input`** — Pill-radius input with asymmetric padding (12px 48px 12px 20px) to accommodate an inline submit icon. Appears in email newsletter sections on dark gradient wash backgrounds. ### Model Icons - **`model-icon`** — Small 8px-radius squares with pastel accent backgrounds (lavender, sky, amber per model). A single letter initial in a bold sans. These are the only place emoji-adjacent color identity appears in the system. ### Navigation - **`nav-bar`** — Warm cream sticky header. Fellix 16px 400-weight links. Split layout: logo left, nav center, auth + CTA right. The CTA button is the spectrum gradient's dark-pill form. - **`nav-link`** — Transparent hover with ink-to-dark-ink color shift at 300ms. ### Badges / Labels - **`badge-mono`** — PP Fraktion Mono uppercase at 12px, pill-rounded, bordered. Used for "OPEN SOURCE" / "CLOSED SOURCE" status tags on model cards. ### Spectrum Gradient - **`spectrum-gradient`** — The branded sweep from lavender to blush to amber. Applied as a background stripe in hero wordmarks and as full-section wash panels. ## Do's and Don'ts ### Do - Use Fellix weight 520 for all headings — not 400 (too weak) and not 600 (too heavy) - Apply PP Fraktion Mono uppercase with `"calt" 0, "liga" 0` for all category labels, section eyebrows, and status tags - Keep the canvas warm: `{colors.background}` as the default page background — never neutral white - Use dark near-black pills (`{colors.surface-dark}`) for primary actions — the contrast against cream is the CTA signature - Apply the spectrum gradient (`{colors.accent-lavender}` → `{colors.accent-blush}` → `{colors.primary}`) for section washes and decorative identity moments - Define cards with `{colors.border}` (1px border) rather than drop shadows — this is a flat, bordered system - Use model icon tints from the accent palette (`{colors.accent-lavender}`, `{colors.accent-sky}`, `{colors.primary}`) to give products distinct color identity - Respect the generous section spacing (96–112px) — compression cheapens the premium feel ### Don't - Don't use Fellix weight 400 for display headings — the brand voice requires weight 520 - Don't introduce drop shadows heavier than the subtle inset ring — the system is deliberately flat - Don't use the accent spectrum colors as body text or button colors — they are decorative / icon tints only - Don't use a non-pill border-radius on buttons or inputs — the interaction layer is exclusively `{rounded.pill}` - Don't substitute Inter or another neutral sans for Fellix — the humanist warmth of Fellix is structural to the brand - Don't use PP Fraktion Mono for body paragraphs or headings — mono is annotation-only - Don't apply the spectrum gradient to text — it reads as decorative background, not typographic emphasis - Don't introduce cool-toned backgrounds — every surface should read warm (cream, blush, amber-adjacent) --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Single column, hamburger menu, stacked model cards, reduced hero size | | Tablet | 768–1024px | Two-column card grid, condensed nav | | Desktop | 1024–1440px | Full three-column grid, horizontal nav, full hero | | Large Desktop | >1440px | Max-width container centered with increased section padding | ### Touch Targets - Pill buttons with 12px vertical padding meet 44px minimum touch height at standard font sizes - Navigation items have generous horizontal padding (16px each side) - Model card "Learn More" links use `{typography.micro-mono}` but are always accompanied by an icon for increased tap area ### Collapsing Strategy - Navigation: horizontal → hamburger drawer at ~768px; CTA button remains visible - Model cards: 3-column → 1-column stacked layout - Hero: headline font scales down proportionally; gradient wash sections maintain full-width - Spacing compresses: 8xl (112px) section gutters reduce toward 5xl (48px) on mobile ### Image Behavior - Logo wordmark scales with viewport; reversed version (`{colors.ink-warm}` on `{colors.surface-dark}`) appears only in footer - Gradient section backgrounds are CSS-only — no image assets to load - Model icon avatars (lettermark squares) maintain fixed size regardless of viewport --- ## Agent Prompt Guide ### Quick Color Reference - Background: Warm Cream (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Surface / Card: White (`{colors.surface}`) - Dark Canvas / Button: Near-Black (`{colors.surface-dark}`) - Brand Accent: Amber (`{colors.primary}`) - Section Gradient: Lavender → Blush → Amber (`{colors.accent-lavender}` → `{colors.accent-blush}` → `{colors.primary}`) - Border: `{colors.border}` - Focus: `{colors.focus-ring}` ### Example Component Prompts - "Build a Hume-style hero on warm cream background (`{colors.background}`). Headline at 48px Fellix weight 520, line-height 1.00, letter-spacing -1.2px, `{colors.ink}` text. Sub-eyebrow in PP Fraktion Mono uppercase 12px weight 400, 0.3px spacing, `{colors.ink}` at 80% opacity. Body intro at 16px Fellix 400. Primary CTA: dark pill button (`{colors.surface-dark}`, `{rounded.pill}`, 12px 24px padding, `{colors.ink-warm}` text, Fellix 14px 400). Secondary CTA: white ghost pill with `{colors.border}` border." - "Create a Hume model card: white surface (`{colors.surface}`), `{rounded.md}` radius, 24px padding, `{colors.border}` 1px border. Top-left: 40px square model icon with `{rounded.sm}` radius and pastel background (`{colors.accent-lavender}` or `{colors.accent-sky}` or `{colors.primary}`), single uppercase letter in Fellix 520. Status tag in PP Fraktion Mono uppercase 12px, bordered pill. Title in Fellix 520 24px. Body in Fellix 400 16px `{colors.ink}`. Footer: 'LEARN MORE' in PP Fraktion Mono uppercase 12px with icon link." - "Design a Hume CTA section: full-width gradient wash background (135deg, `{colors.gradient-lavender}` → `{colors.gradient-peach}` → `{colors.gradient-cream}` → `{colors.gradient-mauve}`). Headline 36px Fellix 520 centered. Body 16px Fellix 400. Dark pill button: `{colors.surface-dark}` background, `{colors.ink-warm}` text, PP Fraktion Mono uppercase label 14px, `{rounded.pill}`, 12px 24px padding." - "Build a Hume-style navigation bar: warm cream sticky header (`{colors.background}`), 16px 24px padding. Left: SVG wordmark with spectrum gradient stripe. Center: Fellix 16px 400 links with 0.3s color transition to `{colors.surface-dark}` on hover. Right: 'LOG IN' ghost link + 'CONTACT RESEARCH' dark pill CTA in PP Fraktion Mono uppercase." - "Create a Hume badge/status tag: PP Fraktion Mono uppercase, 12px, 0.3px letter-spacing, `{rounded.pill}`, 4px 10px padding, `{colors.surface}` background, `{colors.border}` 1px border, `{colors.ink}` text. Variants: 'OPEN SOURCE' and 'CLOSED SOURCE'." - "Design a Hume email input for a newsletter section placed on a dark gradient wash background: pill radius (`{rounded.pill}`), asymmetric padding 12px 48px 12px 20px to accommodate an inline submit icon button. Input background and text `{colors.surface}` / `{colors.ink}`. On focus: `{colors.focus-ring}` 2px outline ring." ### Iteration Guide 1. Start with warm cream — `{colors.background}` sets the emotional temperature before any content. Never use pure white as the page canvas. 2. Fellix 520 is the weight — not 400, not 600. Check the variable font axis if using the font directly. 3. PP Fraktion Mono uppercase is annotation, not decoration — deploy only for eyebrows, status badges, and CTA labels. 4. Dark pills are primary actions — `{colors.surface-dark}` background against cream creates the highest-contrast CTA in the system. Reserve for one action per section. 5. The spectrum gradient is the brand's emotional fingerprint — use it as a section wash or decorative stripe, never as a text fill. 6. Cards are defined by border, not shadow — `{colors.border}` 1px, no elevation. 7. All interactive elements use `{rounded.pill}` — buttons, inputs, badges. Structural containers use `{rounded.sm}` through `{rounded.xl}`. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Hume. Brand names and trademarks belong to their respective owners.