ollama
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
colors
#000000 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Ollama-design-analysis
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
… components
display headline
body copy from ollama tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#000000",
font: ""ui-sans-serif", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on ollama's visual identity.