# vllm.ai Design System

> High-contrast technical utility defined by monochrome foundations and a single high-voltage blue accent.

**Source:** https://vllm.ai | **Captured:** 2026-06-17 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
vllm.ai employs a clean, developer-centric aesthetic that prioritizes legibility and technical authority. The system is built on a pure white canvas (`#ffffff`) with absolute black (`#000000`) typography and a singular brand accent, vLLM Blue (`#30a2ff`), used for critical emphasis and interactive elements. Typography is anchored by **Inter** for all UI and display roles, utilizing a heavy 700 weight for headings to create a clear information hierarchy. The interface uses a generous spacing scale based on a 4px unit and soft geometry, with card and container radii ranging from 10px to 16px.

## Signature DNA
1. **High-Voltage Blue Emphasis** (vLLM Blue `#30a2ff` is used exclusively for key technical terms in headlines and primary iconography, creating a "syntax highlighting" effect on the page.)
2. **Bold Technical Typography** (Inter at 700 weight and 60px display sizes creates a dense, authoritative header style that mimics terminal or documentation headers.)
3. **Soft-Floating Containers** (The use of 10px-16px border radii on cards combined with subtle 1px borders (`oklch(0.929 0.013 255.508)`) creates a modern, approachable layer over the stark white background.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Page background, card surfaces, and ring offsets | 1 | 1 | Declared token |
| `--color-black` | `#000000` | Primary text, button labels, and brand logo | 1 | 1 | Declared token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-vllm-blue` | `#30a2ff` | Primary accent, technical emphasis in text, icon backgrounds | 24 | 1 | CSS Variable |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 400, 500, 600, 700 | Heading, Body, UI | Inter (Google Fonts) | SIL Open Font |
| JetBrains Mono | 400 | Code, Technical labels | JetBrains Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display}` | 60px | 60px | -1.5px | 700 | Hero H1 | `h1.text-4xl.md:text-5xl` |
| `{typography.heading}` | 30px | 36px | normal | 700 | Section Headings | `h2.text-2xl.md:text-3xl` |
| `{typography.heading-sm}` | 20px | 28px | normal | 700 | Feature Titles | `h2.text-xl.font-bold` |
| `{typography.subheading}` | 18px | 28px | normal | 600 | Card Titles | `h3.font-semibold.text-lg` |
| `{typography.body}` | 16px | 24px | normal | 400 | Standard Prose | `section#hero` |
| `{typography.body-ui}` | 16px | 24px | normal | 600 | Button Labels | `button.inline-flex` |
| `{typography.body-sm}` | 14px | 20px | normal | 400 | Secondary Body | `p:nth-of-type(1)` |
| `{typography.caption}` | 12px | 16px | normal | 500 | Badges/Metadata | `span.inline-flex` |

### Principles
1. **Tight Display Tracking:** Large display type (60px) uses -1.5px letter spacing to maintain visual density.
2. **Weight-Based Hierarchy:** Boldness (700) is reserved for structural headings; 400 is used for all descriptive prose.
3. **Blue Syntax Highlighting:** Specific keywords within black headings are colored with `#30a2ff` to guide the eye to technical value props.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.xs}` | 8px | 68 |
| `{spacing.sm}` | 12px | 28 |
| `{spacing.md}` | 16px | 59 |
| `{spacing.lg}` | 24px | 14 |
| `{spacing.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.input}` | 4px | Form fields | 26 occurrences |
| `{radius.control}` | 10px | Small cards/buttons | 22 occurrences |
| `{radius.card}` | 16px | Feature cards | 24 occurrences |
| `{radius.pill}` | 9999px | Badges/Tags | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | Default cards | 21 occurrences |
| `{elevation.subtle}` | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Elevated cards | 4 occurrences |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** https://vllm.ai
**Spec:** Background: `#ffb224` (Note: Observed in screenshot, not in token list) / Text: `#000000` / Radius: `8px` / Typography: `Inter 600 16px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying core product benefits
**Pages observed:** https://vllm.ai
**Spec:** Background: `oklab(1 0 0 / 0.8)` / Border: `1px oklch(0.929 0.013 255.508)` / Radius: `16px` / Padding: `16px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Technical Badge
**Role:** Inline labels and status indicators
**Pages observed:** https://vllm.ai
**Spec:** Background: `rgba(0, 0, 0, 0)` / Border: `1px oklab(0.554 -0.010 -0.044 / 0.2)` / Radius: `8px` / Padding: `2px 8px` / Typography: `Inter 12px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (estimated) |
| Section Padding | 80px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | H1 reduces from 60px to 36px (text-4xl) |
| Desktop | 1440px | 3-column feature grid layout |

## Imagery & decoration
The brand uses abstract geometric icons (puzzles, lightning bolts, layers) contained within soft-colored circular or square backgrounds. It avoids photography, relying on clean SVG illustrations and the "dot grid" background pattern visible in hero sections.

## Do's
- Use `#30a2ff` for technical keywords within headings.
- Maintain a 16px border radius for primary content cards.
- Use Inter 700 for all primary and secondary headings.
- Apply the 1px subtle border `oklch(0.929 0.013 255.508)` to all white cards.
- Keep letter spacing at -1.5px for any type above 48px.

## Don'ts
- **Wrong:** Using `#30a2ff` for body text. **Right:** Use `#000000`. **Reason:** Accessibility and focus; blue is reserved for emphasis and technical highlights.
- **Wrong:** Using sharp corners (0px) for UI cards. **Right:** Use 16px. **Reason:** The brand identity relies on soft technical geometry.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to Inter and JetBrains Mono.
- **Wrong:** Using heavy drop shadows. **Right:** Use 1px borders or the subtle `0px 1px 3px` shadow.

## Similar brands
- OpenAI (Documentation)
- Mistral AI
- Hugging Face (Technical UI)
- Vercel (Geographic/Technical aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-vllm-blue: #30a2ff;
  --color-black: #000000;
  --color-white: #ffffff;
  --radius-card: 16px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Generate a feature card using a 16px border radius, a 1px border in oklch(0.929 0.013 255.508), and an Inter 700 heading with the word 'Performance' highlighted in #30a2ff."
- "Create a hero section with a 60px Inter 700 headline, -1.5px letter spacing, and a primary button with 8px corners."

## Known gaps
- Hover and Active states for buttons were not explicitly defined in the provided token evidence.
- Secondary brand colors (beyond the primary blue) were not captured in the token list.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://vllm.ai | 1440px | 2026-06-17 |