01 — Color
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
Surface
Text
Terminal Traffic Lights (mockup only)
02 — Typography
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.
03 — Components
A black pill, a white outlined pill, a white pill on dark, and a disabled state. That is the entire button vocabulary.
04 — Cards
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
Pricing Cards
Free
Get started with Ollama
$0
Pro
Solve harder tasks, faster
$20
Max
For your most demanding work
$100
Dark CTA Strip
05 — Disclosure
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
All inputs are pills with rounded-full corners. Focus relies on the browser-default translucent blue ring — the only blue in the system.
07 — Layout
8px base unit with finer 2/4/6px steps. Section rhythm sits at 88px — the universal vertical gap between major content blocks.
08 — Shapes
Two values do all the work: pill (9999px) for every interactive element and 12px for cards. Nothing in between.
Nav, footer, FAQ row dividers
Inline code chips, command tags
Rare medium-radius surfaces
Pricing cards, terminal mockup
Every button, pill input, traffic-light dot
09 — Depth
No drop shadows. The only "elevation" beyond a 1px hairline border is the inverted dark surface used on the highest-tier pricing card.
10 — Responsive
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 |