A crisp technical-white inference platform that reads like an engineering spec sheet: a bright white #ffffff canvas framed by a dashed #cdc8c7 grid, with colossal black NeueAlteGrotesk display at weight 600 and tight negative tracking (88px hero at -0.02em, 64px sections), left-aligned. ALL chrome — buttons, eyebrows, labels — is Chivo Mono UPPERCASE, while body and nav are neutral system-sans at 16/400, and everything is strictly SQUARE (0px radius). Colour is deployed as flat solid blocks rather than washes: one high-voltage mint #19e76e (the announcement banner, highlights) with a secondary bright pink #ffa9fd, over pale green-tinted surface panels (#f5f8f4, #e1eadd); chrome itself stays black/white. Buttons are square Chivo Mono uppercase — black #000000 primary or a white bordered secondary — and depth is drawn entirely with the dashed grid, rgba(0,0,0,.05) hairlines and flat colour blocks, with no gradients, blurs or drop shadows.
Browse Baseten 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: baseten.co homepage (live DOM, computed styles), 2026-07-22 at desktop 1568px. Coverage: full homepage (banner → hero → feature sections → footer). App: dashboard needs login → needs-dashboard. Responsive: breakpoints from stylesheets only; mobile not verified.
A crisp technical-white inference platform that reads like an engineering spec sheet: a bright white canvas framed by a dashed #cdc8c7 grid, colossal black NeueAlteGrotesk display at weight 600 with tight negative tracking, and all chrome — buttons, eyebrows, labels — set in Chivo Mono UPPERCASE. Every control is strictly square (0px radius). Colour is deployed as flat blocks rather than washes: one high-voltage mint #19e76e (the announcement banner and highlights) with a secondary bright pink #ffa9fd, over pale green-tinted surface panels (#f5f8f4, #e1eadd). Depth is drawn with hairlines and dashed rules, never shadows. Feels: technical, precise, engineered, high-contrast.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| surface pale | #f5f8f4 / #f0f5ee | Green-tinted section panels |
| surface green | #e1eadd | Feature/panel fills |
| muted green-grey | #b9c6b3 | Secondary panel / illustration |
| hairline | rgba(0,0,0,.05) | Solid borders |
| dashed grid | #cdc8c7 | Dashed framing rules (signature) |
| grid rule | #909a8b | Heavier grid line |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Display, headings, body, nav |
| on-dark | #ffffff | Text on black buttons / banner ink is black |
| Token | Hex | Role / usage |
|---|---|---|
| mint | #19e76e | Announcement banner, highlights, primary accent |
| green deep | #00b86b | Deeper green hover / secondary |
| green shade | #108b42 | Chart / dark green |
| pink | #ffa9fd | Secondary accent block |
Rule: accent colour appears as flat solid blocks (banner, panels, highlights) — mint is primary, pink is the secondary pop. Chrome (buttons, text) stays black/white.
NeueAlteGrotesk — heavy geometric grotesk at weight 600 for every headline."Chivo Mono", monospace — all buttons, eyebrows and labels, UPPERCASE.ui-sans-serif, system-ui, sans-serif at 16px/400.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 88 / 80 | 600 | -1.76px (-0.02em), NeueAlteGrotesk |
| Section (h2) | 64 | 600 | -1.92px, NeueAlteGrotesk |
| Sub-section | 48 | 600 | -1.44px |
| Nav link | 16 | 400 | 0, system sans |
| Button / label | 14–16 | 400 mono | UPPERCASE, Chivo Mono |
| Eyebrow | 14 | 400 mono | -0.28px, UPPER |
Pattern: display is enormous and heavy (600) with tight tracking; chrome is mono uppercase; body is neutral system sans.
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.