Voyager

Adventure product showcase

Cinematic stone palette with a single golden brand accent. Product-marketing patterns favor full-bleed imagery, oversized product showcases, pill CTAs, and uppercase mono labels for measurements.

Palette

Install the full kit

Drops 4 doc/token files plus 4 starter components.

DESIGN.md

# Voyager — Design Language

> Automotive product marketing. Cinematic stone palette anchored by one golden brand color. The page is a stage; the vehicle is the only star.

## Identity

Voyager design is a stagecraft language. Surfaces are deliberately neutral — warm whites and deep stones — so product photography and the single golden brand color carry every gram of visual weight. There is no decoration. Type sits tight and confident with negative letter-spacing; CTAs are pill-shaped and emphatic. Sections breathe at `py-32` minimum because confidence wears whitespace well.

The design philosophy resists everything a "modern SaaS landing page" usually does: no gradients on text, no glass-morphism, no drop shadows, no decorative SVG flourishes. Depth comes from the contrast between the vehicle imagery and the quiet stone palette around it, not from added effects.

## Palette

### Light mode (default)

| Token | Value | Role |
|-------|-------|------|
| `--background` | `oklch(1 0 0)` | Page surface |
| `--foreground` | `oklch(0.145 0 0)` | Body copy, headlines |
| `--card` | `oklch(1 0 0)` | Cards inherit the page |
| `--primary` | `oklch(0.205 0 0)` | Near-black; default CTA |
| `--primary-foreground` | `oklch(0.985 0 0)` | Text on primary |
| `--secondary` | `oklch(0.97 0 0)` | Secondary CTA background |
| `--muted` | `oklch(0.97 0 0)` | Subtle fills, dividers |
| `--muted-foreground` | `oklch(0.556 0 0)` | Captions, secondary text |
| `--accent` | `oklch(0.97 0 0)` | Hover fills |
| `--brand` | `hsl(40 100% 50%)` | Adventure yellow |
| `--brand-foreground` | `hsl(40 100% 12%)` | Text on yellow |
| `--border` | `oklch(0.922 0 0)` | Hairlines |
| `--ring` | `oklch(0.708 0 0)` | Focus ring |

### Dark mode

| Token | Value | Notes |
|-------|-------|-------|
| `--background` | `oklch(0.145 0 0)` | Deep stone |
| `--foreground` | `oklch(0.985 0 0)` | Near-white |
| `--card` | `oklch(0.205 0 0)` | Slightly elevated |
| `--primary` | `oklch(0.922 0 0)` | Inverted CTA |
| `--border` | `oklch(1 0 0 / 10%)` | 10% white hairlines |

### Brand usage

`--brand` is the only saturated color. Three rules:

1. **One brand-color element per fold.** A pill CTA, a small accent stroke, or a single highlighted word. Never two.
2. **Pair with `--brand-foreground` for legibility.** Yellow + near-black, never yellow + white.
3. **Never paint a section background with brand.** A 40px brand stripe is fine; a 600px brand panel is not.

## Typography

Single family: Inter Variable. No serif. No second sans.

### Scale

| Token / class | Size | Weight | Tracking | Line-height | Use |
|--------------|------|--------|----------|-------------|-----|
| Hero display | `clamp(44px, 6vw, 96px)` | 600 | `-0.025em` | `0.96` | One per page |
| H1 / section title | `clamp(32px, 4vw, 56px)` | 600 | `-0.02em` | `1.05` | First heading per section |
| H2 | `clamp(24px, 3vw, 36px)` | 600 | `-0.015em` | `1.1` | Subsections |
| H3 | `20px` | 600 | `-0.01em` | `1.15` | Card titles |
| Body large | `17px` | 400 | `0` | `1.5` | Hero body, lead paragraphs |
| Body | `15px` | 400 | `0` | `1.55` | Default running text |
| Body small | `13px` | 400 | `0` | `1.5` | Captions, legal |
| Eyebrow | `11px` | 500 | `0.14em` | `1` | Above headlines, uppercase |
| Mono label | `11px` | 500 | `0.08em` | `1` | Measurements: kWh, mph, mi |

### Utility classes

```css
.voyager-display { font-weight: 600; letter-spacing: -0.025em; line-height: 0.96; }
.voyager-headline { font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
```

## Spacing & geometry

### Spacing scale

| Token | Value | Use |
|-------|-------|-----|
| `space-2` | `8px` | Inline gap between icon + label |
| `space-3` | `12px` | Default chip gap |
| `space-4` | `16px` | Card internal padding (sm) |
| `space-6` | `24px` | Container gutter (mobile) |
| `space-8` | `32px` | Card padding, item gap |
| `space-12` | `48px` | Section padding (sm) |
| `space-24` | `96px` | Section vertical (default) |
| `space-32` | `128px` | Section vertical (md+) |
| `space-40` | `160px` | Hero overhead |

### Container

```html
<div class="mx-auto max-w-[1480px] px-6 md:px-12">
```

- Max-width `1480px`. Never wider.
- Gutters `24px` mobile, `48px` desktop.
- Edge-to-edge full-bleed only for hero carousels and image galleries.

### Radius

| Element | Radius |
|---------|--------|
| Buttons, chips, pills | `9999px` (`rounded-full`) |
| Cards | `0.625rem` (`rounded-[10px]`) |
| Inputs | `0.625rem` |
| Hero containers | `0` (full-bleed) |
| Image cards in hero | `1rem` (`rounded-2xl`) |

## Motion

| Pattern | Easing | Duration |
|---------|--------|----------|
| Carousel cross-fade | `cubic-bezier(0.4, 0, 0.2, 1)` | 700ms |
| CTA hover color | `ease-out` | 200ms |
| Section entry | none (no scroll reveals) | n/a |
| Carousel auto-advance | n/a | 7000ms interval |

Custom easings (from `@theme`):

```css
--ease-voyager-attract: cubic-bezier(0.4, 0, 0.2, 1);
--ease-voyager-emphasized: cubic-bezier(0.2, 0, 0, 1);
```

**Never** animate scale, rotation, or skew. **Never** add scroll-reveal fades to body sections.

## Voice & copy

- Confident, declarative, short. No exclamations.
- Headlines are full sentences with a period: *"Electric vehicles designed for adventure."*
- CTAs are imperative verbs: *"Explore"*, *"Design your R1T"*, *"View offer"*, *"Save your spot"*.
- Measurements are always mono and use shortcodes: `420 mi`, `850 hp`, `0–60 in 3.0s`.
- Avoid "discover", "experience", "unlock", "elevate" — generic SaaS vocabulary.

## Component recipes

### Hero composition
1. Full-bleed `HeroCarouselAuto` (90svh) at the top of the page.
2. `VehiclePillars` (Technology / Performance / Design tabs) immediately below.
3. `PromoStrip` (limited-time offer with brand-color stripe) before the footer.

### Mid-page rhythm
- Stone section → image-led section → stone section → image-led section.
- Two consecutive image-led sections need at least 96px of paper between them.

### Footer
- Five-column dark footer with brand wordmark, three link columns, newsletter form, social row.
- One brand-color accent: the newsletter submit button.

## Anti-patterns

- ❌ Drop shadows under cards (`shadow-md`, `shadow-lg`).
- ❌ Glass morphism (`backdrop-blur` with semi-transparent fills).
- ❌ Brand color as a full-section background.
- ❌ Serif type — even italic emphasis. This is a sans-only language.
- ❌ Yellow text on white. Always pair brand with `--brand-foreground`.
- ❌ Auto-advancing carousels faster than 6s or slower than 10s.
- ❌ Two CTAs of the same weight side by side. Use one primary + one ghost.

## Accessibility

- Focus rings: `outline-2 outline-offset-2 outline-[color:var(--ring)]`.
- Reduce motion: respect `prefers-reduced-motion` by disabling carousel auto-advance and cross-fades (snap-cut instead).
- Brand yellow + brand-foreground passes AA at 18px+. Don't use brand color on body-size text.
- Hero carousel announces slide changes to screen readers via `aria-live="polite"`.

## What ships with the pack

- `tokens.css` — Tailwind v4 `@theme inline` + scoped vars on `[data-designlang="voyager"]` with light + dark.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- `hero-carousel-auto.tsx` — full-bleed cross-fading hero (90svh, 7s auto-advance, dual CTAs, arrows, dot pagination).
- `vehicle-pillars.tsx` — tabbed pillar showcase with gradient product surface.
- Foundations — `Button`, `Card` (shared across all languages).
- Recommended pairings from the wider library: `Header` (a light variant), any `Footer`, `PromoBanner` for the limited-offer strip.

Components (2)