Design System

Run AI models
with an API.

A clean minimal canvas where AI models take center stage. Monochromatic palette, Inter typography, functional borders, compact density.

14 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Monochromatic gray scale anchored by pure black (#000000) against white. 14 tokens — functional, never decorative.

Pure White
#ffffff
Page background, cards, inputs
Paper
#fafafa
Secondary sections
Whisper
#f5f5f5
Code blocks, disabled states
Fog
#e5e5e5
Borders, dividers
Silver
#d4d4d4
Inactive borders, muted icons
Stone
#a3a3a3
Placeholder text, helpers
Slate
#737373
Secondary text, captions
Charcoal
#404040
Body text, paragraphs
Ink
#171717
Headings, navigation
Obsidian
#000000
Primary brand, buttons, links
Signal Blue
#0070f3
Focus rings, active states
Soft Red
#dc2626
Errors, destructive actions
Soft Green
#16a34a
Success, confirmations
Soft Amber
#d97706
Warnings, caution
Typography

Type Scale

Inter throughout. 11-step scale from 12px caption to 48px display. Tight letter-spacing on headings, zero on body.

Display Run AI models 48px / 1.2 / -0.02em
Display-sm With an API 36px / 1.2 / -0.02em
Heading-lg Feature heading 30px / 1.2 / -0.02px
Heading Section heading 24px / 1.3 / -0.02px
Heading-sm Card title 20px / 1.4 / -0.01px
Subheading Section subtitle 18px / 1.5 / -0.01px
Body Default body text for readable content 15px / 1.6 / 0
Body-sm Dense data, card descriptions 14px / 1.6 / 0
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 12–48px
Mono Inter Mono 400–500 · 12–14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Compact density. 12-step spacing scale, 5 border radius values. 1px borders throughout.

Spacing Scale (4px base)

14px
28px
312px
416px
624px
832px
1248px
2496px

Border Radius

sm 4px
md 6px
lg 8px
xl 12px
full 9999px

Surface System

Pure White #ffffff
Paper #fafafa
Whisper #f5f5f5
Fog #e5e5e5
Components

Buttons & Elements

Three button variants with clear hierarchy. Obsidian primary, bordered secondary, transparent ghost.

Primary Button
Main call to action — highest visual weight
.btn-primary
Obsidian (#000000) background, Pure White text, 6px radius, 14px Inter weight 500. Use for the single most important action.
Secondary Button
Secondary actions, navigation
.btn-secondary
Pure White background, Ink text, 1px Fog border, 6px radius. For actions that need presence without competing.
Ghost Button
Tertiary actions, inline navigation
.btn-ghost
Transparent background, Charcoal text, no border. Hover shows Whisper background.
Model Card
Displaying AI models
.model-card
meta/llama-3.1-405b
The latest Llama model with 405 billion parameters, optimized for instruction following.
by meta · 2.4k runs · v3.1
Pure White background, 1px Fog border, 12px radius. Model name in Ink 14px/600, description in Charcoal 13px, meta in Stone 12px mono.
Input Field
User text input
input
Pure White background, 1px Fog border, 6px radius, 10px/12px padding. Focus: 1px Obsidian border. Placeholder in Stone.
Code Block
Code snippets, terminal output
.code-block
$ curl -s https://api.replicate.com/v1/predictions \ -H "Authorization: Bearer $TOKEN" \ -d '{"version": "meta/llama-3.1-405b"}'
Whisper background, 1px Fog border, 8px radius. Inter Mono 13px, line-height 1.6, Charcoal text.
Tag
Model labels, categories, versions
.tag
text-generation llm v3.1 meta
Whisper background, 1px Fog border, pill shape (9999px), 2px/8px padding, Stone text 12px weight 500.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary background
  • Obsidian (#000000) for primary buttons and emphasis
  • Gray scale hierarchy: Ink → Charcoal → Slate → Stone
  • 1px borders throughout — never thicker
  • 6px radius for buttons, 12px for cards, 9999px for pills
  • 15px body text with 1.6 line height
  • Inter Mono only for code and technical output
  • Compact spacing — every pixel serves a purpose
Don't — Avoid
  • Colored backgrounds except Whisper/Paper
  • Decorative borders, gradients, or shadows
  • Bright accent colors for decoration
  • Dense text without adequate line height
  • Font weights below 400
  • Large decorative border radii
  • Colored text for emphasis — use weight instead
  • Mono fonts for non-code content