# Braintrust — Marketing Site Design Spec

> Source: braintrust.dev (live DOM, computed styles), 2026-07-25 (desktop 1512px).
> Coverage: home. Dashboard: behind login (`needs-dashboard`).
> Extracted with `scripts/extract.js`; **0 stylesheets blocked** — rule-level coverage
> is complete for motion, states and breakpoints.
> **Reality check: the hint said "dark data surface, chart-dense". Half right.**
> Braintrust is a **white** site (`#ffffff` canvas) with a strong electric-blue brand,
> which drops into full-black `#000000` bands further down — light-first with dark
> chapters, not a dark app. "Chart-dense" is accurate: it carries a full 6-colour
> categorical data palette and table `columnFlash`/`rowFlash` keyframes.

## 1. Visual Theme & Atmosphere

Braintrust is a crisp, technical evaluation-and-observability brand built on a white
canvas with one loud electric blue, `#2c1fea`. The hero is **left-aligned** rather
than centred — a large 60px btSans headline over a short two-line lede and a blue
pill CTA — and it sits above a signature field of thin vertical tick marks that reads
as a trace or gantt visualisation. A mint `#5ee9b5` pill announces new features.
Below the fold the page drops into full-black bands where the type inverts to
`#ededed`, so the site alternates light and dark chapters rather than committing to
either. Radii are small and practical (6px and 4px dominate), there are **no
shadows**, and structure comes from `1px` borders that switch colour with the band
(`#000000` on white, `#3c3c42`/`#26262a` on black). A six-colour categorical palette
is reserved strictly for charts. Feels: technical, precise, data-forward, bright.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| text-ink | `#000000` | primary text on light bands (555 elements) |
| text-inverse | `#ededed` | primary text on black bands (372) |
| text-inverse-2 | `#ededf0` | secondary inverse text (322) |
| text-muted | `#71717a` | secondary copy on light |
| text-dim | `#a1a1aa` | tertiary / captions |
| text-faint | `#c4c4cc` | faint labels on dark |

### Surfaces & borders

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | page background — the site is light by default |
| canvas-dark | `#000000` | full-width black chapter bands (6 large sections) |
| surface-dark | `#0e0e0f` | raised panel on the black bands |
| surface-dark-2 | `#19191c` | nested dark surface |
| slate | `#99a1af` | a mid-grey section band |
| border-ink | `#000000` | 1px border on light |
| border-dark | `#3c3c42` | 1px border on dark |
| border-dark-2 | `#26262a` | subtler dark divider |

### Accent & semantic

| Token | Hex | Role / usage |
|---|---|---|
| brand-blue | `#2c1fea` | the primary CTA fill and a full-bleed brand band |
| accent-400 | `#7e95fc` | the **disabled** button fill |
| accent | `#5770ff` | secondary blue |
| mint | `#5ee9b5` | the "new feature" announcement pill (60 elements) |

### Chart / categorical palette

`#9e60f6` purple · `#5770ff` blue · `#f97316` orange · `#ef46ef` magenta ·
`#00bba7` teal · `#f0b100` yellow — each on ~23 elements, i.e. a deliberate
six-series data set.

**Rules:** `#2c1fea` is the only blue allowed in chrome; the six categorical colours
belong to charts and must never be used for buttons, links or surfaces. Text colour
is band-dependent — `#000000` on white, `#ededed` on black.

## 3. Typography Rules

Three faces with distinct jobs: **btSans** (custom brand sans) for headlines and nav,
**Inter** for body and UI (1568 elements), **suisseMono** for mono labels. Preview
substitutes **Space Grotesk** for btSans and **JetBrains Mono** for suisseMono
(both licensed); Inter is loaded as itself.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (h1) | 60 / 60 | 400 | normal |
| Section (h3) | 48 / 48 | 400 | normal |
| Sub-heading (h2) | 20 / 25 | 400 | normal |
| Body | 14 / 24 | 400 | normal |
| Nav link | 15 / 22.5 | 600 | normal |
| Button label | 18 | 400 | normal |

Pattern: headlines are **weight 400 even at 60px** — the display face carries the
presence, not the weight. Nav is the *heaviest* text on the page at 600, which is
unusual. Line-height is locked 1:1 at display sizes (60/60, 48/48) for a tight,
engineered block. Eyebrows are UPPERCASE mono.

## 4. Component Stylings

### Buttons

- **Primary**: bg `#2c1fea`, text `#ffffff`, radius `24px` (pill), height `40px`, padding `0 16px`, 18px/400.
- **Secondary**: light grey fill, ink text, same pill geometry ("Contact sales").

### States

| Component | Rest | Hover | Focus | Disabled |
|---|---|---|---|---|
| Primary CTA | bg `#2c1fea`, white, pill, h40 | bg stays `#2c1fea`, text → `#ffffff` | **ring removed** (`ring-0`, `outline-hidden`) | bg → `#7e95fc`, `opacity .5`–`.6` |

Two notable decisions: the brand-blue hover is *identity* on background (the change is
carried by text/child colour, not a fill shift), and focus styling is explicitly
**suppressed** via `focus-visible:ring-0` and `outline-hidden` — an accessibility
regression worth flagging rather than copying. Disabled is a real colour token
(`#7e95fc`), not just an opacity.

### Announcement pill

- Mint `#5ee9b5` background, dark text, full pill, with a trailing ↗ arrow.

### Nav

- Wordmark left; Product / Resources dropdowns, Customers, Pricing, Contact us at 15px/600; right "Sign in" text and a blue "Sign up" pill.

## 5. Layout Principles

**Left-aligned hero** (not centred) with headline, two-line lede, CTA pair and a
"Build with agents" model-picker row. Below it, a full-width tick-mark trace field.
Content then alternates white and black full-bleed bands. **21 container queries** are
in use — unusually many — so the data components size to their own boxes rather than
the viewport, which is what you would expect of a chart-heavy product site.

## 6. Depth & Elevation

Radius scale: `6px` (54 — the default), `4px` (36), `16px` (17), `24px` (3 — the
pills), `32px` (2), `12px` (1). A `6px 0 0` asymmetric radius appears on 4 elements
(tab/segment ends).

**Shadows: none.** The only box-shadow across ~5,000 elements is the transparent ring
reset. Depth is band colour plus 1px borders: `1px #000000` on light, `1px #3c3c42`
and `1px #26262a` on dark.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.15s | `cubic-bezier(.4,0,.2,1)` | the dominant transition (206 elements) |
| all | 0.2s | `cubic-bezier(.4,0,.2,1)` | buttons and interactive cards (50) |
| all | 0.7s | `cubic-bezier(0,0,.2,1)` | slow reveal/ease-out on large panels (35) |
| color, background-color | 0.15s | `cubic-bezier(.4,0,.2,1)` | text and fills (33) |

Opacity-led motion is the signature — things fade rather than move. Note the slow
0.7s ease-out band used for large panel reveals.

Keyframes (16): `columnFlash`, `rowFlash` (data-table cell highlights — the
chart-dense tell), `slow-stripes`, `marquee`, `shimmer`, `textShimmer`, `smoothSpin`,
`shake`, `fadeIn`, `enter`, `exit`, `spin`, `ping`, `pulse`, `accordion-down`,
`accordion-up`.

Actually running: `slow-stripes` 2s infinite (×3 — animated stripe fills),
`smoothSpin` 1.5s infinite, `pulse` 2s infinite. **2 `prefers-reduced-motion` blocks**
are honoured.

## 8. Backgrounds, Effects & WebGL

No canvas, no WebGL, no video. The atmosphere comes from **SVG data graphics** — the
hero's vertical tick-mark trace field, animated stripe fills, and chart components —
rather than from gradients or blur. Gradients and backdrop-filters are effectively
absent from the census. The visual interest is the data, drawn honestly.

## 9. Do's and Don'ts

### Do
- Default to a white canvas and drop into full-black bands for emphasis.
- Left-align the hero.
- Set display type at weight 400 with 1:1 line-height (60/60, 48/48).
- Use `#2c1fea` for the single primary action; keep it pill-shaped at 40px.
- Reserve the six categorical colours strictly for charts.
- Switch border colour with the band (`#000000` light, `#3c3c42` dark).

### Don't
- Don't add shadows — there are none.
- Don't use the chart palette for buttons, links or surfaces.
- Don't centre the hero.
- Don't use heavy display weights; 400 carries the headline.
- **Don't copy the suppressed focus ring** — the site sets `ring-0`/`outline-hidden`,
  which is an accessibility regression. Give focus a visible indicator instead.

## 10. Responsive Behavior

A dual ladder — Tailwind v4 rem breakpoints alongside bespoke px ones:

| Breakpoint | What changes |
|---|---|
| 480px | small-phone tier |
| max 600px | mobile-only overrides |
| 40rem / 48rem / 768px | phone → tablet; hero type scale-down, nav collapse |
| 64rem / 950px | desktop layout, multi-column data panels |
| 80rem / 1200px / 1440px | wide-desktop framing |
| 96rem | large-desktop cap |

**21 container queries** do much of the real work — components respond to their own
box, not the viewport. **0 `prefers-color-scheme: dark` blocks**: the black bands are
a design choice, not a theme, so there is no dark mode to honour.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Dark band `#000000` · Ink `#000000` · Inverse `#ededed` · Muted `#71717a` · Brand `#2c1fea`
- Font: btSans (sub: Space Grotesk) display 60/400 at 1:1 line-height · Inter body 14/24 · nav 15/600
- Radius: `6px` default, `4px` small, `24px` pill buttons · Control height: 40px
- Focus: suppressed on the real site — **add a visible ring instead** · Shadows: none

<braintrust_design_language>
A crisp, data-forward AI-evaluation brand that is light-first, not dark: a #ffffff
canvas with #000000 ink, dropping into full-bleed #000000 bands where text inverts to
#ededed over #0e0e0f and #19191c panels. One electric blue #2c1fea owns every primary
action — a 40px pill at 0 16px padding, 18px/400 white label — with #7e95fc as the
real disabled fill and a mint #5ee9b5 pill for announcements. A strictly separate
six-colour categorical palette (#9e60f6, #5770ff, #f97316, #ef46ef, #00bba7, #f0b100)
belongs to charts alone. Three faces: btSans for headlines set at weight 400 with 1:1
line-height (60/60 hero, 48/48 section), Inter for 14/24 body, suisseMono for
UPPERCASE eyebrows; nav is the heaviest text at 15/600. The hero is LEFT-aligned above
a field of thin vertical tick marks reading as a trace. Radii are small and practical
(6px, 4px; 24px only for pills), there are zero shadows, and structure is 1px borders
that swap colour with the band. Motion is opacity-led at 0.15s cubic-bezier(.4,0,.2,1)
with columnFlash/rowFlash table highlights; 21 container queries size the data
components. Feels: technical, precise, data-forward, bright.
Avoid: shadows, centred heroes, heavy display weights, using chart colours in chrome,
and copying the site's suppressed focus ring — give focus a visible indicator.
</braintrust_design_language>