Untitled Design System

### Spacing System

• Base unit: 8px (with 2/4/12px steps for tight inline gaps).

• Tokens (front matter): {spacing.xxs} (2px) · {spacing.xs} (4px) · {spacing.sm} (8px) · {spacing.md} (12px) · {spacing.lg} (16px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.section} (96px).

• Universal section rhythm: every page in the set uses {spacing.section} (96px) as the vertical gap between major content blocks. Card grids use {spacing.lg} (16px) gutters; in-card padding sits at {spacing.xl} (24px) for feature cards and {spacing.lg} (16px) for store extension cards.

### Grid & Container

• Max width: ~1240px content area at desktop with 24px gutters (~48px at ultrawide). Hero command-palette mockups run wider (~1080px) with the page background extending to full bleed.

• Store extension grid: 2-up at desktop with rows of 2 cards stacked, collapsing to 1-up at mobile. Each card is a horizontal layout with a large square app icon at the left and copy + Install button at the right.

• Pricing tier grid: 3-up at desktop (Free / Pro / Pro+Advanced AI), collapsing to 1-up stacked at mobile.

• Featured extension card grid: 3-up at desktop in the "Featured" row at the top of the store page.

• Comparison table: full-width on the pricing page below the tier cards — 5-column table (Free / Pro / Advanced AI / Custom for Teams / Enterprise) with feature rows.

• Footer: 6-column horizontal link grid at desktop, collapsing to 2-up at tablet and 1-up at mobile.

### Whitespace Philosophy

Whitespace is generous and the canvas is uninterrupted. Sections sit 96px apart with no decorative dividers between them — the dark canvas continues edge-to-edge from hero to footer. Inside a section, content is left-aligned in a tight column, with command-palette mockup imagery occupying the right 50–60% of the band on home-page feature rows. The signature decorative element — the red diagonal-stripe gradient band — only appears in the very first hero band; from the second section down, the page is monochrome dark.

### Border Radius Scale

| Token | Value | Use |

|---|---|---|

| {rounded.none} | 0px | Hero band, primary nav, footer, full-bleed structural surfaces |

| {rounded.xs} | 4px | Keycap glyphs, badge-pro chips, small inline tags |

| {rounded.sm} | 6px | Command-palette row, inline buttons, micro chips |

| {rounded.md} | 8px | Standard buttons, text inputs, store search bar, app-icon tiles, store extension card |

| {rounded.lg} | 10px | Feature card, command-palette mockup card, pricing tier card |

| {rounded.xl} | 16px | Large hero command-palette mockup container, oversized feature panel |

| {rounded.full} | 9999px | Pill-tab chips, avatar circles |

The radius vocabulary clusters tightly between 4 and 16px, with most chrome at 6–10px. The system never goes flat (0px) on cards and never above 16px except for fully-rounded pills.

### Photography Geometry

There is no traditional photography. Visual elements are limited to:

• Command-palette mockups — full-fidelity Raycast UI screenshots at 16:9 or 4:3 aspect inside {rounded.xl} (16px) containers.

• App icon tiles — 48–64px square at {rounded.md} (8px), displaying real app icons.

• Avatar circles — 32–40px at {rounded.full} for in-extension author attribution.

• Hero stripe gradient — full-bleed wash with no aspect ratio.

### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| ultrawide | 1920px+ | Content max-width holds at 1240px; outer gutters grow to ~80px |

| desktop-large | 1440px | Default — 3-up pricing grid, 2-up store extension grid |

| desktop | 1280px | Same with narrower outer gutters |

| desktop-small | 1024px | 3-up pricing collapses to 2+1; primary nav remains horizontal |

| tablet | 768px | Pricing → 1-up stacked; primary nav becomes hamburger drawer |

| mobile | 480px | Single-column everything; hero {typography.display-xl} scales 64px → ~36px |

| mobile-narrow | 320px | Section padding tightens to 48px |

### Touch Targets

All interactive elements meet WCAG AA at 36px+. {component.button-primary} and {component.button-tertiary} sit at 36px height with 16px padding. {component.text-input} sits at 36px. {component.store-search-bar} sits at 44px (above AAA). {component.pill-tab} is ~24–28px height with 10px padding extending to 36–40px tappable via inline padding (above AA but below AAA — intentional, the chips are compact). {component.install-button} sits at ~32px height with 14px padding.

### Collapsing Strategy

• Primary nav: desktop horizontal cluster → tablet hamburger drawer at 768px. The white "Download" CTA stays visible at every breakpoint.

• Hero command-palette mockup: desktop full-fidelity 2-column with copy at left + mockup at right → tablet stacks vertical with mockup below copy → mobile mockup scales down to ~80% width.

• Store extension grid: 2-up → 1-up at tablet.

• Pricing tier grid: 3-up → 2+1 at desktop-small → 1-up stacked at tablet.

• Comparison table: desktop full 5-column → tablet horizontal scroll → mobile vertical card stack with one tier per card.

• Footer: 6-up link columns → 3-up at tablet → 2-up at mobile-landscape → 1-up at mobile.

• Section padding: {spacing.section} (96px) desktop → 64px tablet → 48px mobile.

• Hero headline: {typography.display-xl} (64px) at desktop, scaling 56px / 44px / 36px down the breakpoint stack.

### Image Behavior

The only "imagery" in the system is in-product Raycast UI screenshots and small app-icon assets:

• Command-palette mockups scale fluidly with the container; the in-product UI itself is responsive and re-renders for each breakpoint.

• App-icon tiles stay at 48–64px fixed size at every breakpoint; they tile in flexible rows that wrap at narrower widths.

• Hero stripe gradient stays at the top of the hero band at every breakpoint with the stripe angle preserved.

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.

2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.md}) — do not paraphrase.

3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.

4. Add new variants as separate component entries (-pressed, -disabled, -active) — do not bury them inside prose.

5. Default body to {typography.body-md} (16px / 400 / 1.6); reach for {typography.body-strong} for emphasis; reserve {typography.display-xl} strictly for the hero band.

6. Keep {colors.primary} (white CTA pill) scarce per viewport — at most one solid white pill per fold.

7. When introducing a new component, ask whether it can be expressed with the existing surface-ladder + 8px-radius + ss03-Inter vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.

• Mobile screenshots not captured — responsive behavior synthesizes Raycast's mobile pattern (hamburger drawer, single-column grid, hero downscale) from desktop evidence and the breakpoint stack.

• Hover states not documented by system policy. Raycast's in-product app has rich hover behavior on command-palette rows that this document doesn't capture.

• In-product app chrome (the actual Raycast launcher running on macOS) is referenced in marketing screenshots but not documented as a separate UI system here. The marketing site is documented; the in-product app surface is its own design system.

• Dark mode is the only mode — no light variant exists in the captured surfaces.

• Form validation states beyond the focused-input border treatment are not present in the captured surfaces.

• Authenticated chrome (account dashboard, billing settings, team management) not in the captured pages.