Design System Preview:
Ollama

Radical minimalism in pure grayscale. Zero color, zero shadows, zero excess.

01 / Color Palette

Grayscale Palette

Primary

Pure Black
#000000
Primary headlines, links, max emphasis
Near Black
#262626
Card surfaces in dark mode
Darkest Surface
#090909
Page background in dark mode

Surface & Background

Pure White
#ffffff
Primary text in dark mode
Snow
#fafafa
Light surface, used in light mode
Light Gray
#e5e5e5
Button backgrounds in light mode

Neutrals & Text

Stone
#737373
Muted text, dark mode tertiary
Mid Gray
#525252
Borders in dark mode
Silver
#a3a3a3
Secondary text in dark mode
Button Text Dark
#404040
White-surface button text
Border Light
#d4d4d4
White-surface button borders
02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — 48px / 500 / 1.00 — SF Pro Rounded (system-ui)
Section Heading
Section Heading — 36px / 500 / 1.11 — SF Pro Rounded (system-ui)
Sub-heading
Sub-heading — 30px / 500 / 1.20 — SF Pro Rounded (system-ui)
Card Title
Card Title — 24px / 400 / 1.33 — ui-sans-serif
Body large text for hero descriptions and button labels. The system sans-serif handles all UI copy with clean precision.
Body Large — 18px / 400 / 1.56 — ui-sans-serif
Standard body text for paragraphs, navigation links, and general content. Weight 400 only.
Body / Link — 16px / 400 / 1.50 — ui-sans-serif
Caption and metadata text for descriptions
Caption — 14px / 400 / 1.43 — ui-sans-serif
ollama run llama3.2
Code Body — 16px / 400 / 1.50 — ui-monospace
ollama pull mistral
Code Caption — 14px / 400 / 1.43 — ui-monospace
v0.9.1 latest
Code Small — 12px / 400 / 1.63 — ui-monospace
03 / Button Variants

Buttons

Gray Pill (Primary)
Outline Pill (Secondary)
White Pill (CTA)
$ ollama run llama3.2
04 / Card Examples

Cards & Containers

Standard Card

Bordered Container

Standard content card with 1px solid Mid Gray border and 12px radius. The only container style in Ollama. Zero shadows.

Dark Surface

Elevated Background

Card distinguished by Near Black (#262626) background on Darkest Surface (#090909). Subtle separation through luminance shift only.

05 / Spacing Scale

Spacing System

Base unit: 8px. Scale from 4px to 112px.

4px
8px
12px
16px
20px
24px
32px
40px
48px
06 / Border Radius

Binary Radius System

Only two values exist. No 4px, no 8px, no gradient of roundness. Containers or interactive -- nothing in between.

12px
Containers
9999px
Interactive / Pills
07 / Elevation & Depth

Depth & Elevation

Zero shadows. Depth comes from background color shifts and single-pixel borders only.

Flat
No shadow, no border. Page background and inline content. The default state for most elements.
Level 0
Bordered
1px solid Mid Gray (#525252). Cards, code blocks, buttons. The only elevation that exists.
Level 1