Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:JetBrains Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Ollama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.
The entire page exists in pure grayscale. There is zero chromatic color in the interface — no brand blue, no accent green, no semantic red. The only colors that exist are shades between pure black (#000000) and pure white (#ffffff), creating a monochrome environment that lets the user's mental model of "open models" remain uncolored by brand opinion. The Ollama llama mascot, rendered in simple black line art, is the only illustration — and even it's monochrome.
What makes Ollama distinctive is the combination of SF Pro Rounded (Apple's rounded system font) with an exclusively pill-shaped geometry (9999px radius on everything interactive). The rounded letterforms + rounded buttons + rounded containers create a cohesive "softness language" that makes a developer CLI tool feel approachable and friendly rather than intimidating. This is minimalism with warmth — not cold Swiss-style grid minimalism, but the kind where the edges are literally softened.
Key Characteristics: - Pure white canvas with zero chromatic color — completely grayscale - SF Pro Rounded headlines creating a distinctively Apple-like softness - Binary border-radius system: 12px (containers) or 9999px (everything interactive) - Zero shadows — depth comes exclusively from background color shifts and borders - Pill-shaped geometry on all interactive elements (buttons, tabs, inputs, tags) - The Ollama llama as the sole illustration — black line art, no color - Extreme content restraint — the homepage is short, focused, and uncluttered
#000000): Primary headlines, primary links, and the darkest text. The only "color" that demands attention.#262626): Button text on light surfaces, secondary headline weight.#090909): The darkest possible surface — barely distinguishable from pure black, used for footer or dark containers.#ffffff): The primary page background — not off-white, not cream, pure white. Button surfaces for secondary actions.#fafafa): The subtlest possible surface distinction from white — used for section backgrounds and barely-elevated containers.#e5e5e5): Button backgrounds, borders, and the primary containment color. The workhorse neutral.#737373): Secondary body text, footer links, and de-emphasized content. The primary "muted" tone.#525252): Emphasized secondary text, slightly darker than Stone.#a3a3a3): Tertiary text, placeholders, and deeply de-emphasized metadata.#404040): Specific to white-surface button text.#3b82f6 at 50%): The ONLY non-gray color in the entire system — Tailwind's default focus ring, used exclusively for keyboard accessibility. Never visible in normal interaction flow.#d4d4d4): A slightly darker gray for white-surface button borders.SF Pro Rounded, with fallbacks: system-ui, -apple-system, system-uiui-sans-serif, with fallbacks: system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emojiui-monospace, with fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier NewNote: SF Pro Rounded is Apple's system font — it renders with rounded terminals on macOS/iOS and falls back to the system sans-serif on other platforms.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (tight) | normal | Maximum impact, rounded letterforms |
| Section Heading | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (tight) | normal | Feature section titles |
| Sub-heading | SF Pro Rounded / ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (tight) | normal | Card headings, feature names |
| Card Title | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | Medium emphasis headings |
| Body Large | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero descriptions, button text |
| Body / Link | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | Standard body text, navigation |
| Caption | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
| Small | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | Smallest sans-serif text |
| Code Body | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | Inline code, commands |
| Code Caption | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, secondary |
| Code Small | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | Tags, labels |
Gray Pill (Primary)
- Background: Light Gray (#e5e5e5)
- Text: Near Black (#262626)
- Padding: 10px 24px
- Border: thin solid Light Gray (1px solid #e5e5e5)
- Radius: pill-shaped (9999px)
- The primary action button — understated, grayscale, always pill-shaped
White Pill (Secondary)
- Background: Pure White (#ffffff)
- Text: Button Text Dark (#404040)
- Padding: 10px 24px
- Border: thin solid Border Light (1px solid #d4d4d4)
- Radius: pill-shaped (9999px)
- Secondary action — visually lighter than Gray Pill
Black Pill (CTA)
- Background: Pure Black (#000000)
- Text: Pure White (#ffffff)
- Radius: pill-shaped (9999px)
- Inferred from "Create account" and "Explore" buttons
- Maximum emphasis — black on white
#fafafa)1px solid #e5e5e5) when needed1px solid #e5e5e5#3b82f6 at 50%) ring#a3a3a3)Tab Pills - Pill-shaped tab selectors (e.g., "Coding" | "OpenClaw") - Active: Light Gray bg; Inactive: transparent - All pill-shaped (9999px)
Model Tags - Small pill-shaped tags (e.g., "ollama", "launch", "claude") - Light Gray background, dark text - The primary way to browse models
Terminal Command Block
- Monospace code showing ollama run commands
- Minimal styling — just a bordered 12px-radius container
- Copy button integrated
Integration Grid - Grid of integration logos (Codex, Claude Code, OpenCode, LangChain, etc.) - Each in a bordered pill or card with icon + name - Tabbed by category (Coding, Documents & RAG, Automation, Chat)
This binary system is extreme and distinctive. There is no 4px, no 8px, no gradient of roundness. Elements are either containers (12px) or interactive (pill).
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, most content |
| Bordered (Level 1) | 1px solid #e5e5e5 |
Cards, code blocks, buttons |
Shadow Philosophy: Ollama uses zero shadows. This is not an oversight — it's a deliberate design decision. Every other major AI product site uses at least subtle shadows. Ollama's flat, shadowless approach creates a paper-like experience where elements are distinguished purely by background color and single-pixel borders. Depth is communicated through content hierarchy and typography weight, not visual layering.
#ffffff) as the page background — never off-white or cream| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, stacked everything, hamburger nav |
| Small Tablet | 640–768px | Minor adjustments to spacing |
| Tablet | 768–850px | 2-column layouts begin |
| Desktop | 850–1024px | Standard layout, expanded features |
| Large Desktop | 1024–1280px | Maximum content width |