Lattice

Warm-grey editorial AI brand

Warm-grey paper surface with cream raised cards and a single lime accent — read like a print monograph that decided to ship as a website. Signature bracket-corner card frames replace borders, a segmented glass-pill nav splits links from wordmark from CTA, scroll-driven panels flip to inverse, and a deep navy radial-gradient + film-grain CTA panel anchors the page. Editorial serif display at weight 400 with mono uppercase eyebrows.

Palette

Install the full kit

Drops 4 doc/token files plus 6 starter components.

DESIGN.md

# Lattice — Design Language

> Warm cream-grey editorial AI brand. Bracket-corner card frames, glass-pill nav segments, dot-mesh constellations, isometric stack diagrams, and a deep-navy CTA panel with film-grain noise.

## Identity

Lattice is the language of a serious AI infrastructure brand that wants to read like a piece of print editorial. The page sits on a warm grey `#d7d7d0` — not white, not paper — with warm near-black `#1a1614` ink on top. Cream `#f4f4e7` is reserved for type that lands on dark surfaces. A single lime/yellow `#e2e67d` is the brand accent; a warmer `#ff5a1f` orange shows up exactly once per page (a drop cap, a status dot, a chart line).

The signature treatment is the **bracket-corner frame**: four 8×8px L-shaped ticks sitting at the corners of cards, ghost buttons, and footer columns. It reads as a draftsman's crop mark and quietly differentiates the language. The second signature is the **glass-pill nav**, where the left links, the center wordmark, and the right CTAs each ride in their own semi-transparent backdrop-blurred pill. The third is the **isometric stack diagram** that reveals layer-by-layer as you scroll — a dashed-stroke parallelogram per layer, with a dot constellation marking "agents" on the middle slab.

Type is a hard pairing of an editorial serif display (Test Signifier or near-equivalent) and an 11px uppercase tracked mono eyebrow. Sans is only used for UI body copy and small labels. Italics inside the serif headlines are intentional and load-bearing — they isolate the verb in the headline.

## Palette

### Default (warm grey paper)

| Token | Value | Role |
|-------|-------|------|
| `--background` | `#d7d7d0` | Page surface |
| `--foreground` | `#1a1614` | Body, headings |
| `--card` | `#fdfcfa` | Raised card surface |
| `--muted` | `#ececdf` | Muted band / inactive card |
| `--muted-foreground` | `#1a161499` | 60% fg — captions, secondary |
| `--primary` | `#1a1614` | Solid filled CTA |
| `--primary-foreground` | `#f4f4e7` | Type on primary |
| `--secondary` | `#f4f4e7` | Cream surface on dark |
| `--accent` | `#e2e67d` | Lime/yellow signature accent |
| `--accent-warm` | `#ff5a1f` | Warm orange — one moment per page |
| `--border` | `#1a16141a` | 10% fg hairline |
| `--border-strong` | `#1a161433` | 20% fg — bracket marks, table rules |
| `--nav-bg` | `#cfcfc8bd` | Glass-pill nav segment |
| `--cta-bg` | `#0d1218` | Deep navy CTA panel |
| `--ring` | `#1a1614` | Focus ring |

### Dark mode (`data-mode="dark"`)

| Token | Value |
|-------|-------|
| `--background` | `#1a1614` |
| `--foreground` | `#f4f4e7` |
| `--card` | `#1f1b18` |
| `--muted` | `#2a2522` |
| `--muted-foreground` | `#f4f4e7a3` |
| `--border` | `#f4f4e71f` |

### CTA gradient

The dark CTA panel uses a radial gradient seeded at the top center:

```
radial-gradient(120% 120% at 50% 0%, #1a2330 0%, #0d1218 70%, #0a0e14 100%)
```

Applied via `.lattice-cta-surface`. Always paired with `.lattice-noise` to add a subtle film-grain.

## Typography

### Families

| Family | Token | Role |
|--------|-------|------|
| Editorial serif | `--font-serif` (Test Signifier, Noto Serif fallback) | Display, headlines, drop caps, footer link labels |
| System sans | `--font-sans` (Geist, system-ui) | UI body, role names, salaries, captions |
| System mono | `--font-mono` (Geist Mono, ui-monospace) | Eyebrows, measurements, axis labels, status pills |

The display serif is always weight `400`. Don't bump it to `500`/`600` — the language relies on the optical greyness of a single weight.

### Scale

| Tier | Size | Family | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(44px, 6vw, 64px)` | serif `.lattice-display` | -0.025em | 1.05 |
| H2 | `clamp(36px, 4vw, 54px)` | serif | -0.025em | 1.05 |
| H3 / card title | `26–28px` | serif | -0.015em | 1.1 |
| Editorial lead | `19–24px` | serif | -0.005em | 1.35–1.45 |
| Body | `13–14px` | sans | 0 | 1.5 |
| Eyebrow | `11px` | mono uppercase | 0.08em | 1 |
| Measurement / axis | `9–11px` | mono uppercase | 0.05–0.1em | 1 |

### Drop cap

The first paragraph of a manifesto/editorial section opens with a bracketed orange drop cap:

```tsx
<span className="float-left mr-2 mt-1 inline-block border border-fg/20 px-2 py-1 lattice-display text-[42px] leading-none text-[var(--accent-warm)]">
  P
</span>
```

This is the **one** orange moment.

## Geometry

### Container

```html
<div className="mx-auto grid w-full max-w-[1512px] grid-cols-12 gap-6 px-6 md:px-[120px]">
```

`max-w-[1512px]`, 12-col grid, `gap-6`. Side gutters jump from `24px` to a generous `120px` at `md`. Lattice has wide page chrome — not narrow type columns.

### Radius

| Token | Value |
|-------|-------|
| `--radius` / `--radius-md` | `0.25rem` (4px) |
| `--radius-sm` | `0.125rem` |
| `--radius-lg` | `0.5rem` |
| `--radius-pill` | `9999px` |

**Cards are nearly square.** `0.25rem` is the default voice. CTAs are pills (`9999px`). Never use `0.75rem` / `rounded-xl` — it breaks the language.

### Bracket frame

The signature card/button treatment. Four 8×8px L-shaped strokes at the corners, drawn at 1px in `--border-strong`. Implemented via `.lattice-bracket` + two extra spans (`.lattice-bracket-bl`, `.lattice-bracket-br`). Use on:

- Ghost buttons next to a primary pill CTA
- Footer columns
- Manifesto / agent / team cards
- Scroll-driven panel cards

Cards with bracket frames have **no background border** — only the four corner ticks. The eye fills in the rectangle.

### Glass pill

Semi-transparent `#cfcfc8bd` with `backdrop-filter: blur(14px)`. Always exactly `46px` tall. Used as the left links pill, center wordmark pill, right CTA pill in the nav — three separate segments, not one.

## Motion

| Pattern | Easing | Duration |
|---------|--------|----------|
| CTA color/opacity hover | default | 150ms |
| Active card swap (scroll-driven) | default | 500ms |
| Isometric slab fade-in | default | 600ms |
| Image hover scale | default | 500ms (max scale 1.02) |

No spring physics, no `scroll-snap`, no transforms beyond `scale-[1.02]` and gentle translates.

## Voice & copy

- Manifesto-first. Sections open with a numeric eyebrow (`01 · CAPABILITIES`) and a serif title.
- Headlines use italicized verbs to isolate the action: *"Be present where it counts."*
- Body copy stays compact — `max-w-[420px]` to `max-w-[560px]` so paragraphs read like print columns.
- CTAs are pill buttons with short imperatives: *"Book a demo"*, *"Read research"*, *"Apply"*.
- Status pills (e.g. `WE'RE HIRING` with a green dot) are uppercase mono on the dark `fg` filled pill.

## Component recipes

### Hero
- Two-column grid. Left = serif display + body + `[primary pill] + [bracket-frame ghost link]`. Right = `<ConstellationSvg>` (sparse dot-and-line mesh).
- No image. The constellation IS the visual.

### Scroll-driven stack
- Left column: a vertical stack of bracket-frame cards (`max-w-[420px]`). The active card flips to `bg-fg text-cream` as it intersects viewport center.
- Right column: a sticky isometric SVG diagram (`top-[15vh]`, `h-[70vh]`). Slabs reveal layer-by-layer based on the active index. The middle slab shows a dot cluster (agents).

### Glass-pill nav
- Three independent `.lattice-glass-pill` pills, `absolute`-positioned at left / center / right.
- Center pill carries the wordmark + brand mark icon.
- Right pill always ends with a solid `bg-fg text-cream` pill CTA.

### Deep CTA panel
- Full-width `.lattice-cta-surface` (radial navy gradient) + `.lattice-noise` overlay.
- Centered serif headline with an inline `<em>` italicized verb.
- Dual pill CTAs: solid cream + cream-border ghost.

### Manifesto
- Two-column grid. Left = axis chart SVG (orange rising curve crossing a flat sage line). Right = bracketed orange drop cap + serif body paragraphs.

### Bracket-frame footer
- Multi-column grid of footer-link columns. Each column is a `.lattice-bracket` card. Status column carries the `WE'RE HIRING` green-dot pill and a city eyebrow.
- A floating large brand mark sits in the bottom-right.

## Anti-patterns

- ❌ Pure white background (`#fff`). Always warm grey `#d7d7d0` — never `bg-white`.
- ❌ `rounded-lg`/`rounded-xl` on cards. Cards are nearly square (`0.25rem`).
- ❌ Hairline `border` boxes on cards. Use the bracket frame instead.
- ❌ More than one orange `--accent-warm` element per page.
- ❌ Bold serif (`font-bold`). The display serif is weight 400, always.
- ❌ A single full-width nav bar. The nav is segmented into 3 glass pills.
- ❌ Filling the CTA panel with a flat color. It is always the radial navy + noise.
- ❌ Sans-serif display headlines. Display = serif always.

## Accessibility

- The warm-grey `#d7d7d0` ↔ near-black `#1a1614` pair passes AA at body sizes.
- Glass-pill nav needs `backdrop-filter` fallback — at low contrast OS settings, the pill drops the blur and gets a solid `--nav-bg`.
- Bracket frames are decorative — never the sole indicator of a button. Pair with hover state.
- Constellation SVGs carry `aria-hidden`.
- Scroll-driven stack panels mark non-active state with a real `aria-current` flag — not just visual contrast.
- `prefers-reduced-motion`: snap the scroll-driven active-index swap (drop the 500ms transition).

## What ships with the pack

- `tokens.css` — full token set scoped to `[data-designlang="lattice"]`, including `.lattice-bracket`, `.lattice-glass-pill`, `.lattice-noise`, `.lattice-cta-surface`, `.lattice-eyebrow`, `.lattice-display`, `.lattice-divider-dashed`.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Sections: `hero-mesh`, `stack-scroll-isometric`, `nav-glass-pills`, `cta-noise-gradient`.
- Foundations — `Button`, `Card`.

Components (4)