# Ollama — Design System
> The easiest way to build with open models.
- **Canonical:** https://uiuxskills.com/library/ollama
- **Source:** https://ollama.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:58.966Z

---

---
version: alpha
name: Ollama
description: The easiest way to build with open models.
tone: Direct, technical, and efficient. The tone is focused on utility and developer productivity.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#171717"
  on-surface-variant: "#737373"
  error: "#F87171"
  warning: "#FACC15"
  success: "#4ADE80"
  outline: "#E5E5E5"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: monospace
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.body-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "#FFFFFF"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface-container}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  code-block:
    backgroundColor: "#171717"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Ollama provides a clean, developer-focused interface for running and managing local LLMs. The visual identity is minimalist and functional, prioritizing clarity and terminal-like simplicity to appeal to technical users.

## Colors

The color strategy relies on a high-contrast, monochromatic palette that emphasizes utility and readability, using subtle grays to define structure.

*   Primary (#000000): The core color for primary CTAs, links, and focus states.
*   Surface (#FFFFFF): The base background color for the application.
*   Surface-container (inferred) (#F5F5F5): Used for secondary containers and cards to provide subtle visual separation.
*   On-surface (#171717): Primary text color for high-readability content.
*   On-surface-variant (#737373): Secondary text color for labels and supporting information.
*   Error (#F87171): Used for critical system alerts and error states.
*   Warning (#FACC15): Used for alerts and status indicators.
*   Success (#4ADE80): Used for success states and confirmation icons.
*   Outline (inferred) (#E5E5E5): Used for borders, dividers, and container edges.
*   Focus-ring (inferred) (#000000): Used for keyboard navigation focus states.

## Typography

Typography is strictly sans-serif for interface elements, utilizing a clean, readable scale, with monospace reserved specifically for technical code and terminal commands.

*   Display-lg (inferred) & Display-md: Used for hero headlines and primary section headers.
*   Headline-lg & Headline-md (inferred): Used for sub-headers and card titles.
*   Body-md & Body-sm: Standard text for paragraphs, descriptions, and supporting labels.
*   Label-sm (inferred): Monospace font used for terminal commands and code snippets.

## Layout

The layout follows a centered, single-column max-width container approach. Spacing is governed by a 4px base unit, with generous vertical margins between sections to maintain readability. The page structure follows a consistent flow: nav, hero, features, pricing, and footer. The hero pattern features a centered headline and subhead, paired with a prominent terminal-style code block and a primary CTA. The design is mobile-first, ensuring content scales gracefully across viewports.

## Elevation & Depth

Elevation is used sparingly to distinguish cards from the background, utilizing subtle single-layer shadows across three levels. These values are inferred to support a clean, modern SaaS aesthetic.

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard card lift.
*   Elevation.lg: Depth for modals or active drawer overlays.

## Shapes

The design employs a functional approach to corner radii, balancing professional structure with approachable geometry. 

Cards utilize `rounded.xl` (16px) to provide a soft, modern container shape, while interactive elements like buttons use `rounded.full` (9999px) to emphasize their action-oriented nature. Smaller UI components, such as badges and swatches, use `rounded.sm` (4px) to maintain a crisp, compact appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
The primary action button uses `{colors.primary}` with white text and a `rounded.full` shape. Use this for the main conversion point on a page, such as "Download" or "Get Started."

### Card
The card component uses `{colors.surface}` with an `{colors.outline}` border and `{rounded.xl}` corners. Use these to group related feature information or pricing tiers.

### Input Field
The input field features a `{colors.surface-container}` background and `{colors.outline}` border. When active, the border updates to `{colors.primary}` via the `input-field-focus` state.

### Code Block
The code block uses a dark background (`#171717`) and `{typography.label-sm}` to mimic a terminal environment. Use these to display CLI commands or technical snippets.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.success}` for non-confirmation actions. |
| Use `{typography.label-sm}` for terminal commands. | Mix font families; stick to system sans-serif. |
| Apply `{rounded.xl}` to all card components. | Apply `{rounded.full}` to card components. |
| Maintain `{spacing.md}` between form elements. | Use excessive shadows on `{card}` components. |
| Use `{colors.error}` for critical system alerts. | Use low-contrast text on `{colors.surface-container}`. |
| Ensure all links use `{colors.primary}`. | Use `{typography.display-lg}` for body text. |
| Use `{colors.outline}` for all section dividers. | Use high-elevation shadows for standard cards. |
| Keep code blocks in `{code-block}` style. | Use standard body text for command-line inputs. |

## Content Style

CTA labels should be imperative, concise, and action-oriented. Use verbs like "Download," "Launch," or "Upgrade" to clearly communicate the expected outcome.

Headings should be direct and benefit-focused. Avoid marketing fluff; prioritize clarity so the user immediately understands the utility of the feature or section.

Maintain a high density of information through short, scannable paragraphs. Use bulleted lists frequently to break up technical details and improve readability for developers scanning the page.

## Imagery & Icons

The imagery style is minimal, focusing on clarity through simple, clean iconography. Visuals should avoid decorative clutter, instead using terminal-style code blocks and direct UI representations to convey functionality. Iconography should be consistent with the minimalist aesthetic, using thin, precise strokes that align with the `{colors.on-surface-variant}` color palette.