--- version: alpha name: Therabody description: Clinical-athletic precision system built on a warm cream canvas with near-black charcoal text — ABC Arizona Text Variable's variable serif carries editorial authority while Suisse Intl handles functional UI, creating a premium wellness brand that feels both medical-grade and inviting. colors: # Primary canvas — warm cream foundation background: "#f7f3e9" # warm cream canvas (rgb 247,243,233 — dominant surface) background-warm: "#f0e9db" # deeper warm cream for input tinting /* was rgba(240,233,219,0.3) — Google format requires hex */ surface: "#ffffff" # pure white cards and product tiles surface-dark: "#252525" # near-black — primary CTA buttons, dark hero sections surface-charcoal: "#121212" # deep charcoal — dark variant CTAs (rgb 18,18,18) # Ink / text ink: "#252525" # near-black primary text (rgb 37,37,37 — dominant at 1761 instances) ink-secondary: "#353534" # slightly softer near-black (rgb 53,53,52) ink-muted: "#666666" # mid gray — captions, muted links, secondary metadata on-dark: "#ffffff" # white text on dark button and hero surfaces on-cream: "#252525" # charcoal text on cream surfaces # Brand accent — link blue (interactive states only) primary: "#1883fd" # interactive blue — link hover, focus ring hint (rgb 24,131,253) on-primary: "#ffffff" # white text on blue interactive states primary-focus: "#0038ff" # deep blue — focus ring (rgba 0,56,255 opaque hex) # Semantic error: "#b03730" # error back color (CSS var --error-back-color) success: "#737d00" # form success (CSS var --form-success-color) accent-indigo: "#4b4b97" # miles/loyalty accent (CSS var --miles-text-color) # Borders border: "#252525" # charcoal border — full (rgb 37,37,37 solid) border-soft: "#353534" # softened charcoal divider /* was rgba(37,37,37,0.2) — Google format requires hex */ # Shadow tints shadow-soft: "#121212" # deep charcoal diffused shadow /* was rgba(18,18,18,0.05) — Google format requires hex */ shadow-blue: "#0038ff" # blue focus glow /* was rgba(0,56,255,0.22) — Google format requires hex */ typography: display-hero: fontFamily: "ABC Arizona Text Variable, Georgia, serif" fontSize: 56px fontWeight: 440 lineHeight: 1.05 letterSpacing: -1.68px display: fontFamily: "ABC Arizona Text Variable, Georgia, serif" fontSize: 48px fontWeight: 440 lineHeight: 1.10 letterSpacing: -1.44px heading-section: fontFamily: "ABC Arizona Text Variable, Georgia, serif" fontSize: 40px fontWeight: 440 lineHeight: 1.0 letterSpacing: -0.14px heading: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 440 lineHeight: 1.20 letterSpacing: -0.2px heading-sub: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.30 letterSpacing: 0px body-large: fontFamily: "ABC Arizona Text Variable, Georgia, serif" fontSize: 32px fontWeight: 400 lineHeight: 1.10 letterSpacing: -0.64px body-medium: fontFamily: "ABC Arizona Text Variable, Georgia, serif" fontSize: 24px fontWeight: 440 lineHeight: 1.20 letterSpacing: -0.48px body: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.3px nav-link: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0px button-ui: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0px label-small: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 1.20 letterSpacing: 0.13px caption: fontFamily: "Suisse Intl, Helvetica Neue, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.20 letterSpacing: 0.4px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 40px 3xl: 48px 4xl: 64px rounded: none: 0px xs: 4px sm: 8px md: 12px lg: 40px pill: 9999px components: # Primary CTA — near-black fill, white text button-primary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 18px 24px button-primary-hover: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" # Secondary — warm cream fill, charcoal text (category filters) button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.on-cream}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 13px 24px button-secondary-hover: backgroundColor: "{colors.background-warm}" textColor: "{colors.on-cream}" # Ghost — white fill, charcoal text (product cards) button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 18px 24px button-ghost-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" # Navigation bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 12px 24px # Product card card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 16px card-category: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 16px # Search / email input input: backgroundColor: "{colors.background-warm}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 15px 48px border: "0px none" input-focus: backgroundColor: "{colors.background-warm}" textColor: "{colors.on-dark}" border: "1px solid {colors.border}" # Product tag badge badge: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label-small}" rounded: "{rounded.lg}" padding: 8px 12px badge-outline: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 4px 8px border: "1px solid {colors.border}" --- # Therabody Design System ## Overview Therabody occupies a distinctive register in the recovery-tech category: it has the premium authority of a medical device company but the warmth and approachability of a lifestyle brand. The design system holds both truths simultaneously. The dominant canvas is a rich warm cream (`{colors.background}`) — not white, not beige, but the particular tone of linen or natural paper that signals craft and confidence. Against this surface, near-black charcoal (`{colors.ink}`) text reads with exceptional clarity while avoiding the harshness of pure black on white. The overall palette is almost entirely achromatic, save for a single interactive blue (`{colors.primary}`) reserved for focus and hover states. The typographic system is the most sophisticated element of the Therabody identity. ABC Arizona Text Variable, a custom variable serif, handles all editorial headline and display moments — it has a warm, slightly organic quality that references traditional publishing rather than sterile medical imaging. Suisse Intl, a Swiss grotesque, takes over for all functional UI text: navigation, buttons, labels, captions. The two-font strategy creates a clear hierarchy between "what we say" (editorial serif) and "how you act" (neutral grotesque). The variable font axes allow the Arizona serif to flex between precisely weighted instances without switching typefaces. The product photography does most of the chromatic work. Theragun massagers come in black and gradient-metallic finishes; JetBoots and compression products appear in warm lifestyle settings. The UI steps back completely and lets the products speak, maintaining near-zero color complexity so every product renders against a clean warm field. **Key Characteristics:** - Warm cream canvas (`{colors.background}`) as the foundational surface — not clinical white, but linen warmth - Two-family type system: ABC Arizona Text Variable (serif, editorial) + Suisse Intl (grotesque, functional UI) - Variable font implementation — Arizona Text Variable with fractional weight values (440 = just above Regular) - Near-black primary text (`{colors.ink}`) at rgb(37,37,37) — warmer than pure black, lower contrast than harsh #000 - Interactive blue (`{colors.primary}`) isolated to hover and focus states only — never decorative UI chrome - Buttons use rounded corners (`{rounded.sm}` 8px) — neither sharp rectangle nor pill; restrained mid-radius - Dark CTA hierarchy: near-black (`{colors.surface-dark}`) fill as primary, white fill as ghost variant - 8px base grid with common values clustered at 8, 12, 16, 24px — dense but not airless - Shadow language is nearly flat — a 4px/5px subtle elevation at very low opacity for card hover - CSS variable system: `--error-back-color`, `--form-success-color`, `--miles-text-color` for semantic states - Shopify-based e-commerce structure with DaisyUI, Headless UI, PrimeReact component primitives - Focus ring uses a distinct blue glow (`{colors.shadow-blue}` ring) — high-visibility accessibility treatment ## Colors ### Primary - **Warm Cream** (`{colors.background}`): The defining canvas color. `#f7f3e9` is the first thing that differentiates Therabody from competitors who default to clinical white. It carries warmth without straying into beige or yellow. Every page section, product grid, and hero rests on this foundation. - **Near-Black** (`{colors.ink}`): Primary text at `#252525`. The slight lift from absolute black (`#000000`) produces more natural reading contrast on the warm cream canvas — the two were calibrated together. ### Brand Accent - **Interactive Blue** (`{colors.primary}`): `#1883fd` — appears on link hover states and as the anchor color for the focus ring glow. Noticeably brighter and more saturated than the rest of the palette, which is intentional: it functions as a pure wayfinding signal in an otherwise achromatic system. - **Deep Blue Focus** (`{colors.primary-focus}`): `#0038ff` — the focus ring's base color, applied as a 4px outer glow shadow. High-contrast and accessible on the cream canvas. ### Surface Tiers - **Pure White** (`{colors.surface}`): Product cards and tile backgrounds. The distinction between `{colors.background}` (cream) and `{colors.surface}` (white) creates a subtle depth when cards float over the cream canvas. - **Dark CTA Surface** (`{colors.surface-dark}`): `#252525` — the near-black fill for primary "Shop" buttons. It references the ink color, creating a family between text and action elements. - **Charcoal Variant** (`{colors.surface-charcoal}`): `#121212` — used in hero dark sections and as the hover-deepening for dark CTAs. ### Text & Semantic - **Muted Gray** (`{colors.ink-muted}`): `#666666` — secondary links, captions, metadata. At the midpoint of the lightness scale between cream and near-black. - **Error** (`{colors.error}`): `#b03730` — form validation, from CSS variable `--error-back-color`. A muted brick-red that doesn't jar against the warm system. - **Success** (`{colors.success}`): `#737d00` — form confirmation, from `--form-success-color`. An olive-green that reads as organic and calm. ### Borders & Shadows - **Border** (`{colors.border}`): Solid charcoal `#252525` for outline badge variants and clear dividers. - **Shadow Soft** (`{colors.shadow-soft}`): The opaque render of the site's primary shadow tint (`rgba(18,18,18,0.05)`) — used for the lightest card elevation, nearly imperceptible except at hover. ## Typography ### Font Family - **Primary Editorial**: `ABC Arizona Text Variable` (self-hosted WOFF2 — `ABCArizonaTextVariable.woff2`), with fallbacks: `Georgia, serif` - **Primary UI**: `Suisse Intl` (self-hosted WOFF2 — `SuisseIntl-Regular-WebS.woff2`, `SuisseIntl-Medium-WebM.woff2`), with fallbacks: `Helvetica Neue, Arial, sans-serif` - Both fonts are self-hosted; no Google Fonts or Adobe Fonts dependency - ABC Arizona Text Variable is a variable font — fractional weight values (440) are valid and intentional - No OpenType feature overrides detected beyond the variable axis usage ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values. | Token | Use | |---|---| | `display-hero` | Hero product headlines — 56px Arizona Variable, weight 440, tight tracking | | `display` | Section feature headlines — 48px Arizona Variable | | `heading-section` | Sub-section titles — 40px Arizona Variable, near-zero tracking | | `heading` | Component headings, nav categories — 20px Suisse Intl weight 440 | | `heading-sub` | Product names, callout labels — 16px Suisse Intl weight 700 | | `body-large` | Feature intro paragraphs — 32px Arizona Variable | | `body-medium` | Standard editorial body copy — 24px Arizona Variable | | `body` | UI descriptions, secondary text — 15px Suisse Intl weight 400 | | `nav-link` | Navigation items — 15px Suisse Intl weight 500 | | `button-ui` | All button labels — 15px Suisse Intl weight 500 | | `label-small` | Tags, overlines, UI chrome — 13px Suisse Intl weight 600, slight positive tracking | | `caption` | Fine print, legal text — 11px Suisse Intl, wide positive tracking | ### Principles - **Two-family editorial discipline**: Arizona Variable (serif) for what the brand says; Suisse Intl (grotesque) for how you interact with it. The boundary never blurs. - **Weight precision via variable font**: ABC Arizona Text Variable's weight 440 sits between Regular (400) and Medium (500) — a calibrated warmth without heaviness. - **Negative tracking at display scale**: -1.68px at 56px, -1.44px at 48px — the larger the headline, the tighter the spacing, pulling words into a compact editorial unit. - **Suisse Intl for all functional text**: Buttons, nav, labels, captions — the grotesque's neutrality defers to product photography and editorial type without competing. - **Caption uses wide positive tracking**: `{typography.caption}` at 0.4px letter-spacing — small utility text spreads out slightly for legibility at 11px. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. The most common values on the site are 8px, 12px, 16px, and 24px — all multiples of the base unit, creating a dense but mathematically consistent grid. The 8.75px value (recurring at high frequency) suggests Shopify liquid template half-unit math, but the primary grid is clean 8px. ### Grid & Container - Max content width: approximately 1440px (matching the site's widest breakpoint) - Product grids: 6-column on desktop for accessories, 4-column for primary products, 2-column on tablet - Hero sections: full-viewport-width with edge-to-edge photography - Navigation: full-width cream bar, Therabody wordmark left-aligned, category nav centered, utility icons right-aligned ### Whitespace Philosophy - **Product-forward density**: Spacing is enough to breathe around each product tile but deliberately compact — the grid reads as a curated display, not an open gallery. - **Cream carries the air**: Because the canvas is warm cream rather than white, even tight spacing feels uncluttered. The color temperature provides the openness that pixel whitespace would otherwise need to supply. - **Consistent vertical rhythm**: 24px and 32px gaps at card level; 48–64px at section level. No extreme vertical padding of the kind seen on Oura or Whoop. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, cream background | Default page canvas and cards | | Subtle (Level 1) | `rgba(18,18,18,0.05) 0px 4px 5px 0px` | Product card on hover — barely perceptible lift | | Focused (Level 2) | `rgba(0,56,255,0.22) 0px 0px 0px 4px` | Focus ring glow on interactive elements | | Overlay (Level 3) | `rgba(66,73,96,0.4) 0px 0px 15px 0px` | Drawer and modal overlays | | Dialog (Level 4+) | `rgba(0,0,0,0.2) 0px 26px 80px 0px` | Full-screen overlays, cart drawer | | Focus Ring | `0px 0px 0px 4px {colors.shadow-blue}` | Keyboard focus on buttons and inputs | **Shadow Philosophy**: Therabody's elevation language is extremely restrained — the site is nearly flat. The primary shadow at Level 1 is so subtle (`rgba(18,18,18,0.05)`) it functions as a micro-hover signal rather than a real depth layer. The standout shadow is the blue focus ring glow (`{colors.shadow-blue}`), which introduces the only real chromatic depth moment in the system. This inversion — flat for decoration, vivid only for accessibility — communicates that the brand values clarity over theatrical depth. ## Shapes The complete radius scale lives in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed image containers, section edges | | `xs` | 4px | Micro UI elements, chips | | `sm` | 8px | All buttons, inputs, product cards — the signature shape | | `md` | 12px | Modals, larger panels, dropdown containers | | `lg` | 40px | Filled badge tags ("NEW", category tags) — near-pill but with a slight corner | | `pill` | 9999px | Outline badge variants, circular icon buttons | The 8px corner radius on buttons and cards is Therabody's design signature: enough curve to feel contemporary and approachable, not so much that it reads as playful or consumer-cheap. The 40px large radius on filled badges creates a distinctive soft-rectangle badge shape — not a pill, but clearly rounded — that differentiates product tags visually. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Near-black (`{colors.surface-dark}`) fill, white text, 8px radius, 18px/24px padding, Suisse Intl 15px/500. The dominant CTA for all "Shop" actions. Reads as premium and decisive — the dark fill on a cream canvas is a confident inverse-field treatment. - **`button-secondary`** — Warm cream fill (`{colors.background}`), charcoal text, same radius and padding. Used for category filter chips ("Massage therapy," "Sleep"). The cream-on-cream effect makes them feel embedded in the canvas rather than placed on top of it. - **`button-ghost`** — White fill, charcoal text, 8px radius. Appears on product card hover overlays and in sections where the card background transitions from cream to white. ### Cards - **`card`** — Pure white (`{colors.surface}`), 8px radius, 16px padding. The standard container for all product tiles. The white background creates subtle definition against the cream canvas without requiring a border. - **`card-category`** — Cream background (`{colors.background}`), 8px radius, 16px padding. Editorial feature cards that integrate seamlessly with the page surface. ### Inputs - **`input`** — Warm cream tint background (`{colors.background-warm}`), charcoal text, 8px radius, no initial border. Used for search (with icon inset) and email capture fields. Focus state adds a `1px solid {colors.border}` outline and shifts to dark text for clarity. ### Badges - **`badge`** — Cream fill (`{colors.background}`), charcoal text, 40px radius, 8px/12px padding. Product "NEW" tags and feature labels. The large radius gives a distinctive soft-rectangle shape. - **`badge-outline`** — Transparent fill, charcoal text, pill radius, 1px solid charcoal border. Exclusive / membership tags that use outline treatment for hierarchy below the filled badge. ### Navigation **`nav-bar`** — Cream background (`{colors.background}`), charcoal nav-link text at 15px/500. Navigation categories ("Shop," "Solutions," "Learn," "Gifts") in the center; Therabody wordmark as SVG left; utility icons (search, account, cart) right. Slim promo banner above the nav in `{colors.surface-dark}` with white text at `{typography.caption}` scale. ## Do's and Don'ts ### Do - Maintain the warm cream canvas (`{colors.background}`) as the foundation of every page — it is the brand's most distinctive surface choice - Use ABC Arizona Text Variable for all display and editorial headlines; reserve Suisse Intl strictly for UI text, buttons, and captions - Apply `{rounded.sm}` (8px) to all buttons and primary input fields — this is the system's defining shape - Use near-black (`{colors.surface-dark}`) as the primary CTA fill — its relationship with the cream canvas is calibrated and deliberate - Reserve `{colors.primary}` interactive blue for hover and focus states only — never as a decorative fill or brand accent - Let product photography carry color energy; keep all UI chrome within the achromatic cream-to-charcoal range - Use `{typography.caption}` with positive letter-spacing (0.4px) for fine print — it was designed to spread at small sizes - Apply the 40px radius (`{rounded.lg}`) for filled badges and the pill (`{rounded.pill}`) for outline badge variants only ### Don't - Don't substitute the warm cream canvas with pure white (`{colors.surface}`) for full-page backgrounds — white is reserved for card surfaces, creating a layer hierarchy - Don't use ABC Arizona Text Variable for body paragraph text below 24px — the variable serif loses readability in Suisse Intl's territory - Don't introduce mid-radius values between 12px and 40px — the system jumps deliberately from `{rounded.md}` (12px) to `{rounded.lg}` (40px) - Don't use `{colors.primary}` blue as a button fill color or page accent — it exists only as a hover/focus signal; overuse breaks its wayfinding function - Don't apply decorative shadows to product cards or page sections — the near-flat elevation language is intentional; visible shadows would read as dated - Don't use weight 400 on Suisse Intl for navigation or buttons — weight 500 carries the necessary authority for interactive elements on the cream canvas - Don't center-align body paragraphs — the system is left-aligned throughout; center is reserved for single-line hero display moments - Don't add warm accent colors (amber, orange, gold) to the UI layer — the palette's warmth comes from the cream canvas tone, not from chromatic accents --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single-column everything; hero text reduces to ~28px; nav collapses | | Mobile | 375–768px | Single-column product grid; hamburger nav; hero headline ~36px | | Tablet | 768–1024px | 2-column product grid; condensed nav with partial links visible | | Desktop | 1024–1440px | Full nav; 4–6 column product grid; hero display type at full scale | | Large Desktop | >1440px | Max-width container centers; generous side margins expand | ### Touch Targets - All buttons: 18px/24px padding ensures minimum 48px height on standard Suisse Intl 15px text - Promo banner CTA links: maintain minimum 44px tap height - Product card thumbnails: tap area covers the full card, not just the image ### Collapsing Strategy - `{typography.display-hero}` (56px) scales to approximately 28–36px on mobile with proportionally reduced tracking - Product grid collapses from 6-column → 4-column → 2-column → single-column at each breakpoint threshold - Navigation transitions from horizontal link bar to hamburger drawer; utility icons (search, account, cart) persist at all sizes - Section vertical padding compresses from ~48–64px on desktop to 24–32px on mobile ### Image Behavior - Hero product photography is full-viewport-width at all breakpoints, maintaining the immersive lifestyle context - Product tile images maintain their aspect ratio within fixed card containers; no cropping distortion - The Therabody wordmark SVG scales cleanly at all sizes — no raster fallback needed - Lifestyle photography in feature sections shifts from side-by-side to stacked layout on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background (canvas): `{colors.background}` — warm cream - Text (primary): `{colors.ink}` — near-black charcoal - Text (muted): `{colors.ink-muted}` — mid gray - CTA fill: `{colors.surface-dark}` — near-black - Card background: `{colors.surface}` — pure white - Interactive accent: `{colors.primary}` — hover/focus blue only - Border: `{colors.border}` — charcoal ### Example Component Prompts - "Build a Therabody-style hero section. Canvas: `{colors.background}` (#f7f3e9 warm cream). Full-bleed lifestyle photography on the right half. Left column: headline in ABC Arizona Text Variable, 56px, weight 440, line-height 1.05, tracking -1.68px, color `{colors.ink}`. Body copy: Suisse Intl 15px/400, line-height 1.30, tracking -0.3px, color `{colors.ink}`. CTA button: `{colors.surface-dark}` fill, white text, Suisse Intl 15px/500, border-radius `{rounded.sm}` (8px), padding 18px 24px." - "Design a Therabody product card. Background: `{colors.surface}` (pure white). Radius: `{rounded.sm}` (8px). Padding: 16px. Product image above the fold, square aspect ratio. Product name: Suisse Intl 16px/700, `{colors.ink}`. Price: Suisse Intl 15px/400, `{colors.ink}`. CTA button below: `{colors.surface-dark}` fill, white text, Suisse Intl 15px/500, 8px radius, 18px/24px padding. 'NEW' badge: `{colors.background}` fill, `{colors.ink}` text, Suisse Intl 11px/500, 40px radius, 8px/12px padding." - "Create the Therabody navigation bar. Background: `{colors.background}`. Height: approximately 56px. Left: Therabody wordmark SVG in `{colors.ink}`. Center: nav categories — Suisse Intl 15px/500, `{colors.ink}` text, no underline by default. Right: search, account, cart utility icons in `{colors.ink}`. Above the nav, a 40px promo banner in `{colors.surface-dark}` with white text at Suisse Intl 11px/400, 0.4px letter-spacing." - "Build a Therabody-style product detail section. Left: full-height product photography on white (`{colors.surface}`) background. Right: ABC Arizona Text Variable 48px/440 headline, tracking -1.44px, `{colors.ink}`. Feature bullets: Suisse Intl 15px/400, `{colors.ink-muted}`. Primary CTA: `{colors.surface-dark}` fill, white text, `{rounded.sm}` radius, 18px/24px padding. Secondary CTA: white fill, `{colors.ink}` text, same radius and padding. Tags row: `{colors.background}` fill badges with 40px radius at `{typography.label-small}`." - "Design a Therabody email capture component. Background: `{colors.background}`. Headline: ABC Arizona Text Variable 40px/440, `{colors.ink}`. Subline: Suisse Intl 15px/400, `{colors.ink-muted}`. Input field: `{colors.background-warm}` fill, 8px radius, Suisse Intl 15px/400, padding 15px 48px (room for envelope icon inset). On focus: `1px solid {colors.border}` outline. Submit button: `{colors.surface-dark}` fill, white text, `{rounded.sm}`, 18px/24px padding." ### Iteration Guide 1. Start with `{colors.background}` (warm cream #f7f3e9) as the root canvas — do not substitute cool white or gray; the warmth is the identity 2. Use ABC Arizona Text Variable for all display moments above 24px; switch to Suisse Intl for everything functional (buttons, nav, labels, captions) 3. Fractional weights are intentional — weight 440 is the Arizona Variable signature; don't round to 400 or 500 4. Reserve `{colors.primary}` blue strictly for hover/focus states — one chromatic signal, one function, maximum legibility 5. Dark CTAs (`{colors.surface-dark}`) on cream create a premium field inversion — avoid making them pill-shaped; `{rounded.sm}` (8px) is the shape decision 6. Elevation is near-flat: use only `rgba(18,18,18,0.05)` for subtle card hover lifts; never visible drop shadows in the static state 7. Product photography is the only chromatic energy — keep UI chrome strictly within the cream-to-charcoal achromatic axis --- ## 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 Therabody. Brand names and trademarks belong to their respective owners.