# Design System
Inspired by 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
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