Ollama Design System

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:

• Paper-white {colors.canvas} end-to-end with no surface alternation — the whole page is one continuous sheet
• Center-aligned hero with {typography.display-xl} SF Pro Rounded headline, no eyebrow, no subhead beyond a small "Power OpenClaw with Ollama" line under the llama
• Pill geometry everywhere: every button and pill input is {rounded.full}; cards use {rounded.lg}; nothing is sharp-cornered except section dividers
• Single-color CTA system: pure black {colors.primary} pills carry every action; "Get Pro" / "Get Max" inside pricing cards are the only variations
• Inline curl install snippet rendered as a pill with {typography.code-md} — the most signature element, sitting directly under the hero headline
• Terminal-mockup card with macOS traffic-light dots and inline ollama launch openclaw example — the home page's only "product preview"
• Inverted dark {component.pricing-card-dark} for the highest-tier "Max" plan, breaking the flat-white rhythm exactly once per page

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes Ollama's known mobile pattern (hamburger drawer, 1-up pricing stack, install-snippet wrap) from desktop evidence and the extracted breakpoint stack.
• Hover states not documented by system policy.
• Form field styling beyond search and install-snippet is not present in the captured surfaces — there is no visible long-form form on the home or pricing pages.
• Authenticated chrome (account dropdown, billing settings, model dashboard) not in the captured pages.
• Models / Docs pages not in the captured set — those surfaces likely add a sidebar and a docs typography tier that this document does not describe.