Ollama Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

19tokens

8type steps

4radius steps

2pxspacing base

Ollama, in one page

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

Do's and don'ts

Do

Treat the page like a Markdown document: single reading column, plenty of {spacing.section} air between sections, no decorative dividers.
Use {component.button-primary} (black pill) for every primary action. There is no green, no blue, no brand-tinted CTA.
Default to {rounded.full} for any interactive element. Cards get {rounded.lg} (12px) and that is the only exception.
Use {typography.display-xl} SF Pro Rounded for the hero headline and {typography.body-md} system sans for everything else. Avoid intermediate display sizes.
Reserve {component.pricing-card-dark} (the inverted dark surface) for exactly one "look here" moment per page — never use it twice.
Render install commands and CLI examples inside {component.install-snippet} or {component.terminal-card} with {typography.code-md} / {typography.code-sm}. Code is a first-class component.
Keep the llama mascot the only illustration in the system. It is the brand.

Don't

Don't introduce gradients, drop shadows, or atmospheric backgrounds. The canvas is pure {colors.canvas}.
Don't add brand colors. The system is {colors.primary} (black) on {colors.canvas} (white) with {colors.body} (gray) text. That is it.
Don't soften pills or sharpen cards — pills stay {rounded.full}, cards stay {rounded.lg}. Don't introduce {rounded.md} for buttons or {rounded.full} for cards.
Don't lift cards with shadows. Use a 1px {colors.hairline} border or invert to {colors.surface-dark} — those are the only two card treatments.
Don't replace ui-sans-serif with a branded display body face. The system relies on system-ui rendering to feel native.
Don't fill long-form pages with marketing chrome. FAQ answers stay in {colors.body} body-md prose with no decorative containers.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Ollama design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: SF Pro Rounded, ui-sans-serif, ui-monospace, Nunito
- scale: 12, 14, 16, 18, 20, 24, 30, 36
- weights: 400, 500, 600

Shape:
- radius: 0, 6, 8, 12

Spacing: 2, 4, 6, 8, 12, 16, 24, 32, 88

Rules:
- Treat the page like a Markdown document: single reading column, plenty of `{spacing.section}` air between sections, no decorative dividers.
- Use `{component.button-primary}` (black pill) for every primary action. There is no green, no blue, no brand-tinted CTA.
- Default to `{rounded.full}` for any interactive element. Cards get `{rounded.lg}` (12px) and that is the only exception.
- Use `{typography.display-xl}` SF Pro Rounded for the hero headline and `{typography.body-md}` system sans for everything else. Avoid intermediate display sizes.
- Reserve `{component.pricing-card-dark}` (the inverted dark surface) for exactly one "look here" moment per page — never use it twice.
- Render install commands and CLI examples inside `{component.install-snippet}` or `{component.terminal-card}` with `{typography.code-md}` / `{typography.code-sm}…

Avoid:
- Don't introduce gradients, drop shadows, or atmospheric backgrounds. The canvas is pure `{colors.canvas}`.
- Don't add brand colors. The system is `{colors.primary}` (black) on `{colors.canvas}` (white) with `{colors.body}` (gray) text. That is it.
- Don't soften pills or sharpen cards — pills stay `{rounded.full}`, cards stay `{rounded.lg}`. Don't introduce `{rounded.md}` for buttons or `{rounded.full}` for…
- Don't lift cards with shadows. Use a 1px `{colors.hairline}` border or invert to `{colors.surface-dark}` — those are the only two card treatments.
- Don't replace `ui-sans-serif` with a branded display body face. The system relies on `system-ui` rendering to feel native.
- Don't fill long-form pages with marketing chrome. FAQ answers stay in `{colors.body}` body-md prose with no decorative containers.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Brand & Accent

Pure Black ({colors.primary} — #000000): the brand. Every primary CTA, every black pill, every link in the nav, and every solid icon. There is no other "brand color."
Ink Deep ({colors.ink-deep} — #090909): pressed-state black for the primary pill — a single notch below pure.

Surface

Canvas ({colors.canvas} — #ffffff): the page itself. Nearly every surface in the system.
Soft Surface ({colors.surface-soft} — #fafafa): install-snippet pill background, search pill, secondary chip backgrounds, alternating row fill where one is needed.
Surface Dark ({colors.surface-dark} — #171717): the dark "Max" pricing card and dark CTA strips. The single inverted surface in the system.
Hairline ({colors.hairline} — #e5e5e5): 1px card border, divider line above footer, divider between FAQ rows.
Hairline Strong ({colors.hairline-strong} — #d4d4d4): rare slightly stronger divider where extra separation is needed (e.g., between unrelated FAQ groups).

Text

Ink ({colors.ink} — #000000): all headlines, primary nav links, button text on light surfaces, prices on pricing cards.
Charcoal ({colors.charcoal} — #525252): list-item text and disabled-state secondary copy.
Body ({colors.body} — #737373): default body color for paragraph copy, FAQ answers, footer link text — the system's most-used text color after pure black.
Mute ({colors.mute} — #a3a3a3): caption text, command-line "comment" gray inside terminal mockups, lowest-emphasis utility text.
On Dark ({colors.on-dark} — #ffffff): primary text on {colors.surface-dark}.
On Dark Mute ({colors.on-dark-mute} — rgba(255,255,255,0.7)): secondary copy inside the dark "Max" pricing card.

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:

Terminal Red ({colors.terminal-red} — #ff5f56): close-window dot.
Terminal Yellow ({colors.terminal-yellow} — #ffbd2e): minimize dot.
Terminal Green ({colors.terminal-green} — #27c93f): zoom dot.

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

Focus

Focus Ring ({colors.focus-ring} — rgba(59,130,246,0.5)): translucent blue browser-default focus ring around interactive elements. The only blue in the system.

Type scaleRead the full spec

Font Family

SF Pro Rounded (display headings) — Apple's rounded geometric sans, used at weights 500 and 600 for headlines from {typography.display-xl} (36px) down to {typography.heading-lg} (24px). Falls back to system-ui → -apple-system.
ui-sans-serif (body, links, buttons, captions) — the operating system's default sans-serif. Carries every non-display text role at 12–20px. Falls back through system-ui and platform emoji families.
ui-monospace (code, install snippet, command tags) — the OS default monospace. Used inside the terminal mockup, the inline curl install pill, and any inline <code> formatting. Falls back to SFMono-Regular → Menlo → Monaco → Consolas.

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	Use
`{typography.display-xl}`	36px	500	1.11	Hero headline ("The easiest way to build with open models")
`{typography.display-lg}`	30px	500	1.2	Major section headlines ("Pricing", "Frequently asked questions")
`{typography.heading-lg}`	24px	600	1.33	Section subheading inside body ("Automate your work", "Start local. Scale cloud.")
`{typography.heading-md}`	20px	500	1.4	Pricing tier name ("Free", "Pro", "Max"), card title
`{typography.heading-sm}`	18px	500	1.56	FAQ question label, in-card subtitle
`{typography.body-md}`	16px	400	1.5	Default body, FAQ answers, paragraph copy
`{typography.body-strong}`	16px	500	1.5	Inline emphasis, primary-nav link
`{typography.body-sm}`	14px	400	1.43	Feature bullet ("Access larger models on data-center-grade hardware"), footer link
`{typography.body-sm-strong}`	14px	500	1.43	Button label, pricing-card eyebrow ("Solve harder tasks, faster")
`{typography.caption-sm}`	12px	400	1.33	Footer copyright row, smallest meta text
`{typography.code-md}`	16px	400	1.5	Install-snippet `curl` line, in-terminal command
`{typography.code-sm}`	14px	400	1.43	Terminal output line, inline `<code>` chips
`{typography.button-md}`	14px	500	1	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.

Components and layoutRead the full spec

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

Buttons

button-primary — the universal Ollama CTA

Background {colors.primary}, text {colors.on-primary}, type {typography.button-md}, padding 8px 20px, height 36px, rounded {rounded.full}.
Used for "Download" (top nav), "Sign in" (top nav, paired with Download), "Create account", "Get Pro", "Get Max" — every primary action in the system.
Pressed state lives in button-primary-active — background drops to {colors.ink-deep}.

button-secondary — outline alternative on light canvas

Background {colors.canvas}, text {colors.ink}, 1px solid {colors.hairline-strong}, type {typography.button-md}, padding 8px 20px, height 36px, rounded {rounded.full}.
Used as a secondary affordance — e.g., the "Sign in" pill in the top nav when paired with the black "Download" pill, "See more apps →" arrow link in compact form.

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

Background {colors.canvas}, text {colors.ink}, type {typography.button-md}, rounded {rounded.full}.
Sits inside the dark "Max" pricing card as the "Get Max" CTA — inverts the standard primary so the dark card itself becomes the visual anchor and the white pill reads as the CTA.

button-disabled

Background {colors.surface-soft}, text {colors.mute}, rounded {rounded.full} — flat soft gray.

Inputs & Forms

search-pill + search-pill-focused

Default: background {colors.surface-soft}, text {colors.ink}, type {typography.body-sm}, padding 8px 16px, height 36px, rounded {rounded.full}. Anchored in the center of the primary nav with a small magnifier icon prefix and "Search models" placeholder.
Focused: background flips to {colors.canvas} and the browser-default {colors.focus-ring} translucent blue ring appears.

text-input + text-input-focused

Default: background {colors.canvas}, 1px solid {colors.hairline}, type {typography.body-md}, padding 8px 16px, height 40px, rounded {rounded.full}.
Focused: 1px ink border + browser-default focus ring.

install-snippet — the signature install pill

Background {colors.surface-soft}, text {colors.ink} rendered in {typography.code-md}, padding 12px 20px, height 48px, rounded {rounded.full}.
Contains the literal curl -fsSL https://ollama.com/install.sh | sh install command with a small copy-icon at the right edge. Sits directly below the hero headline as the page's most prominent "CTA."

command-tag — small inline command chip

Background {colors.surface-soft}, text {colors.ink} in {typography.code-sm}, padding 6px 12px, rounded {rounded.full}.
Used inside the "Automate your work" section for the ollama launch openclaw example chip and similar inline-command demos.

Cards & Containers

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

Container: background {colors.canvas}, 1px solid {colors.hairline}, padding {spacing.lg} (16px), rounded {rounded.lg}.
Header: three {component.terminal-traffic-lights} dots (red/yellow/green at 12px) anchored to the top-left of the card.
Body: terminal output rendered in {typography.code-sm} with comments in {colors.mute} and active commands in {colors.ink}.

terminal-traffic-lights

Three 12px filled circles at {rounded.full}: {colors.terminal-red}, {colors.terminal-yellow}, {colors.terminal-green}. Sits as a row of three with {spacing.xs} gaps between dots inside the terminal card header.

pricing-card — Free / Pro tiers

Container: background {colors.canvas}, 1px solid {colors.hairline}, padding {spacing.xxl} (32px), rounded {rounded.lg}.
Layout: small llama mascot icon (~32px) at top, tier name in {typography.heading-md}, one-line tier description, large price in {typography.display-lg} ($0 / $20), single {component.button-primary} CTA, divider, {typography.body-sm-strong} "Everything in Free, plus:" header, list of {component.feature-bullet} rows.

pricing-card-dark — Max tier (inverted)

Identical layout to pricing-card but with {colors.surface-dark} background, {colors.on-dark} text, {colors.on-dark-mute} secondary text, and {component.button-pill-on-dark} CTA. The inversion is the system's single "look here" cue.

feature-bullet — pricing card list item

Inline ✓ checkmark at {colors.ink} followed by {typography.body-sm} text in {colors.charcoal}. No background, no border, just stacked rows with {spacing.sm} between them.

faq-row — /pricing FAQ entry

Container: background {colors.canvas}, padding 16px 0, 1px bottom border {colors.hairline}.
Question: {typography.heading-sm} (18px / 500) in {colors.ink}.
Answer: {typography.body-md} (16px / 400) in {colors.body}, sitting directly below the question with {spacing.xs} gap. Always expanded — no accordion collapse.

cta-strip-dark — rare dark CTA band

Responsive behaviourRead the full spec

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

Primary nav: desktop horizontal → tablet-narrow hamburger drawer at 768px. The black "Download" CTA stays visible at all widths; it never collapses into the menu.
Search pill: desktop fixed width ~360px → tablet compressed to ~240px → mobile collapses to icon-only with a full-width overlay on tap.
Pricing grid: 3-up → 2+1 → 1-up stacked at 850, 768, and below. The dark "Max" card stays in its inverted treatment at every breakpoint.
Automate-your-work split: desktop 50/50 → tablet stacks vertical with text above terminal mockup.
Hero headline: {typography.display-xl} (36px) at desktop, scaling to ~28px at mobile with line-height holding at ~1.15.
Section spacing: {spacing.section} (88px) desktop → 64px tablet → 48px mobile.
Install-snippet pill: wraps curl text to a second line on narrow screens rather than truncating; the copy-icon stays anchored to the right edge.

Image Behavior

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-ollama {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #000000;
  --link-hover-color: #000000;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-serif);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

zapier 79.1%
kalita 75.7%
vibrant 74.8%
onibuscoffee 73.9%
cafe 73.4%

Where this came from

Source document: volt/design-md/ollama/DESIGN.md · 31.7 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.