---
version: alpha
name: Height
description: Dark autonomous project management — near-black canvas, Poppins weight 600 with aggressive -0.04em tracking for display text, vivid blue accent, multi-color task taxonomy, and deep-shadow card elevation.

colors:
  # Canvas / surfaces (dark-native)
  background: "#121212"
  surface: "#252525"    # card and panel backgrounds
  surface-deep: "#000000"  # black sections, footers

  # Ink / text scale
  ink: "#ffffff"
  ink-secondary: "#9e9e9e"    # opaque approx of rgba(255,255,255,0.62) on #121212 — Google format requires hex
  ink-muted: "#878787"        # rgb(135,135,135) — muted metadata, secondary labels
  ink-on-surface: "#d6d6d6"   # opaque approx of rgba(255,255,255,0.84) on #252525 — Google format requires hex

  # Brand accent — Height Blue
  primary: "#3888ff"          # rgb(56,136,255) — CTA buttons, primary actions
  primary-light: "#5c9aff"    # rgb(92,154,255) — hover, lighter variant
  primary-tint: "#2e3341"     # opaque approx of rgba(160,185,255,0.2) on #121212 dark canvas — Google format requires hex
  on-primary: "#ffffff"

  # Link / interactive
  link: "#0099ff"

  # Task tag palette — Height's multi-color taxonomy
  tag-blue: "#5c9aff"         # rgb(92,154,255)
  tag-violet: "#8157ff"       # rgb(129,87,255)
  tag-magenta: "#ff2fd5"      # rgb(255,46,213) — pink/hot magenta
  tag-red: "#ff4d76"          # rgb(255,77,118)
  tag-orange: "#f6ad65"       # rgb(246,173,101)
  tag-yellow: "#d6be1f"       # rgb(214,190,31)
  tag-teal: "#00c2bb"         # rgb(0,194,187)
  tag-cyan: "#00bfe5"         # rgb(0,191,229)

  # Semantic status
  success: "#73ff71"          # rgb(115,255,113) — AI/completion green
  error: "#ff5557"            # rgb(255,85,87)
  warning: "#ffe356"          # rgb(255,227,86)
  info: "#57c5ff"             # rgb(87,197,255) — info blue

  # Borders
  border: "#333333"           # opaque approx of rgba(255,255,255,0.2) on #121212 — Google format requires hex
  border-card: "#404040"      # opaque approx of rgba(255,255,255,0.2) on #252525 — Google format requires hex

  # Shadow tints
  shadow-soft: "#141414"      # used in box-shadow: 0 4px 8px #14141459, 0 10px 32px #14141459

  # Code inline background
  code-bg: "#1a1a1a"          # opaque approx of rgba(0,0,0,0.1) on surface — Google format requires hex

typography:
  display-hero:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -2.88px    # -0.04em at 72px
  display:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -2.4px     # -0.04em at 60px
  display-mid:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 42px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1.68px    # -0.04em at 42px
  heading-section:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1.6px     # -0.04em at 40px
  heading-sub:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -1.2px     # -0.04em at 30px
  heading-feature:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.12px    # -0.04em at 28px
  heading-card:
    fontFamily: "Poppins, system-ui, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.88px    # -0.04em at 22px
  body-large:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-muted:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  label-allcaps:
    fontFamily: "Geist Mono Medium, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.56px     # 0.04em at 14px
  code:
    fontFamily: "Fragment Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 60px
  5xl: 80px
  6xl: 100px

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 16px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.border-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-surface}"
    rounded: "{rounded.xl}"
    padding: 24px
    # border: 1.25px solid {colors.border}
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-on-surface}"
    rounded: "{rounded.xl}"
    padding: 24px
    # border: 1.25px solid {colors.border}
    # box-shadow: 0 4px 8px {colors.shadow-soft}59, 0 10px 32px {colors.shadow-soft}59

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  divider:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink-muted}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.primary-light}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  tag-task:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-blue}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-violet:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-violet}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-warm:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-orange}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-magenta:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-magenta}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-red:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-red}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-yellow:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-yellow}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-teal:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-teal}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-task-cyan:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tag-cyan}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-status-success:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.success}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-status-error:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.error}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-status-warning:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.warning}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px
  tag-status-info:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.info}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 0px 60px
  nav-link-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 60px

  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  section-dark:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink}"

  code-inline:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.code}"
    rounded: "{rounded.sm}"
    padding: 2px 6px

  overlay-scrim:
    backgroundColor: "{colors.shadow-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
---

# Height Design System

## Overview

Height's visual identity is built for a single conviction: project management should feel less like overhead and more like intelligent collaboration. The `{colors.background}` canvas — a warm near-black `#121212`, not the cold darkness of pure black — anchors everything. It's a deliberate choice: `#121212` reads as "crafted product" while `#000000` reads as "enterprise void." Card surfaces lift to `{colors.surface}` at `#252525`, creating a subtle two-step depth hierarchy without needing shadows. Black (`{colors.surface-deep}`) is reserved for full-bleed accent sections, making those moments feel like stepping into something deeper.

The typography system runs a confident split: Poppins weight 600 owns all display and heading text, always with -0.04em letter-spacing that tightens each headline into a single visual unit. At 72px this becomes -2.88px of compression — headlines feel like product decisions, not decoration. Inter handles everything functional — nav, body copy, captions, buttons — in weights 400-600, giving the UI a calm, approachable readability beneath the bold hero moments. Geist Mono Medium provides a sans-width monospace feel for uppercase label text with 0.04em positive tracking (the only positive-tracked type in the system), while Fragment Mono serves inline code.

Height's accent strategy is particularly expressive: a primary `{colors.primary}` blue (`#3888ff`) handles CTAs and primary interactions, but the design's real personality comes from its multi-color task taxonomy — blue, violet, magenta, red, orange, yellow, teal, cyan — each a vivid, fully-saturated hue that makes different task types visually distinct at a glance. These category colors aren't decorative; they're the language of the product. On a near-black canvas, they read like colored light rather than paint.

**Key Characteristics:**
- Near-black `{colors.background}` canvas — chosen warmth of `#121212` over cold `#000000`
- Poppins weight 600 + -0.04em tracking for all display/heading text — aggressive compression
- Inter weight 400/500 for body copy at 140% line-height — readable under high information density
- Vivid multi-color task taxonomy (`{colors.tag-blue}`, `{colors.tag-violet}`, `{colors.tag-magenta}`, etc.) — task identity through color
- `{colors.primary}` `#3888ff` as the single interactive-action accent
- `rgba(255,255,255,0.2)` white border strategy — `{colors.border}` — keeps cards visible without heavy chrome
- 20px `{rounded.xl}` radius on all cards — confident modern SaaS rounding
- Deep layered shadow: `0 4px 8px {colors.shadow-soft}, 0 10px 32px {colors.shadow-soft}` — elevation feels physical
- Geist Mono Medium at 14px / +0.04em for uppercase labels — technical, precise, understated
- Fragment Mono for inline code — matches developer audience without feeling editor-like
- Inter Display loaded for potential hero variants — display-optimized type at scale

## Colors

### Canvas & Surfaces
- **Near-Black** (`{colors.background}`): Main page canvas — warm dark charcoal, not cold black.
- **Surface** (`{colors.surface}`): Card and panel backgrounds — visible lift from the canvas.
- **Pure Black** (`{colors.surface-deep}`): Full-bleed sections, footer, deepest moments.

### Text / Ink
- **White** (`{colors.ink}`): Primary text — headlines, card titles, active nav.
- **Secondary** (`{colors.ink-secondary}`): Body copy, nav links — mid-opacity white on dark canvas.
- **Muted** (`{colors.ink-muted}`): Metadata, timestamps, placeholder text.
- **On Surface** (`{colors.ink-on-surface}`): Body copy on `{colors.surface}` cards.

### Brand Accent
- **Height Blue** (`{colors.primary}`): All primary CTAs, buttons, focus rings.
- **Blue Light** (`{colors.primary-light}`): Hover state, lighter interactive context.
- **Blue Tint** (`{colors.primary-tint}`): Badge backgrounds, tag containers.
- **Link Blue** (`{colors.link}`): Inline hyperlinks — distinct from CTA blue.

### Task Tag Palette
All tags are vivid, fully saturated — they function as identity signals for task types, not decoration.
- `{colors.tag-blue}` · `{colors.tag-violet}` · `{colors.tag-magenta}` · `{colors.tag-red}`
- `{colors.tag-orange}` · `{colors.tag-yellow}` · `{colors.tag-teal}` · `{colors.tag-cyan}`

### Semantic Status
- **Success** (`{colors.success}`): AI completion, done states — vivid electric green.
- **Error** (`{colors.error}`): Failures, blockers — bright coral red.
- **Warning** (`{colors.warning}`): Caution states — warm yellow.
- **Info** (`{colors.info}`): Informational prompts.

### Borders & Shadows
- **Border** (`{colors.border}`): Card outlines on canvas — approximated from `rgba(255,255,255,0.2)`.
- **Shadow** (`{colors.shadow-soft}`): Layered shadow tint for card elevation.

## Typography

### Font Family
- **Display / Headings**: `Poppins` weight 600, fallbacks `system-ui, -apple-system, sans-serif`
- **UI / Body**: `Inter` weights 400-600, fallbacks `system-ui, -apple-system, sans-serif`
- **Uppercase Labels**: `Geist Mono Medium`, fallbacks `ui-monospace, monospace`
- **Code**: `Fragment Mono`, fallbacks `ui-monospace, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px — main hero headline |
| `display` | 60px — section hero |
| `display-mid` | 42px — feature section headers |
| `heading-section` | 40px — major section titles |
| `heading-sub` | 30px — sub-section headings |
| `heading-feature` | 28px — feature titles |
| `heading-card` | 22px — card titles, callout labels |
| `body-large` | 20px Inter — intro / lead copy |
| `body` | 18px Inter — standard body |
| `body-small` | 17px Inter — secondary body |
| `body-muted` | 15px Inter — supporting copy |
| `nav-link` | 16px Inter w500 — navigation |
| `button-ui` | 16px Inter w600 — buttons, CTAs |
| `caption` | 13px Inter w500 — metadata, captions |
| `label-allcaps` | 14px Geist Mono +0.04em — category labels |
| `code` | 14px Fragment Mono — inline code |

### Principles
- **Poppins owns display**: Every headline — hero, section, feature card — uses Poppins 600 with -0.04em tracking. No exceptions.
- **Compression that communicates**: -2.88px at 72px, -1.6px at 40px — tighter headings feel decisive, engineered.
- **Inter for all function**: Navigation, body, buttons, captions all use Inter. Consistent weight ladder: 400 (read), 500 (navigate/emphasize), 600 (act).
- **Mono for precision**: Geist Mono with positive tracking for ALL-CAPS labels — technical signals. Fragment Mono for code.
- **Line-height by intent**: Headings at 100-120% (tight, headline-dense); body at 140% (open, comfortable reading).

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is **4px**, with a pragmatic scale to 100px section padding.

Height uses generous vertical rhythm: section padding of `{spacing.6xl}` (100px) top and bottom creates breathing room between feature blocks. The 60px horizontal container padding (`{spacing.4xl}`) feels like a canvas margin — content never crowds the edges.

### Grid & Container
- Max content width: 1280px
- Section padding: 100px vertical × 60px horizontal
- Feature sections: 2-column layout — product screenshot + text
- Testimonial section: 2-column paired quotes
- Full-width dark sections with internal max-width constraints

### Whitespace Philosophy
- **Dark space IS whitespace**: negative space on `{colors.background}` reads as intentional breathing room, not emptiness.
- **Sections self-contain**: no visible dividers — generous padding creates clear section identity.
- **Cards use tight interior padding**: 24px padding keeps information dense within cards.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` — no shadow | Page background, text sections |
| Surface (Level 1) | `{colors.surface}` background | Cards, feature panels |
| Elevated (Level 2) | `0 4px 8px {colors.shadow-soft}59, 0 10px 32px {colors.shadow-soft}59` | Main product screenshot, floating cards |
| Deep (Level 3) | `{colors.surface-deep}` full-bleed sections | Footer, dark callout sections |
| Card Border | `1.25px solid {colors.border}` | Card outlines on canvas |

**Shadow Philosophy**: Height uses a double-layer shadow — a shorter `4px/8px` ambient shadow and a deeper `10px/32px` long shadow — both using the same `{colors.shadow-soft}` tint at ~35% opacity. On a dark canvas this creates a convincingly physical depth effect for the central product screenshot. Cards primarily use border strokes (`{colors.border}`) rather than shadows for their elevation.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used — full-bleed sections |
| `sm` | 6px | Inline code chips, small badges |
| `md` | 12px | Inputs, small interactive components |
| `lg` | 16px | CTA buttons |
| `xl` | 20px | Cards, large panels, feature containers |
| `pill` | 9999px | Tag chips, filter pills, status badges |

Height's radius system is generous at the top — 20px cards give the UI a modern SaaS warmth — while buttons use 16px for a distinct-but-cohesive companion. The 6px and 12px values serve micro components. No sharp 0px containers in the primary UI.

## Components

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

### Buttons
- **`button-primary`** — `{colors.primary}` blue, 20px radius, white text. The primary conversion action (sign up, try for free).
- **`button-primary-hover`** — lightens to `{colors.primary-light}` on hover.
- **`button-secondary`** — `{colors.surface}` background, white text — secondary actions, download.
- **`button-ghost`** — transparent dark background, muted text — navigation-adjacent actions.

### Cards
- **`card`** — `{colors.surface}` background, 20px radius, 24px padding. Feature demonstration containers and testimonial blocks. Bordered with `{colors.border}`.

### Inputs
- **`input`** — `{colors.surface}` background, 12px radius. Simple, unfussy. Focus state inherits a `{colors.primary}` ring.

### Tags / Badges
- **`badge`** — Blue-tinted, pill-shaped — for feature callouts like "New" or "2.0".
- **`tag-task`** — Multi-color pill badges, one per task category. Color from the tag palette (`{colors.tag-blue}`, `{colors.tag-violet}`, etc.).

### Navigation
- **`nav-bar`** — Sticky, `{colors.background}` background, 60px horizontal padding. Inter 500 at 16px for links in `{colors.ink-secondary}`. Brand blue CTA right-aligned.

### Code
- **`code-inline`** — `{colors.code-bg}` dark chip, Fragment Mono, 6px radius, `.1em .2em` padding — matches the Framer-preset code style exactly.

## Do's and Don'ts

### Do
- Use Poppins 600 with `-0.04em` tracking for ALL display and heading text — this is the single most distinctive pattern.
- Set line-height to 100% for hero headlines (`{typography.display-hero}`) — compressed to a visual block.
- Apply `{colors.background}` (`#121212`) as the default page canvas — never substitute pure `#000000`.
- Use `{rounded.xl}` (20px) for all cards and feature containers.
- Reserve `{colors.primary}` for primary actions only — one active accent per viewport.
- Let the task tag palette breathe: use full-saturation hues from the tag color set, never desaturate them.
- Use Geist Mono Medium with `0.04em` positive tracking for ALL-CAPS category labels.
- Apply `{colors.border}` as a `1.25px` border on cards — cards define their space via stroke, not shadow.

### Don't
- Don't mix Poppins and Inter on the same heading level — font split is strict by level.
- Don't reduce Poppins tracking — the -0.04em compression is the typeface's identity here.
- Don't use shadows for card elevation; use `{colors.border}` borders. Shadows are for the product screenshot hero only.
- Don't introduce new accent colors — the tag palette is the full chromatic vocabulary. Anything outside it looks foreign.
- Don't use `{colors.ink}` (`#ffffff`) for body copy on cards — use `{colors.ink-on-surface}` instead.
- Don't apply positive tracking to Poppins display text — reserved for Geist Mono labels only.
- Don't use font-weight below 400 — the minimum weight in the system is Inter 400.
- Don't reduce card radius below 16px — the generous rounding is a brand signature.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, nav collapses to hamburger |
| Tablet | 768–953px | Two-column begins, font sizes step down |
| Desktop | 954–1279px | Full layout, feature grids |
| Large Desktop | ≥1280px | Max-width 1280px container, centered |

### Touch Targets
- Buttons use generous padding (12px 24px) with 16-20px radius — comfortable tap surfaces.
- Nav links at 16px with adequate spacing for thumb navigation.
- Tag pills have 8-10px horizontal padding for minimum touch area.

### Collapsing Strategy
- Hero: 72px → 40px display text on mobile, tracking adjusts proportionally at -0.04em.
- Navigation: horizontal links + CTA button → hamburger menu below 768px.
- Feature sections: 2-column screenshot+text → stacked single column, screenshot above text.
- Card grids: maintain single-column with full-width cards on mobile.
- Section padding: 100px → 60px vertical on tablet → 40px on mobile.

### Image Behavior
- Product screenshots maintain their 20px radius and layered shadow at all sizes.
- Screenshots scale proportionally with viewport width.
- Dark canvas ensures app UI screenshots blend naturally at any size.

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: `{colors.background}` (#121212)
- Card background: `{colors.surface}` (#252525)
- Primary text: `{colors.ink}` (#ffffff)
- Secondary text: `{colors.ink-secondary}` (~rgba(255,255,255,0.62))
- Muted text: `{colors.ink-muted}` (#878787)
- Brand CTA: `{colors.primary}` (#3888ff)
- CTA hover: `{colors.primary-light}` (#5c9aff)
- Card border: `{colors.border}` (~rgba(255,255,255,0.2))
- Shadow tint: `{colors.shadow-soft}` (#141414)

### Example Component Prompts
- "Create a hero section on `{colors.background}`. Headline: Poppins 600 72px, line-height 1.0, letter-spacing -2.88px, color `{colors.ink}`. Subheading: Inter 500 20px, line-height 1.4, color `{colors.ink-secondary}`. Primary CTA button `{colors.primary}`, 20px radius, 12px 24px padding. Second button `{colors.surface}` background, same radius."
- "Build a feature card on `{colors.surface}`, border 1.25px solid `{colors.border}`, 20px radius. Title: Poppins 600 28px, letter-spacing -1.12px, color `{colors.ink}`. Body: Inter 500 18px, line-height 1.4, color `{colors.ink-on-surface}`. Apply shadow: `0 4px 8px {colors.shadow-soft}59, 0 10px 32px {colors.shadow-soft}59`."
- "Create a task tag pill: background `{colors.tag-blue}` at 15% opacity, text `{colors.tag-blue}`, 9999px radius, 2px 8px padding, Inter 500 13px. Repeat pattern with `{colors.tag-violet}`, `{colors.tag-magenta}`, `{colors.tag-orange}` for a multi-color taxonomy."
- "Build navigation bar: `{colors.background}` background, 60px horizontal padding, sticky. Nav links: Inter 500 16px, color `{colors.ink-secondary}`, hover lightens to `{colors.ink}`. Right-side CTA: `{colors.primary}` button, 16px radius, 10px 20px padding, Inter 600 16px, white text."
- "Create an ALL-CAPS category label: Geist Mono Medium 14px, letter-spacing 0.56px (0.04em), uppercase transform, color `{colors.ink-muted}`. Use as section eyebrow above a Poppins 600 40px headline with -1.6px tracking."

### Iteration Guide
1. Start with `{colors.background}` — never use pure black; the warmth of `#121212` is intentional.
2. All display/heading text uses Poppins 600 — letter-spacing is always -0.04em, no exceptions.
3. Line-height: 100% for largest heroes, 110-120% for mid-sized headings, 140% for body.
4. One primary accent (`{colors.primary}`) per view — tag colors are identity, not decoration.
5. Cards live on `{colors.surface}` with `{colors.border}` stroke — no drop shadows except on the hero product screenshot.
6. Radius system: cards = 20px, buttons = 16px, inputs = 12px, micro = 6px, tags = pill.
7. Inter for all UI text under heading level — weights 400 (read) / 500 (navigate) / 600 (act).

---

## 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 Height. Brand names and trademarks belong to their respective owners.