01 / Color Palette

Grayscale Palette

Primary

Pure Black
#000000
Primary headlines, links, max emphasis
Near Black
#262626
Button text on light surfaces
Darkest Surface
#090909
Dark containers, footer background

Surface & Background

Pure White
#ffffff
Page background, button surfaces
Snow
#fafafa
Subtle surface distinction, section bg
Light Gray
#e5e5e5
Button backgrounds, borders, containment

Neutrals & Text

Stone
#737373
Secondary text, footer links, muted tone
Mid Gray
#525252
Emphasized secondary text
Silver
#a3a3a3
Tertiary text, placeholders, metadata
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)
White Pill (Secondary)
Black Pill (CTA)
$ ollama run llama3.2
04 / Card Examples

Cards & Containers

Standard Card

Bordered Container

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

Snow Surface

Subtle Background

Card distinguished by Snow (#fafafa) background instead of borders. The lightest possible surface distinction from pure white.

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 Light Gray (#e5e5e5). Cards, code blocks, buttons. The only elevation that exists.
Level 1