Aurora

Dark developer community

True-black surface with warm-grey card elevation and a once-per-page animated 7-color spectrum strip. System-sans typography at a 15px base, mono for code, smooth scroll. Built for docs read at night.

Palette

Install the full kit

Drops 4 doc/token files plus 8 starter components.

DESIGN.md

# Aurora — Design Language

> Dark data-platform community SaaS. True-black surface, warm-grey elevation, system-sans typography at 15px, and a once-per-page animated community rainbow.

## Identity

Aurora's language is built for developers reading docs at night. The page is `oklch(0 0 0)` true black with `oklch(0.97 0 0)` near-white text. Elevation is achieved with a single warm-grey `oklch(0.12 0 0)` surface for cards — not by lightening the background. The single piece of color in the entire language — and the brand signature — is a 7-color "community rainbow" gradient strip that pans horizontally over 6 seconds. It's used once per page, on the community section divider or the active nav indicator. Nowhere else.

Type is system sans (`ui-sans-serif`) at 15px / 1.5 line-height — direct, technical, no display face. Headings carry tracking but no extra weight. Selection highlights flip to inverse for snap. Smooth scroll on `html` is wired by default.

## Palette

### Default (dark)

| Token | Value | Role |
|-------|-------|------|
| `--background` | `oklch(0 0 0)` true black | Page surface |
| `--foreground` | `oklch(0.97 0 0)` near-white | Body, headings |
| `--card` | `oklch(0.12 0 0)` warm grey | Card surface (elevation) |
| `--popover` | `oklch(0.12 0 0)` | Floating elements |
| `--primary` | `oklch(0.97 0 0)` | CTA bg (inverted on dark) |
| `--primary-foreground` | `oklch(0 0 0)` | Text on primary |
| `--muted` | `oklch(0.205 0 0)` | Subtle dividers |
| `--muted-foreground` | `oklch(0.708 0 0)` | Captions, secondary |
| `--accent` | `oklch(0.205 0 0)` | Hover fills |
| `--border` | `oklch(0.205 0 0)` | Hairlines |
| `--ring` | `oklch(0.45 0 0)` | Focus ring |
| `--destructive` | `#ff3b30` | Error state |

### Light mode (`data-mode="light"`)

| Token | Value |
|-------|-------|
| `--background` | `oklch(1 0 0)` |
| `--foreground` | `oklch(0.205 0 0)` |
| `--card` | `oklch(0.97 0 0)` |
| `--muted` | `oklch(0.9 0 0)` |
| `--muted-foreground` | `oklch(0.45 0 0)` |
| `--border` | `oklch(0.9 0 0)` |

### Community rainbow

| Token | Value |
|-------|-------|
| `--color-aurora-rainbow-1` | `#ff3b30` (red) |
| `--color-aurora-rainbow-2` | `#ff9500` (orange) |
| `--color-aurora-rainbow-3` | `#ffd60a` (yellow) |
| `--color-aurora-rainbow-4` | `#34c759` (green) |
| `--color-aurora-rainbow-5` | `#5ac8fa` (sky) |
| `--color-aurora-rainbow-6` | `#007aff` (blue) |
| `--color-aurora-rainbow-7` | `#bf5af2` (violet) |

Used via the `.aurora-rainbow` utility:

```css
.aurora-rainbow {
  background: linear-gradient(90deg,
    var(--color-aurora-rainbow-1), …,
    var(--color-aurora-rainbow-1)
  );
  background-size: 200% 100%;
  animation: aurora-rainbow-pan 6s linear infinite;
}
```

**One occurrence per page.** Never twice.

## Typography

### Families

| Family | Token | Role |
|--------|-------|------|
| System sans | `--font-sans` (`ui-sans-serif, system-ui, …`) | Everything |
| System mono | `--font-mono` (`ui-monospace, SFMono-Regular, …`) | Code blocks, terminal, SDK signatures |

No custom display face. No webfonts.

### Scale

| Tier | Size | Weight | Tracking | Line-height |
|------|------|--------|----------|-------------|
| Display | `clamp(48px, 5vw, 80px)` | 500 | `-0.02em` | `1.05` |
| H1 | `clamp(36px, 4vw, 56px)` | 500 | `-0.015em` | `1.1` |
| H2 | `clamp(24px, 2.5vw, 36px)` | 500 | `-0.01em` | `1.2` |
| H3 | `20px` | 500 | `-0.005em` | `1.3` |
| Body | `15px` | 400 | `0` | `1.5` |
| Body small | `13px` | 400 | `0` | `1.5` |
| Caption | `.aurora-caption` — `12.5px` / `0.04em` / uppercase / muted |
| Code | `14px` mono / line-height `1.55` |

Heading weights stop at `500`. Never `font-bold` (700+).

### Base size invariant

```css
html {
  font-size: 15px;
  line-height: 1.5;
}
```

`15px` base. Don't override at component level.

## Spacing & geometry

### Container

```html
<div class="mx-auto max-w-7xl px-6">
```

`max-w-7xl` = `1280px`. Wide community sections may use `--breakpoint-8xl` (`1440px`).

### Radius

| Token | Value |
|-------|-------|
| `--radius` / `--radius-md` | `0.5rem` |
| `--radius-sm` | `0.25rem` |
| `--radius-lg` | `0.75rem` |
| `--radius-xl` | `1rem` |
| `--radius-2xl` | `1rem` |
| `--radius-3xl` | `1.5rem` |

No pills. No square corners. `0.5rem` is the default voice.

### Header

```css
--header-height: 60px;
```

The header is **always** 60px tall. Fixed invariant. Don't shrink it on scroll, don't grow it.

### Border width

```css
--border-width: 1px;
```

Hairlines only.

## Motion

| Pattern | Easing | Duration |
|---------|--------|----------|
| Community rainbow pan | `linear` | 6s infinite |
| Hover opacity/color shift | `ease` | 150ms |
| Smooth scroll | (CSS native) | — |

Smooth scroll already wired:

```css
html { scroll-behavior: smooth; }
```

No transforms beyond the rainbow's `background-position`. No parallax. No JS-driven animation outside of optional carousels.

## Voice & copy

- Technical, second-person, doc-aware.
- *"Visualize multimodal data, fast."* / *"Stream from anywhere."*
- CTAs are short imperatives: *"Read the docs"*, *"Open SDK"*, *"Try the cloud"*, *"Get started"*.
- Section titles are nouns: *"Community"*, *"SDKs"*, *"Cloud"*, *"Use cases"*, *"Recipes"*.
- Show, don't tell — every claim is followed by a code sample or live demo.

## Component recipes

### Hero
- Black surface, near-white display title.
- `.aurora-caption` eyebrow above title ("OPEN SOURCE").
- Dual CTAs: primary (`bg-primary text-primary-foreground`) + ghost (border).
- A code block on the right showing the simplest possible "hello world" with the SDK.
- Header above is exactly `60px` tall, fixed.

### Community section (the one place rainbow lives)
- Full-width 4px-tall `.aurora-rainbow` strip just below the section header (or as the section divider above).
- Section title in display size.
- Grid of community items (Discord card, GitHub stars, contributor avatars).

### SDK / code section
- 50/50 split: copy on the left, tabbed code block on the right.
- Code block: `bg-card` (warm grey), `border-border`, `rounded-lg`, padding `1.5rem`, mono `14px`.
- Tab strip: subtle bg, active tab gets `bg-muted` + foreground text.

### Light mode interlude
- Pair "Cloud" or "Pricing" sections with `data-mode="light"` for contrast.
- Inversion is total — body becomes near-black on white.

## Anti-patterns

- ❌ Lightening the background. Elevation = `bg-card` (warm grey), not `bg-gray-900` tinting.
- ❌ `font-bold` (700+). Cap at `font-medium` (500).
- ❌ Multiple rainbow uses. One per page.
- ❌ Rainbow text via `bg-clip-text` — the gradient must be on a strip or bar, not on type.
- ❌ Custom display fonts. System sans only.
- ❌ Pills (`rounded-full`). Use `rounded-md` (`0.5rem`).
- ❌ Header taller or shorter than `60px`.

## Accessibility

- White on true-black passes AA at every size.
- Rainbow gradient is decorative; never carries information.
- `prefers-reduced-motion`: disable `aurora-rainbow-pan` animation; keep the static gradient.
- Smooth-scroll: respect `prefers-reduced-motion` by overriding `scroll-behavior: auto`.
- Focus rings: `--ring` (`oklch(0.45 0 0)`) at 2px with 2px offset — visible against both modes.
- Code blocks need `<pre><code>` semantics + `aria-label`.

## What ships with the pack

- `tokens.css` — full token set scoped to `[data-designlang="aurora"]` with default dark and `data-mode="light"`. Includes the 7-color rainbow gradient utility (`.aurora-rainbow`) and `.aurora-caption`.
- `CLAUDE.md` / `AGENTS.md` — agent guidance.
- Components: `hero-product`, `header-dark`, `footer-dark`, `trust-grid`, `analytics-dashboard`, `growth-sticky-list`, `features-screenshot-grid`, `resources-grid`, `testimonial-scroll-reveal`, `cta-audience-marquee`.
- Foundations — `Button`, `Card`.

Components (10)