---
name: Baseten
description: "This site perfectly embodies the modern 'technical blueprint' aesthetic, balancing clean editorial typography with exposed grid structures to convey engineering authority."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#19E76E"
  neutral: "#B3B3B3"
  bg-quiet: "#F5F8F4"
  line: "rgba(0,0,0,0.05)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.92px"
  body:
    fontFamily: ui-sans-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.28px"
  mono:
    fontFamily: ui-sans-serif
    fontSize: 14px
    lineHeight: 1.28
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A developer-first infrastructure platform for deploying and scaling AI models with clean, authoritative typography.

*A technical blueprint for cloud-native model inference*

## Colors

High-contrast monochrome base with a single vibrant green accent for high-chroma highlights.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#19E76E`)** — uses `accent` token
- **Muted (`#B3B3B3`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.05)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** ui-sans-serif
- **Mono:** monospace

- Headlines use tight negative letter-spacing for impact
- Buttons and navigation use monospace uppercase for technical feel
- Body text remains highly readable with standard line heights

## Layout

Strict 12-column grid with visible dashed lines in some sections to emphasize the underlying structure.

*Rhythm:* 4px base with consistent multiples for padding and gaps

## Elevation & Depth

- Borders: Subtle 1px borders in rgba(0,0,0,0.05) for dividers and dashed lines for structural grids.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Monospace uppercase text, pill-shaped or sharp borders, high contrast black or white fills.
- **card:** Minimal or invisible, relying on the underlying grid lines for structure.
- **chip:** Pill-shaped accent containers with monospace text.
- **input:** Standard form fields with subtle borders.
- **hero:** Split layout with large bold typography on the left and technical illustrations on the right.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — screenshot shows clean grotesque sans-serif headlines and monospace labels.
- Don't use rounded, soft UI patterns — screenshot shows sharp edges, pill buttons, and geometric diagrams.
- Don't use heavy drop shadows — screenshot shows completely flat, borderless or subtly bordered surfaces.
- Don't use a multi-colored rainbow palette — screenshot shows a strict black/white/green scheme.
- Don't use casual sentence case for UI elements — screenshot shows uppercase monospace for buttons and labels.
- Don't hide the grid structure — screenshot uses visible dashed lines to emphasize the technical layout.

---

## System Prompt (paste into AI agent)

```
Baseten is a developer infrastructure platform for AI model inference, characterized by a clean, technical aesthetic that emphasizes precision and scale. The visual system uses a high-contrast black and white palette, punctuated by a single vibrant green accent (#19E76E) for highlights. Typography relies on a bold grotesque-sans for impactful headlines and monospace fonts for technical labels and buttons. The layout is a strict 12-column grid, often exposed via visible dashed lines to reinforce the engineering-focused positioning. Critical donts include avoiding decorative serifs, soft rounded UI patterns, heavy shadows, or playful language, as the design prioritizes a professional, blueprint-like clarity over warmth.
```