Ollama Design System

---

version: alpha

name: Ollama-design-analysis

description: |

An almost defiantly minimal documentation-first system that treats the home page like a Markdown README — paper-white canvas, 36px center-aligned heading, a single black pill CTA, an inline terminal install snippet, and a hand-drawn llama mascot as the only ornamental element. No gradient, no hero photography, no marketing pyrotechnics. The chrome is a tiny utility palette of pure black, pure white, and three neutral grays; every interactive element is fully rounded into a pill (`{rounded.full}`); typography is SF Pro Rounded for headings paired with system sans for body and ui-monospace for code. Pricing tiers, FAQs, and "your data stays yours" guarantees all sit on the same flat canvas inside thin-border cards — the system is the documentation, and the documentation is the system.

colors:

primary: "#000000"

on-primary: "#ffffff"

ink: "#000000"

ink-deep: "#090909"

charcoal: "#525252"

body: "#737373"

mute: "#a3a3a3"

canvas: "#ffffff"

surface-soft: "#fafafa"

surface-card: "#ffffff"

hairline: "#e5e5e5"

hairline-strong: "#d4d4d4"

on-dark: "#ffffff"

on-dark-mute: "rgba(255,255,255,0.7)"

surface-dark: "#171717"

focus-ring: "rgba(59,130,246,0.5)"

link: "#000000"

link-mute: "#737373"

terminal-red: "#ff5f56"

terminal-yellow: "#ffbd2e"

terminal-green: "#27c93f"

typography:

display-xl:

fontFamily: SF Pro Rounded

fontSize: 36px

fontWeight: 500

lineHeight: 1.11

letterSpacing: 0

display-lg:

fontFamily: SF Pro Rounded

fontSize: 30px

fontWeight: 500

lineHeight: 1.2

letterSpacing: 0

heading-lg:

fontFamily: SF Pro Rounded

fontSize: 24px

fontWeight: 600

lineHeight: 1.33

letterSpacing: 0

heading-md:

fontFamily: ui-sans-serif

fontSize: 20px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

heading-sm:

fontFamily: ui-sans-serif

fontSize: 18px

fontWeight: 500

lineHeight: 1.56

letterSpacing: 0

body-md:

fontFamily: ui-sans-serif

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-strong:

fontFamily: ui-sans-serif

fontSize: 16px

fontWeight: 500

lineHeight: 1.5

letterSpacing: 0

body-sm:

fontFamily: ui-sans-serif

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: 0

body-sm-strong:

fontFamily: ui-sans-serif

fontSize: 14px

fontWeight: 500

lineHeight: 1.43

letterSpacing: 0

caption-sm:

fontFamily: ui-sans-serif

fontSize: 12px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0

code-md:

fontFamily: ui-monospace

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

code-sm:

fontFamily: ui-monospace

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: 0

button-md:

fontFamily: ui-sans-serif

fontSize: 14px

fontWeight: 500

lineHeight: 1

letterSpacing: 0

rounded:

none: 0px

sm: 6px

md: 8px

lg: 12px

full: 9999px

spacing:

xxs: 2px

xs: 4px

sm: 8px

md: 12px

lg: 16px

xl: 24px

xxl: 32px

section: 88px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 20px

height: 36px

button-primary-active:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

button-secondary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 20px

height: 36px

button-pill-on-dark:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 20px

button-disabled:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.mute}"

rounded: "{rounded.full}"

search-pill:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.full}"

padding: 8px 16px

height: 36px

search-pill-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.full}"

padding: 8px 16px

height: 40px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

install-snippet:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.code-md}"

rounded: "{rounded.full}"

padding: 12px 20px

height: 48px

command-tag:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.code-sm}"

rounded: "{rounded.full}"

padding: 6px 12px

terminal-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.code-sm}"

rounded: "{rounded.lg}"

padding: 16px

terminal-traffic-lights:

rounded: "{rounded.full}"

size: 12px

pricing-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

pricing-card-dark:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

feature-bullet:

textColor: "{colors.charcoal}"

typography: "{typography.body-sm}"

faq-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.none}"

padding: 16px 0px

link-inline:

textColor: "{colors.ink}"

typography: "{typography.body-md}"

link-mute:

textColor: "{colors.body}"

typography: "{typography.body-sm}"

primary-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-strong}"

rounded: "{rounded.none}"

height: 56px

footer-section:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.caption-sm}"

rounded: "{rounded.none}"

padding: 32px 24px

cta-strip-dark:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.heading-lg}"

rounded: "{rounded.lg}"

padding: 24px 32px

---

Ollama's site is the most aggressively under-designed marketing surface in the AI tooling space, and that is the entire point. The home page reads like a Markdown README rendered with care: a 36px center-aligned heading sits above an inline `curl` install snippet inside a soft-gray pill, a single black "Download" CTA, and a hand-drawn llama mascot as the only ornament. Everything else — automate-your-work block, "Start local. Scale cloud." pricing pair, "Your data stays yours" guarantee strip, FAQ wall on `/pricing` — sits on the same paper-white canvas (`{colors.canvas}`) with quiet `{colors.body}` neutrals carrying the prose. The system is the documentation, and the documentation is the system.

The design philosophy is geometric: every interactive element collapses to `{rounded.full}` (9999px) — buttons, search pills, install-snippet pills, text inputs, and the terminal-traffic-light dots. There are no decorative drop shadows, no gradients, no hero illustrations beyond the llama. Cards (the rare ones, on `/pricing`) use a soft `{rounded.lg}` (12px) and a 1px hairline. The single inverted moment in the entire system is the dark "Max" pricing tier — `{colors.surface-dark}` with white text — which acts as the only attention-grabbing surface in an otherwise studiously flat layout.

Typography pairs SF Pro Rounded (display headings, weight 500–600) with the operating system's default sans (`ui-sans-serif`) for body and `ui-monospace` for code. The roundness of the heading face is the only "personality" the chrome carries — it gently echoes the `{rounded.full}` button geometry without being decorative about it.

**Key Characteristics:**

> **Source pages:** `/` (home) and `/pricing`. The chrome palette is identical across both — only content changes.

The system has effectively no error/success/warning palette in its public marketing surfaces — there are no validation states, no destructive flows, no banners. The only "semantic" colors are the macOS terminal traffic lights inside the terminal mockup:

These appear only inside `{component.terminal-card}` and have no other use.

The pairing of SF Pro Rounded display + system sans body + system mono code is intentionally "stock Apple" — the design decision is to not have a typography decision. Branded display faces would compete with the system's documentation feel.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 36px | 500 | 1.11 | 0 | Hero headline ("The easiest way to build with open models") |

| `{typography.display-lg}` | 30px | 500 | 1.2 | 0 | Major section headlines ("Pricing", "Frequently asked questions") |

| `{typography.heading-lg}` | 24px | 600 | 1.33 | 0 | Section subheading inside body ("Automate your work", "Start local. Scale cloud.") |

| `{typography.heading-md}` | 20px | 500 | 1.4 | 0 | Pricing tier name ("Free", "Pro", "Max"), card title |

| `{typography.heading-sm}` | 18px | 500 | 1.56 | 0 | FAQ question label, in-card subtitle |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body, FAQ answers, paragraph copy |

| `{typography.body-strong}` | 16px | 500 | 1.5 | 0 | Inline emphasis, primary-nav link |

| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Feature bullet ("Access larger models on data-center-grade hardware"), footer link |

| `{typography.body-sm-strong}` | 14px | 500 | 1.43 | 0 | Button label, pricing-card eyebrow ("Solve harder tasks, faster") |

| `{typography.caption-sm}` | 12px | 400 | 1.33 | 0 | Footer copyright row, smallest meta text |

| `{typography.code-md}` | 16px | 400 | 1.5 | 0 | Install-snippet `curl` line, in-terminal command |

| `{typography.code-sm}` | 14px | 400 | 1.43 | 0 | Terminal output line, inline `<code>` chips |

| `{typography.button-md}` | 14px | 500 | 1 | 0 | Every button label across the system |

The typography is built for legibility at small sizes on a flat-white canvas. SF Pro Rounded's softened terminals on the heading face do almost all of the brand expression; everything below 20px collapses into the operating system's default sans, which renders identically to the way docs.ollama.com and the Ollama CLI's own help text would appear in a terminal. There is almost no letter-spacing variation, no display-only weights, no italic, and the heading-to-body ratio compresses tightly (36 → 30 → 24 → 20 → 16) so the page reads as a single readable column rather than a marketing pyramid.

SF Pro Rounded is Apple-licensed and ships only on macOS/iOS. On other systems it falls back to `system-ui` (Segoe UI / Roboto / DejaVu Sans depending on platform) — Ollama explicitly accepts that the heading face will look slightly different on Windows/Linux. The closest open-source substitute is **Nunito** (rounded geometric sans, weights 500/600). For the body face, **Inter** is a near-perfect match for `system-ui` rendered metrics. For code, **JetBrains Mono** or **Fira Code** are the canonical open-source substitutes for `ui-monospace`.

Whitespace is the entire layout. Sections are separated by 88px of plain white air, never by decorative dividers, never by colored bands. Inside a section, content sits in a tight reading column with no decorative columns, callout boxes, or lifted cards. The site treats the page as a long-form Markdown document, and the air between sections is the equivalent of a blank line in Markdown source.

| Level | Treatment | Use |

|---|---|---|

| 0 — Flat | No border, no shadow | Hero, automate-your-work, your-data-stays-yours, footer — the dominant treatment across the page |

| 1 — Hairline border | 1px solid `{colors.hairline}` | Pricing cards, FAQ row dividers, terminal mockup card |

| 2 — Inverted dark | `{colors.surface-dark}` fill | Dark "Max" pricing card and dark CTA strip — the system's only "elevated" surfaces use color, not shadow |

The system has no drop-shadow elevation at all. Nothing lifts, nothing floats, nothing layers. The only depth cue beyond hairline borders is the single dark surface used on the highest-tier pricing card to draw attention to it.

The site has effectively zero decorative depth in the traditional sense. The "depth" comes entirely from two recurring devices:

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Nav, footer, FAQ row dividers — flat structural lines |

| `{rounded.sm}` | 6px | Inline code chips, command tags |

| `{rounded.md}` | 8px | Rare medium-radius surfaces (e.g., dropdown panels) |

| `{rounded.lg}` | 12px | Pricing cards, terminal mockup card |

| `{rounded.full}` | 9999px | Every button, every pill input, install-snippet pill, search pill, traffic-light dots |

The dominant shape vocabulary is just two values: pills (`{rounded.full}`) for everything interactive and 12px (`{rounded.lg}`) for the few cards in the system. There are no medium-radius "soft cards" — surfaces are either pills or rectangles with corners large enough to read as deliberately soft.

There is no photography. The only image-like elements are:

> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only.

**`button-primary`** — the universal Ollama CTA

**`button-secondary`** — outline alternative on light canvas

**`button-pill-on-dark`** — white pill on dark surface

**`button-disabled`**

**`search-pill`** + **`search-pill-focused`**

**`text-input`** + **`text-input-focused`**

**`install-snippet`** — the signature install pill

**`command-tag`** — small inline command chip

**`terminal-card`** — the home page's only "product preview"

**`terminal-traffic-lights`**

**`pricing-card`** — Free / Pro tiers

**`pricing-card-dark`** — Max tier (inverted)

**`feature-bullet`** — pricing card list item

**`faq-row`** — `/pricing` FAQ entry

**`cta-strip-dark`** — rare dark CTA band

**`link-inline`** — body-prose anchor link

**`link-mute`** — secondary anchor in long-form prose

**`primary-nav`**

**Top Nav (Mobile)**

**`footer-section`**

| Name | Width | Key Changes |

|---|---|---|

| desktop-large | 1280px+ | Default desktop — 720px content column, 3-up pricing grid |

| desktop | 1024px | Same layout; nav remains horizontal |

| tablet | 850px | Pricing collapses from 3-up to 2-up + 1; nav search pill compresses |

| tablet-narrow | 768px | Pricing collapses to 1-up stacked; primary nav becomes hamburger |

| mobile | 640px | Hero headline drops from `{typography.display-xl}` (36px) to ~28px; install-snippet wraps; section padding tightens |

All interactive elements meet WCAG AA at the 36–40px height range. `{component.button-primary}` and `{component.button-secondary}` sit at 36px height with 20px horizontal padding, giving an effective tappable area of ~36×80px which exceeds the 44×44px AAA threshold via the inline padding. `{component.text-input}` sits at 40px. `{component.search-pill}` sits at 36px height with 16px padding. Footer links use `{typography.caption-sm}` (12px) but receive ~12px line-height + ~8px vertical padding for a tappable row of ~32–36px.

The only image asset is the llama mascot (raster PNG at multiple resolutions: 16/32/48/64/180/192/512px). It is rendered at fixed pixel sizes on the hero and pricing cards rather than scaling responsively — the brand asset is treated like a logo, not a hero image.

1. Focus on ONE component at a time. Pull its YAML entry from the front matter and verify every property resolves.

2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-active}`, `{rounded.full}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

4. Add new variants as separate component entries (`-active`, `-disabled`, `-focused`) — do not bury them inside prose.

5. Default body to `{typography.body-md}`; reach for `{typography.body-sm}` for footer/utility text; reserve `{typography.display-xl}` strictly for the page-top headline.

6. Keep `{colors.primary}` scarce per viewport — there should be at most one black pill per fold (counting nav, hero CTA, and pricing-card CTA together). The design's restraint is the design.

7. When introducing a new component, ask whether it can be expressed with the existing pill + flat-card + terminal-mockup vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.