01 — Color

## Color Palette

Pure black on pure white with three neutral grays for body and metadata. The single inverted dark surface — used for the "Max" pricing card — is the only colored moment in the entire system.

Brand

Pure Black (primary)

#000000

Every primary CTA, every black pill, every nav link, every solid icon

Ink Deep

#090909

Pressed-state black for the primary pill

Surface

Canvas

#ffffff

The page itself — nearly every surface

Soft Surface

#fafafa

Install-snippet pill, search pill, secondary chip backgrounds

Surface Dark

#171717

The single inverted "Max" pricing card surface

Hairline

#e5e5e5

1px card border, FAQ row divider, footer top-line

Hairline Strong

#d4d4d4

Slightly stronger divider where extra separation is needed

Text

Ink

#000000

Headlines, primary nav links, button text on light, prices

Charcoal

#525252

List-item text and secondary copy

Body

#737373

Default body color, FAQ answers, footer link text

Mute

#a3a3a3

Caption text, terminal "comment" gray, lowest-emphasis

Terminal Traffic Lights (mockup only)

Terminal Red

#ff5f56

Close-window dot

Terminal Yellow

#ffbd2e

Minimize dot

Terminal Green

#27c93f

Zoom dot

02 — Typography

## Typography Scale

SF Pro Rounded for display, system sans for body, ui-monospace for code. The roundness of the heading face is the only personality the chrome carries.

display-xlSF Pro Rounded
36px / 500 / lh 1.11
The easiest way to build with open models
display-lgSF Pro Rounded
30px / 500 / lh 1.2
Pricing
heading-lgSF Pro Rounded
24px / 600 / lh 1.33
Automate your work
heading-mdui-sans-serif
20px / 500 / lh 1.4
Pro tier name or in-card title
heading-smui-sans-serif
18px / 500 / lh 1.56
FAQ question label
body-mdui-sans-serif
16px / 400 / lh 1.5
Default body copy carries every paragraph, FAQ answer, and long-form prose section at 16px regular weight.
body-strongui-sans-serif
16px / 500 / lh 1.5
Inline emphasis or primary nav link
body-smui-sans-serif
14px / 400 / lh 1.43
Feature bullet or footer link
body-sm-strongui-sans-serif
14px / 500 / lh 1.43
Button label, pricing eyebrow
caption-smui-sans-serif
12px / 400 / lh 1.33
Footer copyright row
code-mdui-monospace
16px / 400 / lh 1.5
curl -fsSL https://example.com/install.sh | sh
code-smui-monospace
14px / 400 / lh 1.43
$ ollama --version
button-mdui-sans-serif
14px / 500 / lh 1
Download

03 — Components

## Button Variants

A black pill, a white outlined pill, a white pill on dark, and a disabled state. That is the entire button vocabulary.

button-primary

bg primary · text on-primary · rounded full · 36px height

button-primary-active

bg ink-deep · text on-primary

button-secondary

bg canvas · text ink · 1px hairline-strong · rounded full

button-pill-on-dark

bg canvas · text ink · sits inside dark Max pricing card

button-disabled

bg surface-soft · text mute

Search models

search-pill

bg surface-soft · rounded full · 36px height · centered in nav

$ curl -fsSL https://ollama.com/install.sh | sh ⧉

install-snippet

bg surface-soft · code-md · 48px height · rounded full · the home page's signature CTA pill

ollama launch openclaw

command-tag

bg surface-soft · code-sm · rounded full · padding 6/12

04 — Cards

## Card Examples

Two card families: the terminal mockup with macOS traffic lights, and the pricing tier card. The third tier flips to the dark inverted variant.

Terminal Card

$ ollama launch openclaw
Downloading model...
Configuring weights...
Setting user limits...
→ openclaw is running

Pricing Cards

🦙

Free

Get started with Ollama

$0

- Automate coding, document analysis, and other tasks with open models
- Keep your data private
- Run models on your hardware

🦙

Pro

Solve harder tasks, faster

$20/mo

- Everything in Free, plus:
- Access larger, more powerful cloud models
- Run a model at a time with 60s cloud usage
- Upload and share private models

🦙

Max

For your most demanding work

$100/mo

- Everything in Pro, plus:
- Run 10 cloud models at a time
- 10x more usage than Pro

Dark CTA Strip

### Get started with Ollama

05 — Disclosure

## FAQ Rows

Stacked rows with 16px vertical padding and a 1px Hairline divider below each. Always expanded — no accordion collapse.

Which models are available?

See the full list of cloud-enabled models in the documentation.

Do models support tool calling?

Models support tool calling and run agent workflows before they go live. If something isn't working, let us know.

What quantization or data format do cloud models use?

Native weights, as released by the model provider. On modern NVIDIA hardware, models may use accelerated data formats supported by Blackwell and Hopper architectures.

How fast is Ollama?

Speed depends on model size, architecture, and hardware optimization. We target and monitor for low time-to-first-token and high throughput across all cloud models.

06 — Forms

## Form Elements

All inputs are pills with rounded-full corners. Focus relies on the browser-default translucent blue ring — the only blue in the system.

Default Input canvas bg · 1px hairline · rounded full · 40px height
Focused Input canvas bg · ink border · browser focus ring
Search Pill
Search models surface-soft bg · 36px height · centered in nav
Submit
button-primary · always full-width below stacked fields

07 — Layout

## Spacing Scale

8px base unit with finer 2/4/6px steps. Section rhythm sits at 88px — the universal vertical gap between major content blocks.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 88

08 — Shapes

## Border Radius Scale

Two values do all the work: pill (9999px) for every interactive element and 12px for cards. Nothing in between.

none · 0

Nav, footer, FAQ row dividers

sm · 6

Inline code chips, command tags

md · 8

Rare medium-radius surfaces

lg · 12

Pricing cards, terminal mockup

full · 9999

Every button, pill input, traffic-light dot

09 — Depth

## Elevation & Depth

No drop shadows. The only "elevation" beyond a 1px hairline border is the inverted dark surface used on the highest-tier pricing card.

Level 0 — Flat
no border / no shadow
Level 1 — Hairline
1px solid #e5e5e5
Level 2 — Inverted Dark
bg #171717 · the system's only "elevated" surface

10 — Responsive

## Responsive Behavior

5 breakpoint zones with a documentation-first collapse strategy. Section rhythm shrinks 88px → 64px → 48px on the way down.

Name | Width | Key Changes
--- | --- | ---
desktop-large | 1280px+ | Default — 720px content column, 3-up pricing
desktop | 1024px | Same layout; nav remains horizontal
tablet | 850px | Pricing 3-up → 2+1; search pill compresses
tablet-narrow | 768px | Pricing collapses to 1-up stacked; nav becomes hamburger
mobile | 640px | Hero drops 36px → ~28px; install-snippet wraps

375mobile
640mobile
768tablet-narrow
1024desktop
1280desktop-large

### Touch Targets

- WCAG AA: button-primary and button-secondary at 36px height with 20px padding (effective ~36×80px tappable).
- Text input: 40px height with 16px padding.
- Search pill: 36px height with 16px padding.
- Footer links: 12px caption with ~12px line-height + 8px vertical padding (~32–36px tap row).

### Collapsing Strategy

- Primary nav: desktop horizontal → tablet-narrow hamburger drawer at 768px. Black "Download" CTA stays visible at all widths.
- Search pill: 360px → 240px → icon-only with overlay on tap.
- Pricing grid: 3-up → 2+1 → 1-up stacked at 850, 768, and below.
- Automate split: 50/50 desktop → vertical stack on tablet.
- Hero headline: 36px → ~28px at mobile.
- Section spacing: 88px → 64px → 48px.
- Install snippet: wraps to 2 lines on narrow screens; copy icon stays right-anchored.