返回列表
行业: 开发者工具与 IDEWebsite

Ollama

Ollama 采用近乎极致的文档优先设计，把首页处理成一份 Markdown README：纸白画布、居中标题、单一黑色按钮和极少装饰，突出直接、开放与开发者友好。

Light UIMinimalGradientDeveloper-focusedDesign System
Ollama 网站预览
设计系统
品牌色彩 · 19

primary

#000000

--color-primary

on primary

#FFFFFF

--color-on-primary

ink

#000000

--color-ink

ink deep

#090909

--color-ink-deep

charcoal

#525252

--color-charcoal

body

#737373

--color-body

mute

#A3A3A3

--color-mute

canvas

#FFFFFF

--color-canvas

surface soft

#FAFAFA

--color-surface-soft

surface card

#FFFFFF

--color-surface-card

hairline

#E5E5E5

--color-hairline

hairline strong

#D4D4D4

--color-hairline-strong

on dark

#FFFFFF

--color-on-dark

surface dark

#171717

--color-surface-dark

link

#000000

--color-link

link mute

#737373

--color-link-mute

terminal red

#FF5F56

--color-terminal-red

terminal yellow

#FFBD2E

--color-terminal-yellow

terminal green

#27C93F

--color-terminal-green

字体系统

字体家族

SF Pro Rounded / ui-sans-serif / ui-monospace

字重

500600400

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIMinimalGradientDeveloper-focusedDesign System
设计文档

品牌设计系统的完整 Markdown 文档

Ollama — Style Reference

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

**Theme:** light

**Source website:** [https://ollama.com/](https://ollama.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#000000` | `--color-primary` | primary role extracted from the source design |

| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |

| ink | `#000000` | `--color-ink` | ink role extracted from the source design |

| ink deep | `#090909` | `--color-ink-deep` | ink deep role extracted from the source design |

| charcoal | `#525252` | `--color-charcoal` | charcoal role extracted from the source design |

| body | `#737373` | `--color-body` | body role extracted from the source design |

| mute | `#a3a3a3` | `--color-mute` | mute role extracted from the source design |

| canvas | `#ffffff` | `--color-canvas` | canvas role extracted from the source design |

| surface soft | `#fafafa` | `--color-surface-soft` | surface soft role extracted from the source design |

| surface card | `#ffffff` | `--color-surface-card` | surface card role extracted from the source design |

| hairline | `#e5e5e5` | `--color-hairline` | hairline role extracted from the source design |

| hairline strong | `#d4d4d4` | `--color-hairline-strong` | hairline strong role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| on dark mute | `rgba(255,255,255,0.7)` | `--color-on-dark-mute` | on dark mute role extracted from the source design |

| surface dark | `#171717` | `--color-surface-dark` | surface dark role extracted from the source design |

| focus ring | `rgba(59,130,246,0.5)` | `--color-focus-ring` | focus ring role extracted from the source design |

| link | `#000000` | `--color-link` | link role extracted from the source design |

| link mute | `#737373` | `--color-link-mute` | link mute role extracted from the source design |

| terminal red | `#ff5f56` | `--color-terminal-red` | terminal red role extracted from the source design |

| terminal yellow | `#ffbd2e` | `--color-terminal-yellow` | terminal yellow role extracted from the source design |

| terminal green | `#27c93f` | `--color-terminal-green` | terminal green role extracted from the source design |

Tokens — Typography

SF Pro Rounded · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500, 600
  • **Sizes:** 36px, 30px, 24px
  • **Line height:** 1.11, 1.2, 1.33
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • ui-sans-serif · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500, 400
  • **Sizes:** 20px, 18px, 16px, 14px, 12px
  • **Line height:** 1.4, 1.56, 1.5, 1.43, 1.33, 1
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • ui-monospace · `--font-family-3`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 400
  • **Sizes:** 16px, 14px
  • **Line height:** 1.5, 1.43
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | display-xl | 36px | 1.11 | 0 | `--text-display-xl` |

    | display-lg | 30px | 1.2 | 0 | `--text-display-lg` |

    | heading-lg | 24px | 1.33 | 0 | `--text-heading-lg` |

    | heading-md | 20px | 1.4 | 0 | `--text-heading-md` |

    | heading-sm | 18px | 1.56 | 0 | `--text-heading-sm` |

    | body-md | 16px | 1.5 | 0 | `--text-body-md` |

    | body-strong | 16px | 1.5 | 0 | `--text-body-strong` |

    | body-sm | 14px | 1.43 | 0 | `--text-body-sm` |

    | body-sm-strong | 14px | 1.43 | 0 | `--text-body-sm-strong` |

    | caption-sm | 12px | 1.33 | 0 | `--text-caption-sm` |

    | code-md | 16px | 1.5 | 0 | `--text-code-md` |

    | code-sm | 14px | 1.43 | 0 | `--text-code-sm` |

    | button-md | 14px | 1 | 0 | `--text-button-md` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 2px | `--spacing-xxs` |

    | xs | 4px | `--spacing-xs` |

    | sm | 8px | `--spacing-sm` |

    | md | 12px | `--spacing-md` |

    | lg | 16px | `--spacing-lg` |

    | xl | 24px | `--spacing-xl` |

    | xxl | 32px | `--spacing-xxl` |

    | section | 88px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | none | 0px | `--radius-none` |

    | sm | 6px | `--radius-sm` |

    | md | 8px | `--radius-md` |

    | lg | 12px | `--radius-lg` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 88px
  • **Card padding:** 16px
  • **Element gap:** 12px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 20px`
  • **height:** `36px`

    • button primary active

    **Role:** button primary active component

  • **backgroundColor:** `{colors.ink-deep}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 20px`
  • **height:** `36px`

    • button pill on dark

    **Role:** button pill on dark component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 20px`

    • button disabled

    **Role:** button disabled component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.mute}`
  • **rounded:** `{rounded.full}`

    • search pill

    **Role:** search pill component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 16px`
  • **height:** `36px`

    • search pill focused

    **Role:** search pill focused component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.full}`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 16px`
  • **height:** `40px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.full}`

    • install snippet

    **Role:** install snippet component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.code-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `12px 20px`
  • **height:** `48px`

    • command tag

    **Role:** command tag component

  • **backgroundColor:** `{colors.surface-soft}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.code-sm}`
  • **rounded:** `{rounded.full}`
  • **padding:** `6px 12px`

    • terminal card

    **Role:** terminal card component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.code-sm}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `16px`

    • terminal traffic lights

    **Role:** terminal traffic lights component

  • **rounded:** `{rounded.full}`
  • **size:** `12px`

    • pricing card

    **Role:** pricing card component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `32px`

    • pricing card dark

    **Role:** pricing card dark component

  • **backgroundColor:** `{colors.surface-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `32px`

    • feature bullet

    **Role:** feature bullet component

  • **textColor:** `{colors.charcoal}`
  • **typography:** `{typography.body-sm}`

    • faq row

    **Role:** faq row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.none}`
  • **padding:** `16px 0px`

    • link inline

    **Role:** link inline component

  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`

    • link mute

    **Role:** link mute component

  • **textColor:** `{colors.body}`
  • **typography:** `{typography.body-sm}`

    • primary nav

    **Role:** primary nav component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-strong}`
  • **rounded:** `{rounded.none}`
  • **height:** `56px`

    • footer section

    **Role:** footer section component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.caption-sm}`
  • **rounded:** `{rounded.none}`
  • **padding:** `32px 24px`

    • cta strip dark

    **Role:** cta strip dark component

  • **backgroundColor:** `{colors.surface-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.heading-lg}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px 32px`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live Ollama website](https://ollama.com/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://ollama.com/).

    同类品牌推荐

    Composio

    Dark UI · Gradient

    Cursor

    Light UI · Editorial

    Expo

    Light UI · Editorial

    Ollama 设计系统 | 品牌模板 · ViboDesign