---
version: alpha
name: "Cowboy (e-bikes)"
description: "Dark-first design system for a premium urban e-bike brand — near-black canvas, SuisseIntl type, pill CTAs, and photography-driven depth."

colors:
  # Canvas & surface
  background: "#1d1d1d"
  surface: "#ffffff"
  surface-muted: "#f5f5f5"    # off-white for alternating light panels
  surface-dark: "#111111"     # deepest dark panel, footer

  # Ink / text
  ink: "#ffffff"
  ink-muted: "#a3a3a3"        # secondary text on dark backgrounds
  ink-subtle: "#737373"       # captions, metadata, footer links on dark
  on-surface: "#1d1d1d"       # text on white/light surfaces

  # Brand accent
  primary: "#1d1d1d"          # primary CTA background (on light surfaces)
  on-primary: "#ffffff"
  primary-inverted: "#ffffff" # primary CTA background (on dark surfaces)
  on-primary-inverted: "#1d1d1d"

  # Interaction states
  text-hover: "#ffffff"       # was rgba(255,255,255,0.9) — Google format requires hex
  focus-ring: "#1d1d1d"       # focus ring on light surfaces

  # Borders
  border: "#1d1d1d"           # was rgba(0,0,0,0.5) — opaque approximation
  border-light: "#e5e7eb"     # Tailwind gray-200, subtle dividers on white panels
  border-overlay: "#333333"   # was rgba(255,255,255,0.1) on dark panels

  # Shadow / depth
  shadow-soft: "#000000"      # was rgba(0,0,0,0.1) — used for card lift shadows

  # Semantic
  error: "#ef4444"

typography:
  display-hero:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -3px
  display:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.8px
  heading-section:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.69px
  heading-sub:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.72px
  heading-card:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.6px
  body-large:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  body:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  nav-link:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.4px
  button-ui:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.4px
  caption:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.47
    letterSpacing: 0px
  label-overline:
    fontFamily: "SuisseIntl, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.47
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 48px
  3xl: 60px
  4xl: 110px
  5xl: 150px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary-inverted}"
    textColor: "{colors.on-primary-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 20px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.on-primary-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 20px 24px
  button-primary-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 20px 24px
  button-primary-dark-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 20px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 20px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 20px 16px 12px
    borderBottom: "1px solid {colors.border-light}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 20px 16px 12px
    borderBottom: "1px solid {colors.border}"
  input-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderBottom: "1px solid {colors.ink}"
  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderBottom: "1px solid {colors.border-overlay}"
---

# Cowboy Design System

## Overview

Cowboy's design system is built for a brand that positions its e-bikes as objects of desire rather than utilitarian transport. The dominant canvas is a deep near-black (`{colors.background}`) that recedes behind rich lifestyle photography — riders in European city streets, golden-hour shots through park corridors, the bike at rest against cool concrete. The page does not sell a product so much as it curates a feeling, and every design decision serves that ambition: no loud accent colors, no overworked gradients, no heavy chrome. Dark quietude is the signature.

The custom `SuisseIntl` typeface defines the visual register immediately. At hero scale (120px, weight 400, line-height 0.9, -3px tracking) the letterforms stack so tightly they read almost as a mass, a single graphic object rather than a sequence of words. This compressed display setting — tight lines, near-zero leading, aggressive negative tracking — is the brand's most defining typographic choice. It communicates density and precision, engineering confidence without clinical stiffness. At body scale the same typeface opens up to a generous 1.47 line-height, warm and readable, never clinical.

The button system follows a clean binary: on dark backgrounds, a white pill CTA lifts cleanly from the frame (`{colors.primary-inverted}`, `{rounded.pill}`, 20px vertical padding); on light modal surfaces that invert to white, the pill flips to near-black. Pill radius (`{rounded.pill}`) is the only radius allowed on primary actions — cards and inputs stay anchored at 8px (`{rounded.md}`), reflecting a system that is confident enough to be asymmetric. Gradients appear only as barely-visible warm-tinted bottom-of-image overlays, dissolving the boundary between photography and UI rather than decorating it.

**Key Characteristics:**
- Near-black `{colors.background}` as the default page canvas — never softened to charcoal gray
- SuisseIntl at weight 400 for all display text; weight 500 for buttons and nav labels
- Display hero at 120px / line-height 0.9 / -3px tracking — letterforms read as compressed mass
- White pill CTAs (`{rounded.pill}`) on dark surfaces; dark pill CTAs on white modal/card panels
- Photography provides the emotional color — only warm-cream and blue-gray tinted bottom gradients used as soft image vignettes
- 8px (`{rounded.md}`) radius for cards and model-selector UI elements; 0px for form inputs
- Asymmetric drawer/modal borders: top corners 8px, bottom 0 — or inverse (0px/8px) — no fully square OR fully round containers
- `fadeSlideUp` hero entrance at 0.6s ease; 0.3s card hover transitions on `cubic-bezier(0.4,0,0.2,1)`
- Sparse use of `{colors.ink-muted}` and `{colors.ink-subtle}` for secondary type on dark — hierarchy through luminosity, not weight
- Self-hosted SuisseIntl in Regular, Book, and SemiBold cuts; no Google Fonts dependency

## Colors

### Primary Canvas
- **Cowboy Black** (`{colors.background}`): Default page canvas, navigation bar, dark section backgrounds, footer. The dominant surface — never lightened to dark-gray.
- **Deep Black** (`{colors.surface-dark}`): Deepest panels and footer areas, providing subtle tonal variation within the dark system.

### Light Surfaces (modal / inverted)
- **Pure White** (`{colors.surface}`): Modal overlays, newsletter signup panel, product detail cards on light sections.
- **Off-White Mist** (`{colors.surface-muted}`): Alternating light section backgrounds; badge fills.

### Text
- **White** (`{colors.ink}`): All primary text on dark surfaces — headings, body, CTAs.
- **Mid Gray** (`{colors.ink-muted}`): Secondary labels, subheadings, feature captions on dark.
- **Dim Gray** (`{colors.ink-subtle}`): Tertiary text — footer links, legal copy, underlined metadata.
- **Dark Ink** (`{colors.on-surface}`): Primary text on white/modal surfaces.

### Brand Accent
- Cowboy has **no chromatic brand accent**. There is no electric blue, no cycling-brand lime green, no orange highlight. The near-black and white system is complete as-is; bike colorways (tan, slate, sand) supply any warmth visible on the page.

### Borders
- **Dark Border** (`{colors.border}`): Crisp dark dividers on white panels, full-weight 1px rule.
- **Overlay Border** (`{colors.border-overlay}`): 1px border on dark surfaces — was `rgba(255,255,255,0.1)`, flattened to opaque `#333333` for token use.
- **Light Border** (`{colors.border-light}`): 1px Tailwind gray-200 on white panels; form inputs resting state.

### Gradients
Bottom-of-image warm tints (cream: `rgba(227,220,206,0.5)`, dusty blue: `rgba(187,208,227,0.5)`, charcoal: `rgba(97,97,97,0.3)`, sage: `rgba(141,150,141,0.5)`) fade upward to transparent — used only as photography vignettes, never as UI fills.

## Typography

### Font Family
- **Primary**: `SuisseIntl` (self-hosted in Regular/Book/SemiBold .woff2), with fallbacks: `Inter`, `ui-sans-serif`, `system-ui`, `sans-serif`
- **SuisseIntl** is a Swiss neo-grotesque by Swiss Typefaces — precise, neutral, with slightly humanist detail. Not available on Google Fonts.
- **Free substitute**: Inter at weight 400/500 captures the neutral, slightly humanist quality at no cost.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Landing hero statements — "Riding reinvented", campaign openers. Compressed mass effect. |
| `display` | Section headline statements, full-width feature panels |
| `heading-section` | Section openers, feature category titles |
| `heading-sub` | Product description blocks, testimonial subheads |
| `heading-card` | Card titles, spec group labels, comparison headings |
| `body-large` | Feature intro paragraphs, modal headlines |
| `body` | Standard reading text, newsletter copy, product descriptions |
| `nav-link` | Navigation links, model selector tabs, button labels at compact size |
| `button-ui` | All button labels — sentence case, weight 500 |
| `caption` | Tags, image captions, spec labels, badge text |
| `label-overline` | Uppercase section labels, category markers — only context where uppercase appears |

### Principles
- Weight 400 for all display and body text; weight 500 only for nav labels, buttons, and captions — a deliberate two-weight system
- Negative tracking grows proportionally with size: -3px at 120px, -1.8px at 72px, -0.69px at 46px, tapering to 0 at body scale
- Line-height compresses below 1.0 at hero scale (0.9) to create the tight-stack signature; opens to 1.47 for body reading comfort
- Sentence case throughout; uppercase used only for short label-overline markers (12px, weight 600)
- No italic anywhere in the system

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Cowboy's spacing is generous and cinematic at large scale — 110px (`{spacing.4xl}`) and 150px (`{spacing.5xl}`) section gaps give each photography panel room to breathe. At component scale the system snaps to familiar 8px multiples: 8px for tight groupings, 24px for card padding, 48px for internal section rhythm.

### Grid & Container
- Max content width: approximately 1440px; full-bleed sections extend beyond
- Hero: 100vw full-bleed photography with overlaid text locked inside a ~1200px inner column
- Model selector: horizontal pill-tab row that collapses to scrollable strip on mobile
- Product grid: 2-column or 3-column with consistent aspect-ratio photography crops
- Feature strips: alternating full-bleed dark and white panels, each housing a single focused message
- Breakpoint at 480–481px marks the primary mobile/desktop transition

### Whitespace Philosophy
- **Photography first**: large vertical sections exist primarily to hold imagery — text is an overlay, not the content
- **Cinematic pacing**: 110–150px between major sections creates a scroll-paced editorial rhythm, not a utility catalog
- **No filler**: empty space is never populated with secondary content; if a panel is half empty, that is the design

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Dark page canvas, full-bleed hero, navigation |
| Subtle (Level 1) | `0 1px 6px rgba(0,0,0,0.06), 0 2px 32px rgba(0,0,0,0.16)` | Newsletter modal lift on dark background |
| Card (Level 2) | `0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1)` | White cards on dark panel |
| Overlay (Level 3) | `0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)` | Modal dialogs and floating drawers |
| Focus Ring | `0 0 0 1px #1d1d1d` on white; `0 0 0 1px #ffffff` on dark | Keyboard focus on interactive elements |

**Shadow Philosophy**: Shadows are used sparingly and never on the dark canvas itself — on a near-black background, `box-shadow` is invisible anyway. Depth on dark surfaces comes from tonal contrast and photography depth. Shadows appear only when white cards or modals float over dark panels, providing the minimum lift needed to read the stacking order.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Form inputs, sharp-edge full-bleed dividers |
| `sm` | 4px | Minimal use — very compact UI chips |
| `md` | 8px | Cards, model-selector tabs, secondary buttons, drawer panels |
| `pill` | 9999px | All primary and ghost CTAs — the defining button shape |

The system is deliberately asymmetric: pill for action, 8px for structure, 0px for form elements. Containers use split-corner values (top 8px / bottom 0px or inverse) to snap to adjacent panels rather than float free — a detail that reads as precision rather than rounded friendliness.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — White pill on dark canvas. The default CTA for all dark-background sections: "Order now", "Book a test ride". 20px vertical padding gives a generous tap target.
- **`button-primary-dark`** — Dark pill on white/modal surfaces — the inverted context equivalent.
- **`button-secondary`** — White background with 8px radius; used for model selector tabs (e.g. "Cruiser", "Cross"). Lower visual weight than the pill primary.
- **`button-ghost`** — Translucent dark fill, pill radius; used for secondary actions within dark panels like "Shop accessories".

### Cards
Cards in white (`{components.card}`) float over dark panels with a soft box-shadow for depth. Card dark (`{components.card-dark}`) is a dark surface panel used for feature comparisons and spec blocks. Both use `{rounded.md}` (8px). Internal padding is 24px; full-bleed image areas extend to edge with no padding.

### Inputs
Form inputs use `{rounded.none}` (0px) — sharp, no border on sides or top, only a bottom border rule in resting state (`{colors.border-light}`), thickening on focus (`{colors.border}`). On dark newsletter panels, the email field uses a near-transparent background with a white bottom border. Floating label pattern: 12px label floats above the field on focus.

### Badges / Tags
Small pill badges (`{rounded.pill}`, 4px 10px padding, `{typography.caption}`) on `{colors.surface-muted}` for product condition labels and newsletter benefit bullets. Minimal visual weight.

### Navigation
Sticky top nav on `{colors.background}` with `{colors.border-overlay}` hairline below. Wordmark centered or left-aligned; model links and cart/account icons right-aligned. Nav links at `{typography.nav-link}` weight 500 in white; hover triggers 0.15s color transition. Mobile: collapses to hamburger at 480px, full-screen dark overlay menu with large 36px link list.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default page canvas — dark is the home state, not the accent
- Keep primary CTAs as pills (`{rounded.pill}`) — the pill shape is the brand's action signature
- Let photography drive the emotional color of each panel; UI chrome stays achromatic
- Use SuisseIntl weight 400 for display; weight 500 only for nav, buttons, and captions
- Apply negative tracking proportionally: -3px at 120px display, tapering to 0 at body
- Use 8px (`{rounded.md}`) for card and panel containers — never introduce mid-range radii like 12px or 16px
- Match input bottom-border approach — no full-border boxes, just the bottom hairline rule
- Use `{spacing.4xl}` (110px) or `{spacing.5xl}` (150px) for major section gaps — cinematic pace requires room
- Keep gradients to barely-visible photography vignettes only — bottom-of-image tint, never UI fills
- Honor the asymmetric corner pattern for modals and drawers (0px/8px or 8px/0px split)

### Don't
- Don't introduce a chromatic brand accent — no orange, green, or electric blue in UI chrome
- Don't use pill radius on cards or structural containers — pills are for actions only
- Don't tighten line-height below 0.9 or loosen it above 1.5 — the tight/open contrast is intentional
- Don't add `box-shadow` on dark-on-dark surfaces — it's invisible and adds noise to the token system
- Don't use weight 700 or bold anywhere — the two-weight system (400/500) is the brand
- Don't uppercase body or heading text — only `label-overline` (12px, weight 600) gets uppercase treatment
- Don't place white cards without a shadow — they need at minimum `Level 2` lift to read against the dark canvas
- Don't use `{colors.surface-muted}` as the page canvas — it's reserved for alternating panel backgrounds and badge fills only
- Don't swap the pill-to-8px asymmetry: primary buttons must be pills; structural elements must not be

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single-column; hero type scales to 48–56px; full-width pill CTAs; nav collapses to hamburger |
| Mobile+ | 480–768px | Wider single-column; hero type at 64–80px; model tab strip becomes scrollable |
| Tablet | 768–1024px | 2-column product grid begins; hero type at 80–96px; nav expands partially |
| Desktop | 1024–1440px | Full 3-column grid; hero type at 96–120px; sticky nav full layout |
| Large Desktop | >1440px | Full hero type scale (120px); section gaps at 110–150px; 1440px content clamp |

### Touch Targets
- Primary pill CTAs: min 48px tap height — 20px vertical padding on 16px text meets this naturally
- Model selector tabs: 44px tap height minimum on mobile
- Nav links in mobile overlay: 56px tap height with generous vertical padding
- Bottom-edge drawer: full-width tap zone across entire bottom bar

### Collapsing Strategy
- **Hero**: 120px type → 80px → 56px → 48px progressive scale; line-height stays at 0.9; tracking reduces proportionally
- **Nav**: Full horizontal model links → hamburger icon at 480px; overlay menu fills full viewport in `{colors.background}`
- **Product grid**: 3-column → 2-column → single-column stacked cards
- **Section gaps**: `{spacing.5xl}` (150px) desktop → `{spacing.3xl}` (60px) mobile — pacing maintained but tightened
- **Photography**: Full-bleed preserved at all breakpoints; aspect ratios shift from 16:9 (desktop) to 4:5 (mobile portrait)

### Image Behavior
- Lifestyle photography is the primary content carrier — maintained at every breakpoint, never cropped to icons
- Warm bottom-gradient vignettes persist on mobile (softer, narrower)
- Bike product shots maintain consistent studio treatment across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#1d1d1d)
- Text on dark: `{colors.ink}` (#ffffff)
- Secondary text on dark: `{colors.ink-muted}` (#a3a3a3)
- Caption on dark: `{colors.ink-subtle}` (#737373)
- White surface (modal/card): `{colors.surface}` (#ffffff)
- Text on white: `{colors.on-surface}` (#1d1d1d)
- Primary CTA (on dark): `{colors.primary-inverted}` (#ffffff) with `{colors.on-primary-inverted}` text
- Primary CTA (on white): `{colors.primary}` (#1d1d1d) with `{colors.on-primary}` text
- Border on dark: `{colors.border-overlay}` (#333333)
- Border on white: `{colors.border-light}` (#e5e7eb)

### Example Component Prompts

- "Create a full-bleed dark hero section on `{colors.background}` (#1d1d1d). Overlay text left-aligned with headline at 120px SuisseIntl weight 400, line-height 0.9, letter-spacing -3px, color `{colors.ink}` (#ffffff). Add a white pill CTA — `{colors.primary-inverted}` background, `{colors.on-primary-inverted}` text, `{rounded.pill}` radius, 20px 24px padding, 16px SuisseIntl weight 500. No shadow on CTA — the dark canvas provides contrast."
- "Design a white newsletter modal card (`{colors.surface}`, #ffffff) floating over a dark panel. Modal has `{rounded.md}` (8px) on top corners, 0px on bottom (snapped to panel edge). Inside: 24px padding, headline at 24px SuisseIntl weight 400, body at 16px weight 400, email input with bottom-border only (`{colors.border-light}` resting, `{colors.border}` on focus), and a dark pill CTA — `{colors.primary}` background, `{colors.on-primary}` text. Apply box-shadow: `0 2px 32px rgba(0,0,0,0.16)` for the modal lift."
- "Build a model-selector tab row on `{colors.background}`. Each tab is a white card chip (`{colors.surface}`, `{rounded.md}`, 8px 20px padding) with `{colors.on-surface}` text at 16px SuisseIntl weight 400. Active tab stays white; inactive tabs shift to `{colors.border-overlay}` fill. Transition color/background at 0.3s `cubic-bezier(0.4,0,0.2,1)`."
- "Create a sticky nav bar on `{colors.background}`. Left: Cowboy wordmark SVG in `{colors.ink}` (#ffffff). Right: model nav links at `{typography.nav-link}` (16px SuisseIntl weight 500, `{colors.ink}`). Bottom: 1px solid `{colors.border-overlay}` (#333333) hairline. On scroll: nav stays fixed; add no background-blur, no additional shadow — the dark surface is self-contained."
- "Design a product feature card — `{colors.surface}` (#ffffff) background, `{rounded.md}` radius (8px), 24px internal padding, box-shadow `0 4px 6px rgba(0,0,0,0.1)`. Title at `{typography.heading-card}` (24px, weight 400, -0.6px tracking), body at `{typography.body}` (18px, weight 400, 1.47 line-height), both in `{colors.on-surface}`. Below body, add a small pill badge: `{colors.surface-muted}` fill, `{colors.on-surface}` text, `{typography.caption}` (12px, weight 500), `{rounded.pill}` radius, 4px 10px padding."
- "Build a dark e-bike spec block panel on `{colors.background}`. Section label in `{typography.label-overline}` (12px, weight 600, uppercase, `{colors.ink-muted}`). Spec value at `{typography.display}` (72px, weight 400, line-height 1.0, -1.8px tracking, `{colors.ink}`). Sub-label at `{typography.caption}` (12px, weight 500, `{colors.ink-muted}`). Stack vertically with `{spacing.sm}` (8px) between label and value, `{spacing.xs}` (4px) between value and sub-label."

### Iteration Guide

1. Start with `{colors.background}` (#1d1d1d) as the page canvas — dark is not a mode, it is the default
2. Primary CTAs must be pills (`{rounded.pill}`) in `{colors.primary-inverted}` on dark or `{colors.primary}` on white — never square, never outlined
3. Apply compressed display tracking at scale: -3px at 120px, -1.8px at 72px, -0.69px at 46px, 0 at body
4. Shadows appear only on white elements floating over dark — minimal, never decorative
5. Color hierarchy on dark: `{colors.ink}` (primary) → `{colors.ink-muted}` (secondary) → `{colors.ink-subtle}` (tertiary)
6. Card and structural radius: `{rounded.md}` (8px) — never introduce intermediate radii like 12–20px
7. Use asymmetric corner splits (0px/8px) where modals or drawers snap to adjacent UI panels
8. Photography vignette gradients: warm-cream or dusty-blue tint, bottom-up only, never applied to UI fills
9. Motion: hero entrance via `fadeSlideUp` 0.6s ease; interactions at 0.3s `cubic-bezier(0.4,0,0.2,1)`
10. Two-weight discipline: 400 for all display and body, 500 for nav/button/caption — no bold, no light

---

## 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 Cowboy (e-bikes). Brand names and trademarks belong to their respective owners.