---
version: alpha
name: Parachute
description: Warm-editorial home essentials brand built on Petrona serif headlines and Suisse Intl utility copy, a linen canvas threaded with terracotta and soft-charcoal — cozy confidence without trend-chasing.

colors:
  # Surface / canvas
  background: "#f8f8f8"         # near-white linen page canvas
  surface: "#efede7"            # warm off-white section bands, secondary cards
  surface-warm: "#e3ddd4"       # deeper cream — editorial callout zones

  # Ink / text
  ink: "#3b3b3b"                # dominant charcoal — headings, body, nav
  ink-strong: "#000000"         # pure black for max-contrast moments
  ink-secondary: "#807d6f"      # warm taupe — secondary copy, captions
  on-primary: "#ffffff"         # text on dark CTA surfaces

  # Brand accent
  primary: "#3b3b3b"            # charcoal CTA fill — neutral brand anchor
  primary-container: "#efede7"  # linen variant for secondary CTAs

  # Terracotta warmth
  accent: "#c49c8c"             # warm terracotta — swatch highlights, badge tints
  accent-muted: "#907d6f"       # deeper clay — form borders, tag outlines

  # Borders
  border: "#908377"             # warm mid-gray for dividers and outlines
  border-soft: "#d5cfc7"        # hairline cream border for subtle separators

  # States
  focus-ring: "#3b3b3b"         # charcoal 2px ring matches brand
  text-hover: "#474747"         # ink hover lightens very slightly
  shadow-soft: "#3b3b3b"        # was rgba(59,59,59,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Petrona, Georgia, 'Times New Roman', serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  display:
    fontFamily: "Petrona, Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -0.64px
  heading-section:
    fontFamily: "Petrona, Georgia, 'Times New Roman', serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Petrona, Georgia, 'Times New Roman', serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.4px
  heading-card:
    fontFamily: "Petrona, Georgia, 'Times New Roman', serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0px
  body-large:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0px
  nav-link:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.32px
  button-ui:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-ui:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.7px
  caption:
    fontFamily: "Suisse Intl, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 32px
  button-primary-hover:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 15px 32px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 32px
  button-secondary-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 15px 32px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 15px 32px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 15px 32px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.pill}"
    padding: 14px 24px

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 9px

  swatch:
    rounded: "{rounded.pill}"
    padding: 0px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# Parachute Design System

## Overview

Parachute is a Los Angeles-born home essentials brand that understands bedding is an emotional purchase before it is a practical one. The site's opening impression is warmth delivered via restraint: a canvas of `{colors.background}` that reads as sun-bleached linen rather than clinical white, warmed further by `{colors.surface}` section bands and an undertone of terracotta (`{colors.accent}`) threading through swatches and badge accents. The photography is editorial-lifestyle — soft morning light, rumpled bedding, people at ease — and the layout defers to it completely. No gradient scrims, no neon accents, no dark-mode toggle. Just cream, charcoal, and the occasional warmth of fired clay.

The typographic pairing is the system's most considered decision: Petrona, a variable-weight Google Fonts serif with slightly drawn, humanist proportions, carries all display and headline work. Suisse Intl, a self-hosted Swiss grotesque, handles every functional UI layer — buttons, labels, captions, navigation. The gap between them is the system's entire character. Petrona's organic letterforms at 80px feel like a magazine's feature opener; Suisse Intl at 14px uppercase with 0.7px tracking delivers the clarity the commerce layer requires. The two typefaces co-exist without competing because each has a clearly bounded territory.

Shape-wise, Parachute lands between Everlane's hard corners and the pill-everything trend: buttons and inputs sit at `{rounded.lg}` (10px), a radius soft enough to feel approachable but angular enough to avoid toy-like friendliness. Newsletter email inputs go full pill (`{rounded.pill}`) against a terracotta background — a warm, confident brand moment. Product swatches are circular. Cards and image frames are edge-to-edge sharp. The result is a shape vocabulary with exactly three registers: none, soft, and pill — binary thinking with a comfortable middle option.

**Key Characteristics:**
- Linen canvas `{colors.background}` (`#f8f8f8`) with warm cream section bands `{colors.surface}` — never clinical white, never dark
- Petrona serif for all display and editorial copy — humanist, drawn, at home in a shelter magazine
- Suisse Intl sans for all UI, button, label, and caption work — clinical Swiss precision as counterweight
- Warm charcoal `{colors.primary}` (`#3b3b3b`) as the dominant ink and CTA fill — never pure black
- Terracotta `{colors.accent}` (`#c49c8c`) reserved for swatch highlights, badge tints, and accent moments — the only warm chromatic color
- `{rounded.lg}` (10px) on all interactive buttons; `{rounded.pill}` on email inputs and color swatches
- Zero gradient backgrounds — the palette stays flat, photography handles atmosphere
- 0.3s `ease` transitions on buttons and links; 0.4s `cubic-bezier(0.25, 0.46, 0.45, 0.94)` on media fade
- Full-bleed lifestyle photography as primary visual device; product photography on square uncropped tiles
- Charcoal `2px` focus ring (`{colors.focus-ring}`) matching the brand ink — no extraneous focus color

## Colors

### Primary Canvas
- **Linen White** (`{colors.background}`): The page canvas. Slightly warm at `#f8f8f8` — Parachute never uses pure white because pure white reads as cold.
- **Warm Cream** (`{colors.surface}`): Secondary section backgrounds and linen-toned card fills. The warmth steps up without introducing a hue.
- **Deep Cream** (`{colors.surface-warm}`): Editorial callout zones — slightly deeper than surface, used for feature-moment backgrounds.

### Ink & Text
- **Warm Charcoal** (`{colors.ink}`): The primary text and CTA fill. `#3b3b3b` is the chromatic decision of the system — a charcoal with a perceptible neutralness that avoids the harshness of true black.
- **Pure Black** (`{colors.ink-strong}`): Reserved for maximum-contrast moments — rarely used.
- **Warm Taupe** (`{colors.ink-secondary}`): Supporting copy, captions, metadata. `#807d6f` — simultaneously gray and warm.

### Brand Accent
- **Terracotta** (`{colors.accent}`): The only warm chromatic color in the palette. Used on swatch selection rings, badge highlights, and warm-brand surface moments. Sunbaked clay against linen.
- **Deep Clay** (`{colors.accent-muted}`): A darker terracotta-gray for form borders and badge outlines.

### Borders & States
- **Warm Mid-Gray** (`{colors.border}`): Dividers, button outlines, and structural separators — carries the warmth of the palette rather than drifting toward blue-gray.
- **Hairline Cream** (`{colors.border-soft}`): The softest structural separator — almost invisible on the linen canvas.
- **Focus Ring** (`{colors.focus-ring}`): Charcoal 2px — accessibility without introducing a foreign color into the palette.
- **Hover Charcoal** (`{colors.text-hover}`): Link and button hover deepens slightly from `{colors.ink}` to `#474747`.

## Typography

### Font Family
- **Display / Editorial**: `Petrona` via Google Fonts — a variable serif with humanist pen-drawn qualities, serving 80px heroes down to 24px card headings. Fallbacks: `Georgia, 'Times New Roman', serif`.
- **UI / Body**: `Suisse Intl` self-hosted — the site loads `SuisseIntl-Regular.woff2`, `SuisseIntl-Medium.woff2`, `SuisseIntl-Book.woff2`, `SuisseIntl-Bold.woff2`, `SuisseIntl-SemiBold.woff2`. A clean Swiss grotesque, no quirks, pure function. Fallbacks: `'Helvetica Neue', Helvetica, Arial, sans-serif`.
- **OpenType Features**: Petrona loaded as a variable font (weight axis). Suisse Intl uses non-standard intermediate weights — 450 ("Book") is the editorial body weight; 500 is nav and button labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 80px Petrona / 400 — hero banners, campaign landing heads |
| `display` | 64px Petrona / 300 — major editorial section titles |
| `heading-section` | 52px Petrona / 400 — category and feature headings |
| `heading-sub` | 40px Petrona / 400 — sub-section, product story heads |
| `heading-card` | 24px Petrona / 400 — product card names, featured tile titles |
| `body-large` | 20px Suisse Intl / 450 — large supporting copy, intro paragraphs |
| `body` | 16px Suisse Intl / 400 / 1.8 line-height — product descriptions, pdp copy |
| `nav-link` | 16px Suisse Intl / 500 — top navigation categories |
| `button-ui` | 16px Suisse Intl / 500 — all CTA labels |
| `label-ui` | 14px Suisse Intl / 700 / uppercase / 0.7px — category labels, badge text |
| `caption` | 12px Suisse Intl / 500 — metadata, review counts, helper text |

### Principles
- **Serif for warmth, sans for function**: Petrona headlines signal editorial premium; Suisse Intl beneath delivers clarity without personality-clash.
- **Weight is reserved**: Petrona stays at 300–400 — lightness implies confidence. Suisse Intl escalates to 700 only for uppercase labels; body never bolds.
- **Generous line-height on body**: 1.8 on `{typography.body}` — reading comfort at bedding-PDP length is a brand value, not an afterthought.
- **Minimal letter-spacing**: display sizes use gentle negative tracking (`-0.4px` to `-0.64px`) to compress large Petrona. UI labels get `0.32px`–`0.7px` positive tracking only at uppercase.

## Layout

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

Parachute's spacing is generous — a home goods brand has no incentive to push density. Major section bands get `{spacing.4xl}` (96px) breathing room. Product tiles sit in 16–24px gutters. Component internals use `{spacing.md}` (16px) and `{spacing.lg}` (24px) as the workhorse pair.

### Grid & Container
- Max content width: ~1440px (multiple max-width breakpoints from 1400–1536px)
- Product grid: 4-up on large desktop, reducing to 2-up at tablet and 1-up on mobile
- Hero: full-bleed photography, typography left-aligned, no persistent overlay scrim
- Editorial feature rows: asymmetric 2-column layouts (photography + text block side by side)
- Footer: dense link grid, email subscribe, social icons — stays on the warm cream surface

### Whitespace Philosophy
- **Linen breathing room**: generous vertical sections let each photography moment read without crowding
- **Photography as section separators**: full-bleed images divide content zones without rules or fills
- **No decorative clutter**: no icon sets, no pattern fills, no texture overlays — the palette and photography carry all atmosphere

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, product photography, body content |
| Hairline (Level 1) | `1px solid {colors.border-soft}` | Dividers, footer separators, nav bottom border |
| Soft Float (Level 2) | `0px 8px 16px` at ~10% charcoal (`{colors.shadow-soft}`) | Dropdown panels, cart drawer |
| Focus Ring | `0px 0px 0px 2px {colors.focus-ring}` | Keyboard-focus on interactive elements |

**Shadow Philosophy**: Parachute's surfaces are nearly flat. The rare drop shadow — for transient elements like drawers and dropdowns — uses charcoal at 10% opacity (`{colors.shadow-soft}`), matching the brand ink rather than reaching for a blue-black standard shadow. The result reads as a soft linen pressing on itself rather than a digital float. Cards and buttons carry no resting shadow; the warmth of the canvas does the work.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed photography frames, grid image tiles |
| `sm` | 4px | Badges, product count chips |
| `md` | 8px | Dropdown menu panels, small interactive elements |
| `lg` | 10px | All interactive buttons — the primary shape register |
| `pill` | 9999px | Email newsletter inputs, color swatch selectors |

The system is deliberately three-register: photography is always sharp (`{rounded.none}`), interactive buttons are softly rounded (`{rounded.lg}`), and pill forms go fully rounded (`{rounded.pill}`). Nothing in between 10px and 9999px — the gap keeps the vocabulary clean.

## Components

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

### Button variants

- **`button-primary`** — Warm charcoal (`{colors.primary}`) fill, white text, `{rounded.lg}` (10px) radius, `15px 32px` padding. The dominant CTA. Hover deepens to pure black (`{colors.ink-strong}`). 0.3s ease transition.
- **`button-secondary`** — Linen surface (`{colors.surface}`) fill, charcoal text, matching radius and padding. Used for secondary actions like "Shop Cotton Checks" alongside a primary CTA.
- **`button-ghost`** — Canvas background with charcoal text and `1px solid {colors.border}` outline; same geometry. Used for the third-option variant in stacked CTA groups.

### Cards
- **`card`** — Full photography tile, no radius, no border, no shadow. Type sits 0px below the photograph crop with 12px space before the name.
- **`card-surface`** — Warm cream background (`{colors.surface}`) for editorial callout cards; 24px internal padding; no radius.

### Inputs
- **`input`** — Pill-shaped email field (`{rounded.pill}`); background is often terracotta-adjacent on subscribe sections. 14px 24px padding, Suisse Intl body type. Focus adds a charcoal ring matching `{colors.focus-ring}`.
- Standard form inputs use `{rounded.lg}` (10px) with `{colors.border}` outline.

### Badges / Tags
- **`badge`** — White fill, charcoal border, `{rounded.sm}` (4px), 12px Suisse Intl weight 500. Used for "New" and promo flags on product photography tiles.

### Navigation
- Transparent to linen white depending on scroll state; 64px+ height; Petrona wordmark centered or left-aligned.
- Links in `{typography.nav-link}` (16px Suisse Intl weight 500). Bottom `1px solid {colors.border-soft}`.

## Do's and Don'ts

### Do
- Use Petrona at weights 300–400 for all editorial display work — lightness is the editorial signature
- Set `{colors.background}` (`#f8f8f8`) as the page canvas — Parachute does not use pure white
- Deploy `{colors.accent}` (`#c49c8c`) only for terracotta brand moments — swatches, badge tints, warm-section callouts
- Give all interactive buttons `{rounded.lg}` (10px) and email inputs `{rounded.pill}` — those are the two registered shapes
- Keep photography edge-to-edge with `{rounded.none}` — never round the photography frame
- Use Suisse Intl weight 700 uppercase at 0.7px tracking only for labels and category markers
- Maintain 1.8 line-height on body copy (`{typography.body}`) — Parachute treats reading comfort as a design value
- Match shadow tints to charcoal (`{colors.shadow-soft}`) rather than blue-black — keep the warmth in every layer

### Don't
- Don't introduce blue-cool grays or cool white surfaces — every neutral in the system has a warm undertone
- Don't use pure black (`{colors.ink-strong}`) as the default ink — `{colors.ink}` charcoal is the brand decision
- Don't apply a gradient fill to any UI surface — the palette is flat; atmosphere comes from photography
- Don't bold Petrona headlines — weight 300–400 at display sizes is confident understatement
- Don't round photography frames — sharp edges preserve the editorial print-magazine reference
- Don't use terracotta (`{colors.accent}`) on primary CTAs — it is reserved for swatch highlights and warm brand accents, not commerce actions
- Don't introduce a secondary display typeface — the Petrona/Suisse split is carefully bounded; a third face breaks the contract
- Don't tighten body line-height below 1.5 — the brand personality is spacious and calm, not dense

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column; hero type drops to 36–40px Petrona; hamburger nav; input labels collapse |
| Mobile | 480–767px | Single-column product grid; hero serif headline at 48–52px; social strip stacks |
| Tablet | 768–1023px | 2-up product grid; side-by-side editorial rows; partial nav |
| Desktop | 1024–1399px | 4-up product grid; full nav with mega-menu; 64–80px display type |
| Large Desktop | ≥1400px | Max 1440px container centered; 80px display-hero; 4-up grid with wide gutters |

### Touch Targets
- Buttons carry `15px` vertical padding on desktop — on mobile the target height is generous without adjustment
- Color swatch dots render at 32px tap area on mobile (visual 20px), maintaining WCAG 2.5.5 guidance
- Navigation collapses under 1000px to a hamburger icon; individual link rows are 56px tap height

### Collapsing Strategy
- **Navigation**: Full horizontal with mega-menu on desktop; hamburger with full-screen overlay on mobile
- **Hero type**: 80px → 52px → 40px → 36px progressively; Petrona weight stays at 400 throughout
- **Product grid**: 4-up → 2-up → 1-up; aspect ratios maintained, photography uncropped
- **Section padding**: 96px (`{spacing.4xl}`) → 48px (`{spacing.2xl}`) → 32px (`{spacing.xl}`) at each step down
- **Editorial row layouts**: side-by-side photography + text stack to full-width image above text block

### Image Behavior
- Hero photography is full-bleed at all breakpoints with art-directed portrait crops on mobile
- Product tiles maintain square aspect ratio across all breakpoints; `object-fit: cover` with no radius
- 0.4s opacity fade (`cubic-bezier(0.25, 0.46, 0.45, 0.94)`) used for lazy-load reveal and carousel transitions

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#f8f8f8`)
- Text: `{colors.ink}` (`#3b3b3b`)
- Brand accent: `{colors.accent}` (`#c49c8c`) — terracotta warmth
- Secondary text: `{colors.ink-secondary}` (`#807d6f`)
- Border: `{colors.border}` (`#908377`)
- CTA: `{colors.primary}` (`#3b3b3b`) — charcoal fills the primary action
- Surface band: `{colors.surface}` (`#efede7`)

### Example Component Prompts

- "Create a Parachute hero section. Full-bleed lifestyle photograph of a bed in morning light, no scrim. Left-aligned text column over the image: an 80px Petrona weight 400 headline in `{colors.ink}` (`#3b3b3b`), followed by a 16px Suisse Intl `{typography.body}` subhead, then a charcoal button using `{components.button-primary}` (15px 32px padding, 10px radius). Canvas is `{colors.background}` (`#f8f8f8`)."

- "Build a Parachute product card grid (4-up). Each card: edge-to-edge square photo with `{rounded.none}`, no border, no shadow. Below: 24px Petrona product name (`{typography.heading-card}`) in `{colors.ink}`, then a 12px Suisse Intl price in `{colors.ink-secondary}`, then a row of circular color swatch dots (20px, `{rounded.pill}`, 1px `{colors.border}` ring on unselected, 3px solid `{colors.focus-ring}` ring on selected)."

- "Design a Parachute email subscribe section. Background `{colors.surface-warm}` (`#e3ddd4`). A 52px Petrona heading `{typography.heading-section}` in `{colors.ink}`. Beneath, a full-pill email input (`{components.input}`) — `{rounded.pill}`, 14px 24px padding, Suisse Intl `{typography.body}`, with an inline charcoal submit button using `{components.button-primary}` inside the pill on the right end."

- "Create a Parachute navigation bar. `{colors.background}` surface, 64px height, `1px solid {colors.border-soft}` bottom border. The Parachute wordmark (set in Petrona or matched sans) left-aligned. Category links in `{typography.nav-link}` (16px Suisse Intl 500, 0.32px tracking) centered. Right cluster: Search, Account, Cart icons in `{colors.ink}`. On hover, link color shifts from `{colors.ink}` to `{colors.text-hover}`."

- "Build a Parachute badge. `{colors.background}` fill, `1px solid {colors.ink}` border, `{rounded.sm}` (4px) radius, `2px 9px` padding. 12px Suisse Intl weight 500 in `{colors.ink}` (`{typography.caption}`). Reads 'New' or 'Best Seller'."

- "Design a Parachute product detail section. Left: full-bleed square photography, `{rounded.none}`. Right: `{heading-card}` Petrona product name, `{body-large}` Suisse Intl description in `{colors.ink}`, price in `{colors.ink-secondary}`, a swatch row of `{rounded.pill}` circular color pickers (terracotta `{colors.accent}` ring on selected), then a full-width `{components.button-primary}` CTA ('Add to Cart', 10px radius, charcoal fill)."

### Iteration Guide

1. Start on `{colors.background}` (`#f8f8f8`) linen canvas. Never reach for pure white or a cool-toned surface.
2. All editorial headlines use Petrona at weight 400 or lighter — the serif warmth is the visual signature.
3. All UI, buttons, labels, and nav use Suisse Intl — those two typefaces own their territory, don't cross them.
4. The primary CTA is charcoal (`{colors.primary}` `#3b3b3b`) — avoid terracotta on commerce actions.
5. Photography is always edge-to-edge with `{rounded.none}` — never crop or round the photography frame.
6. Interactive buttons: `{rounded.lg}` (10px). Email inputs: `{rounded.pill}`. Nothing in between.
7. Terracotta (`{colors.accent}`) is a warmth accent only — swatch selection rings, badge tints, subscribe-section backgrounds.
8. Keep body copy (`{typography.body}`) at 1.8 line-height — spacious reading is a brand value.

---

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