# Baseten — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Canvas & surfaces
| 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 |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Display, headings, body, nav |
| on-dark | `#ffffff` | Text on black buttons / banner ink is black |

### Accent
| 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.

## 3. Typography Rules

- Display: `NeueAlteGrotesk` — heavy geometric grotesk at weight 600 for every headline.
- Mono / chrome: `"Chivo Mono", monospace` — all buttons, eyebrows and labels, UPPERCASE.
- Body / nav: `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.

## 4. Component Stylings

### Buttons (all square, radius 0)
- **Primary ("Get started")**: bg `#000000`, text `#ffffff`, height 36px (nav) / 48px (hero), Chivo Mono 16px uppercase.
- **Secondary ("Log in")**: bg `#ffffff`, text `#000000`, 1px border, height 36px, Chivo Mono uppercase.
- **Text ("Learn more")**: transparent, Chivo Mono 14px uppercase, underlined, with a chevron.
- **Nav links**: transparent, system sans 16px/400 black, dropdown carets on Products / Solutions / Resources.

### Announcement banner
- Full-width mint `#19e76e` bar with black text ("Announcing our Series F") and an underlined mono "LEARN MORE ›".

### Dashed grid framing
- Content is framed by dashed `#cdc8c7` vertical/horizontal rules dividing the page into cells — the signature structural device.

### Surface panels
- Pale green-tinted blocks (`#f5f8f4` / `#e1eadd`) hold feature content and diagrams; square corners, hairline or dashed edges.

## 5. Layout Principles

- Wide full-bleed content framed by the dashed grid; hero text left-aligned and huge.
- Hero anatomy: mint banner → nav on hairline → 88px black H1 ("Inference is everything") in a dashed-grid field → feature cells below.
- Sections are cells: 64px headings, mono eyebrows, green-tinted panels with diagrams; separation by dashed/solid hairlines, not shadow.

## 6. Depth & Elevation

- Radius: **0px everywhere** — strictly square.
- Depth is the dashed `#cdc8c7` grid + `rgba(0,0,0,.05)` hairlines + flat colour blocks; no drop shadows.
- Green-tinted surfaces step above white by colour, not elevation.

## 7. Motion

- Restrained hover transitions on buttons/links; no large hero choreography observed. Motion library not detected. Purposeful, not decorative.

## 8. Backgrounds, Effects & WebGL

- No WebGL. The signature background is the dashed `#cdc8c7` grid over white, plus flat mint/pink/pale-green colour blocks.
- No gradients, blurs or shadows — the surface is flat and structural.

## 9. Do's and Don'ts

### Do
- Use a bright white canvas framed by a dashed `#cdc8c7` grid.
- Set display huge in NeueAlteGrotesk at weight 600 with tight negative tracking; left-align the hero.
- Set ALL buttons, eyebrows and labels in Chivo Mono UPPERCASE.
- Keep every corner square (0px radius).
- Deploy colour as flat blocks: mint `#19e76e` primary (banner/highlights), pink `#ffa9fd` secondary, over pale green-tinted panels.
- Draw depth with hairlines and dashed rules, not shadows.

### Don't
- Don't round corners.
- Don't set chrome in a sans face — buttons/labels are Chivo Mono uppercase.
- Don't use gradients, washes or drop shadows.
- Don't over-saturate — colour arrives as discrete flat blocks on white.

## 10. Responsive Behavior

- Grid cells collapse and hero type scales down on narrow viewports; nav condenses.
- Breakpoints from stylesheets only — mobile rendering not verified.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#000000` · Surface `#f5f8f4`/`#e1eadd` · Dashed grid `#cdc8c7` · Hairline `rgba(0,0,0,.05)` · Mint `#19e76e` · Pink `#ffa9fd`
- Font: NeueAlteGrotesk 600 display, Chivo Mono UPPER chrome, system-sans body · Body 16px · Radius: **0 everywhere** · Button: black, Chivo Mono uppercase, 36/48px
- Hero 88/600 -0.02em left · Section 64/600 · Banner mint `#19e76e` black text

<baseten-marketing_design_language>
Use the Baseten marketing design language: a crisp technical-white brand 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. 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 (white text, 36px nav / 48px hero) or a white bordered secondary. Depth is drawn entirely with the dashed grid, rgba(0,0,0,.05) hairlines and flat colour blocks — no gradients, blurs or drop shadows. Feels: technical, precise, engineered, high-contrast. Avoid: rounded corners, a sans chrome voice, gradients or shadows, over-saturated washes.
</baseten-marketing_design_language>