← Back to all designs

Ollama

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 whit

Homepage Example

Welcome to Ollama

A modern, elegant design system built for the digital age. Clean lines, thoughtful spacing, and purposeful color choices define every interaction.

Get Started Learn More

Pixel Perfect

Every element is carefully crafted to ensure consistency across all platforms and devices.

Design Tokens

A comprehensive token system that makes scaling and maintaining your design effortless.

Built for Teams

Collaborate seamlessly with designers and developers using a shared design language.

Color Palette (19)

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
surface-dark#171717
link#000000
link-mute#737373
terminal-red#ff5f56
terminal-yellow#ffbd2e
terminal-green#27c93f

Typography (13)

Ollama
display-xl36px · weight 500
Ollama
display-lg30px · weight 500
Ollama
heading-lg24px · weight 600
Ollama
heading-md20px · weight 500
Ollama
heading-sm18px · weight 500
Ollama
body-md16px · weight 400
Ollama
body-strong16px · weight 500
Ollama
body-sm14px · weight 400
Ollama
body-sm-strong14px · weight 500
Ollama
caption-sm12px · weight 400
Ollama
code-md16px · weight 400
Ollama
code-sm14px · weight 400
Ollama
button-md14px · weight 500

Components (22)

button-primary
button-primary
button-primary-active
button-primary-active
button-secondary
button-secondary
button-pill-on-dark
button-pill-on-dark
button-disabled
button-disabled
search-pill
search-pill
search-pill-focused
search-pill-focused
text-input
text-input
text-input-focused
text-input-focused
install-snippet
install-snippet
command-tag
command-tag
terminal-card
terminal-card
terminal-traffic-lights
terminal-traffic-lights
pricing-card
pricing-card
pricing-card-dark
pricing-card-dark
feature-bullet
feature-bullet
faq-row
faq-row
link-inline
link-inline
link-mute
link-mute
primary-nav
primary-nav
footer-section
footer-section
cta-strip-dark
cta-strip-dark

Border Radius

none (0px)
sm (6px)
md (8px)
lg (12px)
full (9999px)

Design Philosophy

Overview

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:**

Colors

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

Brand & Accent

Surface

Text

Semantic

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.

Focus

Typography

Font Family

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.

Hierarchy

| 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 |

Principles

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.

Note on Font Substitutes

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`.

Layout

Spacing System

Grid & Container

Whitespace Philosophy

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.

Elevation & Depth

| 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.

Decorative Depth

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

Shapes

Border Radius Scale

| 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.

Photography Geometry

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

Components

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

Buttons

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

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

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

**`button-disabled`**

Inputs & Forms

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

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

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

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

Cards & Containers

**`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

Inline

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

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

Navigation

**`primary-nav`**

**Top Nav (Mobile)**

Footer

**`footer-section`**

Do's and Don'ts

Do

Don't

Responsive Behavior

Breakpoints

| 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 |

Touch Targets

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.

Collapsing Strategy

Image Behavior

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.

Iteration Guide

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.

Known Gaps