Ollama

version alpha

name Ollama

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

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

Colors

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.

Typography

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

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