# Baseten · Design system migration spec

> Source: https://www.baseten.co  ·  Curated by OpenDesign  ·  en

> This site perfectly embodies the modern 'technical blueprint' aesthetic, balancing clean editorial typography with exposed grid structures to convey engineering authority.

## 1. Identity DNA

Baseten's design system is a technical blueprint for cloud-native model inference, where every component serves the architecture of precision. The system prioritizes the structural logic of a building's scaffolding over decorative finishes.

**One-liner:** A developer-first infrastructure platform for deploying and scaling AI models with clean, authoritative typography.
**Keywords:** inference · developer · cloud · runtime · scale
**Analogy:** A technical blueprint for cloud-native model inference

## 2. Color

A high-contrast monochrome base forms the foundation, punctuated by a single vibrant green accent for high-chroma highlights. This strict palette focuses attention on functional differentiation rather than decorative color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F5F8F4` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#B3B3B3` | placeholder |
| `--accent` | `#19E76E` | single accent |
| `--line` | `rgba(0,0,0,0.05)` | divider |

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

The single accent is a functional highlight, not a decorative flourish.

## 3. Typography

Typography pairs a bold grotesque-sans for impactful headlines with monospace fonts for technical labels and buttons. This dual-voice system establishes both authoritative presence and developer-oriented precision.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -1.92px | Hero headline |
| body | 16px | 1.5 | 400 | -0.28px | Body text |
| mono | 14px | 1.28 | 400 | normal | Buttons and labels |

**Type rules:**
- 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

## 4. Spacing

A 4px base unit establishes a consistent spatial rhythm, scaled in multiples for all padding and gaps to maintain architectural regularity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base with consistent multiples for padding and gaps

## 5. Surfaces

Surfaces are flat and borderless, defined by subtle 1px dividers rather than shadows or elevation. Dashed lines occasionally expose the underlying structural grid, making the layout's logic visible.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Borders:** Subtle 1px borders in rgba(0,0,0,0.05) for dividers and dashed lines for structural grids.

## 6. Layout

A strict 12-column grid with wide gutters forms the layout skeleton, occasionally exposed through dashed lines to emphasize technical precision. The hero section splits the canvas, placing bold typography against technical illustrations.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and functional, reserved for essential feedback like hover states and content loading. Transitions are fast and consistent, prioritizing immediate response over animation.

- **Durations:** micro 75ms · small 236ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements
  - Fade transitions for content loading

- **Hover:** Subtle color shifts or background changes with fast easing.
- **Click:** Immediate visual feedback.
- **Transition:** Consistent 0.075s transitions across color, background, and border properties.
- **Keyboard:** Standard focus states with visible outlines.

## 8. Voice & Don'ts

The editorial voice is authoritative, technical, and direct, using bold declarative statements for headlines and action-oriented language for CTAs. It operates within clear constraints to maintain professional clarity.

- **Tone:** Authoritative, technical, and direct.
- **Headline style:** Bold, declarative statements with tight tracking.
- **CTA style:** Action-oriented, uppercase monospace buttons with clear directional arrows.
- **Avoid:** Playful language / Excessive exclamation marks / Vague marketing speak

### Don'ts
- ❌ 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.

The system deliberately avoids playful language, excessive exclamation, and vague marketing speak to preserve its technical authority.

## System Prompt (paste into AI tool)

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