What is Ollama's primary brand color?

Ollama's brand is pure black #000000 on a pure white #ffffff canvas. There is no second brand color anywhere in the marketing surfaces. Every primary CTA, every nav link, every solid icon renders in #000000, with a single #090909 pressed state. The only other color appearances are the three macOS terminal traffic-light dots (#ff5f56, #ffbd2e, #27c93f) inside the terminal mockup, and a translucent rgba(59,130,246,0.5) browser focus ring.

Does Ollama's design system have a dark mode?

No — the public marketing surfaces are light-only and rely on the #ffffff canvas end-to-end. The single dark surface in the system is #171717, used on the Max pricing card and rare dark CTA strips. That inversion exists to draw attention to exactly one element per page, not to provide a dark-mode alternative. The Models / Docs surfaces may extend the system, but the captured pages run light-only.

What typography does Ollama use, and what should I use if SF Pro Rounded isn't available?

Headings run SF Pro Rounded at weights 500 and 600 from 36px down to 24px, while body uses ui-sans-serif at 16px / 400 and code uses ui-monospace at 16px and 14px. SF Pro Rounded is Apple-licensed and only ships on macOS and iOS, so Ollama explicitly accepts the heading face will look slightly different on Windows and Linux through system-ui fallback. Nunito is the closest open-source substitute for the display face; Inter pairs well as a near-perfect ui-sans-serif match; JetBrains Mono or Fira Code substitute for ui-monospace.

Why is everything in Ollama's UI shaped like a pill?

The system's shape vocabulary is just two values: 9999px pills for every interactive element and 12px rounded cards. Buttons, search pills, the install-snippet pill, text inputs, and even the terminal traffic-light dots all collapse to {rounded.full}. Cards — pricing tiers, the terminal mockup — sit at 12px. There are no medium-radius compromises, no sharp corners except section dividers. The pill geometry quietly echoes SF Pro Rounded's softened letter terminals without becoming decorative.

Can I use this DESIGN.md to build my own React developer-tools site?

Yes — feed it to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will produce React components that match Ollama's restraint instead of a generic shadcn theme. Every color, type style, radius, and spacing token is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. The spec especially helps developer-tools sites that want a documentation-first feel — single black pill CTA, install-snippet pill below the hero, and one inverted dark card per page.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section: mobile screenshots were not captured, so responsive behavior synthesizes the hamburger drawer, 1-up pricing stack, and install-snippet wrap from desktop evidence and the breakpoint stack. Hover states are omitted by system policy. Form-field styling beyond the search and install-snippet pills isn't present in the captured surfaces, authenticated chrome like account dropdowns and billing settings is out of scope, and the Models and Docs pages — which likely add a sidebar and a docs typography tier — are not in the captured set.

Ollama Design System

Ollama's design system as a DESIGN.md file.

About Ollama DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source ollama.com

AI & LLM Platforms
Developer Tools & IDEs

Ollama runs the most aggressively under-designed marketing surface in AI tooling, and the restraint is the brand. The home page reads like a Markdown README rendered with care: a 36px center-aligned headline above an inline curl install snippet in a soft-gray pill, a single black Download CTA, and a hand-drawn llama as the only ornament. There is no gradient, no hero photography, no marketing pyrotechnics. Pricing tiers, FAQs, and the "your data stays yours" strip all sit on the same paper-white canvas (#ffffff) with quiet #737373 body text carrying the prose. The single inverted moment in the entire system is the dark #171717 Max pricing card, which breaks the flat-white rhythm exactly once per page.

This DESIGN.md file captures the system in machine-readable form: 20 color tokens grouped into surface, text, hairline, and semantic terminal-light groups, 13 typography tokens (SF Pro Rounded display, ui-sans-serif body, ui-monospace code), five corner radii (with 9999px and 12px doing nearly all the work), eight spacing tokens, and 19 components — buttons, inputs, the signature install-snippet pill, terminal mockup card, pricing cards in both light and inverted dark variants, FAQ rows, nav, and footer. The format follows Google Labs' DESIGN.md spec so the same tokens resolve cleanly into Tailwind config, CSS variables, or component-library code.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Ollama's restraint instead of inventing decoration. Reference {colors.primary} or {rounded.full} directly in React components, or use the spec as an audit lens against your own marketing site. The system is worth studying for one reason: it proves a heavily technical product can ship a public surface that looks like its own CLI output, and the restraint scales — every section is the same long-form Markdown column, and every new component falls out of the existing pill plus flat-card plus terminal-mockup vocabulary.

What makes it distinct

Two-color chromepure black #000000 on pure white #ffffff with three neutral grays, no brand accent at all
Pill geometry everywhereevery interactive element collapses to 9999px radius; cards use 12px and nothing else
One inverted moment per pagethe dark #171717 Max pricing card is the only attention-grabbing surface in the entire system
Install snippet as hero CTAan inline curl pill at 48px height replaces the standard hero illustration
Stock Apple typographySF Pro Rounded display, ui-sans-serif body, ui-monospace code, treated as a non-decision

Live at ollama.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ollama.com

Explore Ollama

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Ollama design system FAQ

Common questions about Ollama's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Ollama in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→