# design system

Run AI
locally.

A minimal design system for the easiest way to run open models. White canvas, black accent, terminal-first typography. One command to start.

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

Color Tokens

Monochrome light palette with solid black as the singular accent. 15 tokens across surfaces, text hierarchy, interaction states, and semantic colors.

White
#FFFFFF
Primary background, base canvas
Snow
#FAFAFA
Code blocks, terminal, panels
Cloud
#F5F5F5
Hover states, subtle fills
Mist
#E5E5E5
Borders, dividers
Silver
#D4D4D4
Disabled states
Ash
#A3A3A3
Placeholder text
Stone
#737373
Secondary text, captions
Slate
#525252
Tertiary text
Charcoal
#262626
Primary text, headings
Black
#000000
Accent, buttons, links
Ollama Dark
#0A0A0A
Hovered black
Green
#16A34A
Success, running
Red
#DC2626
Errors, destructive
Amber
#D97706
Warnings, caution
Blue
#2563EB
Info, secondary links
Typography

Type Scale

JetBrains Mono for terminal and code. Inter for UI chrome. Clean, readable, developer-native.

Display-lg Run AI locally 48px / 1.1 / -0.02em
Display The easiest way 40px / 1.2 / -0.02em
Heading-lg Section heading 24px / 1.2 / -0.01em
Heading Page title 20px / 1.3 / -0.01em
Subheading Panel header 16px / 1.5 / 0
Body Default body text for readable content 14px / 1.5 / 0
Body-sm Dense UI text, breadcrumbs, descriptions 13px / 1.5 / 0.01px
Caption Metadata · Timestamps · Labels 12px / 1.5 / —

Fonts

Mono JetBrains Mono 400-700 · Terminal, code, CLI commands
Sans Inter 400-700 · UI chrome, headings, body text
Fallback SFMono-Regular, Menlo, Consolas Monospace fallback chain
Layout

Spacing & Shapes

Base unit 4px. Comfortable density for clear, readable layouts. Small border radii — functional, not decorative.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

code 4px
default 6px
cards 8px
xl 12px
Elevation

Depth & Surfaces

Flat design with borders for depth. No shadows — the system uses color and border to indicate hierarchy.

Depth Levels

White
Base page background — the primary canvas
Level 0
Snow
Code blocks, terminal, secondary panels
Level 1
Cloud
Hover states, tertiary fills, subtle depth
Level 2
Mist
Borders, dividers, elevation hints
Level 3

Surface System

White #FFFFFF
Snow #FAFAFA
Cloud #F5F5F5
Mist #E5E5E5
Context

Terminal Preview

How the design system looks in context — a terminal with Ollama commands, model output, and a blinking cursor.

Terminal
$ollama run llama3.2
Pulling manifest...
Pulling 74701a8c35f6... 100% ▕████████████████▏ 2.0 GB
Verifying sha256 digest...
Writing manifest...
Success
>>> What is the capital of France?
The capital of France is Paris. It has been the
country's capital since the 10th century and is
the most populous city in France.
>>>
Components

Button Variants

Primary action (black on white), ghost, and secondary variants. Clean sizing for developer tool UIs.

Primary Action Button
Main call to action — download, get started
.btn-primary
Black (#000000) background, White text, 6px radius. Use for the single most important action — typically "Download" or "Get started".
Ghost Button
Secondary actions, outlined emphasis
.btn-ghost
Black text, Black border, 6px radius. For secondary CTAs that need visual presence without competing with primary.
Secondary Button
Tertiary actions, navigation
.btn-secondary
Charcoal text, Mist border. For less prominent actions that still need visual presence.
Terminal Block
CLI commands, install instructions
.terminal-mock
$ ollama run llama3.2
Snow background, 8px radius, JetBrains Mono 14px. Prompt in Black, command in Charcoal. 1px Mist border.
Input Field
Search, command input, text entry
input
White background, Charcoal text, 6px radius. Focus: Black border, no outline.
Card
Content containers, pricing, features
.card
Pro
Solve harder tasks, faster
$20 / mo
White background, 1px Mist border, 8px radius, 24px padding. Clean containers for grouping content.
Guidelines

Do's & Don'ts

# do
  • White (#FFFFFF) as the primary canvas background
  • Black (#000000) for primary actions and emphasis
  • JetBrains Mono for all terminal and code content
  • Comfortable spacing with 4px base unit
  • Small border radii (4px) for functional feel
  • Stone (#737373) for secondary text and captions
  • Flat design — borders over shadows
# don't
  • Colored accents for primary actions — use Black
  • Gradients or decorative backgrounds
  • Decorative drop shadows or blurs
  • Overly dense layouts — let content breathe
  • Serif or display fonts in the system
  • Red (#DC2626) for non-error contexts
  • Large border radii — keep it functional