A crisp, data-forward AI evaluation and observability brand that is light-FIRST rather than the dark app its category implies: a #ffffff canvas with #000000 ink that drops into full-bleed #000000 chapter bands where type inverts to #ededed over #0e0e0f panels. One electric blue #2c1fea owns every primary action — a 40px pill at 0 16px padding with an 18px/400 white label — backed by a real disabled token #7e95fc and a mint #5ee9b5 announcement pill. Its most transferable idea is discipline: a six-colour categorical palette (#9e60f6, #5770ff, #f97316, #ef46ef, #00bba7, #f0b100) is reserved strictly for charts and never leaks into buttons, links or surfaces. Three faces divide the work — custom btSans for headlines set at weight 400 with a locked 1:1 line-height (60/60 hero, 48/48 section) so the face carries presence instead of weight, Inter for 14/24 body, suisseMono for UPPERCASE eyebrows — and unusually the NAV is the heaviest text on the page at 15/600. The hero is left-aligned above a field of thin vertical tick marks reading as a trace. Radii stay small and practical (6px, 4px; 24px only for pills), there are zero shadows, and structure is a 1px border that swaps colour with the band. Motion is opacity-led at 0.15s with columnFlash/rowFlash table highlights, and 21 container queries size the data components.
Browse Braintrust in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: braintrust.dev (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Extracted withscripts/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 (#ffffffcanvas) with a strong electric-blue brand, which drops into full-black#000000bands 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 tablecolumnFlash/rowFlashkeyframes.
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.
| 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 |
| 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 |
| 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) |
#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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.