Ember

Developer SaaS heat

Crisp off-white surfaces with a single heat-orange brand color and granular black/white alpha scales. Status-indicator palette (forest/honey/crimson/bluetron/amethyst) reserved for state, not decoration. Optimized for documentation, code samples, and quickstart flows.

Palette

Install the full kit

Drops 4 doc/token files plus 7 starter components.

DESIGN.md

# Ember — Design Language

> Developer SaaS. Off-white surfaces, heat-orange brand, status-indicator accents, and an alpha-token scale so granular it doubles as a vocabulary.

## Identity

Ember design serves a developer audience reading docs at 10am after a bad deploy. Surfaces are off-white (`#f9f9f9` base, `#ffffff` raised), the type is near-black (`#262626`), and a single heat-orange (`#fa5d19`) carries CTAs and active states. Status colors are reserved for indicators (success-forest, warning-honey, error-crimson, info-bluetron, special-amethyst) — never decoration.

The language's distinguishing technical detail is the **alpha-token scale**: instead of mixing grays, every shadow, border, hover overlay, and divider draws from a granular `--black-alpha-*` (and `--white-alpha-*`) scale. New "grays" never enter the codebase.

## Palette

### Surface scale

| Token | Value | Role |
|-------|-------|------|
| `--background-base` | `#f9f9f9` | Page surface |
| `--background-lighter` | `#fbfbfb` | Subtle highlight, alt rows |
| `--surface` | `#ffffff` | Cards, panels |
| `--surface-raised` | `#ffffff` | Floating elements |

### Borders & illustrations

| Token | Value |
|-------|-------|
| `--border-faint` | `#ededed` |
| `--border-muted` | `#e8e8e8` |
| `--border-loud` | `#e6e6e6` |
| `--illustrations-faint` | `#ededed` |
| `--illustrations-muted` | `#e6e6e6` |
| `--illustrations-default` | `#dbdbdb` |

### Brand heat

The heat scale is the only color the brand owns:

| Token | Value | Use |
|-------|-------|-----|
| `--heat-100` | `#fa5d19` | Solid — primary CTA, code-block accent |
| `--heat-90` | 90% alpha | Hover on solid CTA |
| `--heat-40` | 40% alpha | Focus ring |
| `--heat-20` | 20% alpha | Tag chip background |
| `--heat-16` | 16% alpha | Subtle highlight |
| `--heat-12` | 12% alpha | Even subtler highlight |
| `--heat-8` | 8% alpha | Hover overlay |
| `--heat-4` | 4% alpha | Code-block edge glow |

### Status accents

Each maps to a single semantic role. Don't repurpose.

| Token | Value | Use |
|-------|-------|-----|
| `--accent-forest` | `#42c366` | Success, online, ready |
| `--accent-honey` | `#ecb730` | Warning, pending |
| `--accent-crimson` | `#eb3424` | Error, destructive |
| `--accent-bluetron` | `#2a6dfb` | Info, links, primary action ALT |
| `--accent-amethyst` | `#9061ff` | Beta, special, premium |

### Alpha scales

The foundation of every shadow, border, hover overlay, and divider:

| Token | Use case |
|-------|----------|
| `--black-alpha-1 → 8` | Hairline borders, ultra-subtle bg tints |
| `--black-alpha-12 → 24` | Card borders, hover overlays, inset shadows |
| `--black-alpha-40 → 72` | Body text on light bg variants, captions |
| `--black-alpha-88` | Near-foreground, used on tinted surfaces |
| `--white-alpha-56 → 72` | Overlay text on imagery |

Reach for these before introducing a new gray.

### Semantic aliases

| Token | Maps to |
|-------|---------|
| `--background` | `var(--background-base)` |
| `--foreground` | `var(--accent-black)` (`#262626`) |
| `--card` | `var(--surface)` |
| `--primary` | `var(--heat-100)` |
| `--accent` | `var(--heat-100)` |
| `--muted-foreground` | `var(--black-alpha-56)` |
| `--ring` | `var(--heat-40)` |
| `--destructive` | `var(--accent-crimson)` |

## Typography

### Families

| Family | Role |
|--------|------|
| Inter Variable (Suisse substitute) | Body, headings, UI |
| Geist Mono | Code blocks, terminal output, route signatures, SDK names |

### Scale

| Tier | Size | Weight | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(48px, 5vw, 80px)` | 600 | `-0.02em` | `1.0` |
| H1 | `clamp(36px, 4vw, 56px)` | 600 | `-0.015em` | `1.1` |
| H2 | `clamp(24px, 2.5vw, 36px)` | 600 | `-0.01em` | `1.2` |
| H3 | `20px` | 600 | `-0.005em` | `1.3` |
| Body large | `17px` | 400 | `0` | `1.6` |
| Body | `15px` | 400 | `0` | `1.6` |
| Body small | `13px` | 400 | `0` | `1.5` |
| Eyebrow | `11–12px` mono uppercase, `tracking-[0.08em]` |
| Code | `14px` mono, line-height `1.55` |

## Spacing & geometry

### Container

```html
<div class="mx-auto max-w-[1112px] px-6">
```

`--container-width: 1112px` is the canonical doc width.
`--container-width-padding: 1144px` includes horizontal padding.

### Radius

`6px` baseline. Inputs, cards, buttons all share it. No pills, no square corners.

### Borders

Three weights, all hairline (1px):

| Token | Use |
|-------|-----|
| `--border-faint` (`#ededed`) | Quiet dividers, list rows |
| `--border-muted` (`#e8e8e8`) | Default card borders |
| `--border-loud` (`#e6e6e6`) | Emphasized — input focus, active tab |

## Code blocks

The signature surface. Recipes:

### Layout
- `bg-card` (`#ffffff`) — never tinted
- `border border-[color:var(--border-muted)]`
- `rounded-md` (`6px`)
- Tab strip on top: active tab has a 2px bottom border in `--heat-100`
- Copy button: top-right, ghost variant, hover becomes `--heat-100`
- Line numbers: `text-[color:var(--black-alpha-40)]`
- Selected line bg: `--heat-8`
- Filename badge: bottom-left, mono, `text-[color:var(--black-alpha-56)]`

### Active tab indicator
```tsx
<button className="relative px-4 py-2 text-sm">
  Curl
  {isActive && (
    <span className="absolute inset-x-2 -bottom-px h-[2px] bg-[color:var(--heat-100)]" />
  )}
</button>
```

## Motion

- All transitions: 150ms ease-out.
- No transforms. No parallax. No autoplay video.
- Code tab switches: 150ms opacity fade between panes.
- Marquee logos: continuous 30s+ — comfortable to read.

## Voice & copy

- Direct, technical, second-person, doc-aware.
- Code-first: every claim is followed by a code sample.
- CTAs: imperative — *"Get started"*, *"Read the docs"*, *"Try the API"*, *"Copy the curl"*.
- Headlines lean to capability: *"Crawl any site, get structured data."* / *"Turn any URL into clean Markdown."*
- Status labels stay status-shaped: *"Live"*, *"Beta"*, *"Coming soon"*.

## Component recipes

### Hero developer
Split-pane on desktop:
- Left: eyebrow + headline + body + dual CTAs (`Get started` primary heat, `Read docs` ghost).
- Right: a code tabs block with `curl` / `python` / `js` showing the same operation.

### Pricing card
- Card bg `--surface`, border `--border-muted`, radius `6px`, padding `32px`.
- Top: plan name (h3) + price (display-scale, weight 600).
- Middle: feature list with forest-color check marks.
- Bottom: full-width CTA — `--heat-100` for the highlighted tier, ghost for others.

### Status badge
```tsx
<span className="inline-flex items-center gap-1.5 rounded-md bg-[color:var(--heat-12)] px-2 py-0.5 text-xs font-medium text-[color:var(--heat-100)]">
  <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--accent-forest)]" />
  Live
</span>
```

### Marquee logos
Continuous, 30s+, mask-fade on edges using `--white-alpha-*`. Grayscale logos at `--black-alpha-40`.

## Anti-patterns

- ❌ Pure white `#ffffff` as the page bg — use `--background-base` (`#f9f9f9`).
- ❌ `rounded-full` (no pills); `6px` everywhere.
- ❌ Heat color on body text or large surfaces.
- ❌ Status accents as decoration (forest as a divider, honey as a bg).
- ❌ Raw `rgb(0,0,0,…)` — use the alpha scale.
- ❌ Drop shadows. Elevation comes from `--black-alpha-12` borders.
- ❌ Transforms on hover.

## Accessibility

- `--heat-100` on `--background-base` passes AA at 18px+. At body-size, prefer the bluetron (`--accent-bluetron`) for inline links.
- Status badge: don't rely on color alone — include the textual label ("Live", "Beta").
- Focus ring: `--heat-40` (40% heat) at 2px with 2px offset.
- Code blocks need `aria-label="Code sample"` and a real `<pre><code>` underneath.

## What ships with the pack

- `tokens.css` — full Ember token set scoped to `[data-designlang="ember"]`. Surface scale, heat alpha scale, status accents, alpha scales (black and white), semantic aliases.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: `hero-developer`, `code-tabs`, `developer-quickstart`, `pricing-cards`, `faq-accordion`, `agent-connect`, `infrastructure-grid`, `performance-benchmarks`, `use-cases-tabs`, `header-light`, `footer-light`, `logo-marquee`, `blog-grid`, `cta-dot-art`, `promo-banner`, `testimonials-marquee`, `how-stepped`.
- Foundations — `Button`, `Card`.

Components (17)