skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-ollama

Apply Ollama's grayscale design system tokens and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#minimalist#design system#design tokens#ollama#grayscale#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-ollama-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ollama
Source: https://github.com/deepparser/skills/tree/main/design-ollama
Command: npx skills add https://github.com/deepparser/skills --skill design-ollama-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Ollama's distinctive minimalist visual identity requires exact knowledge of its grayscale palette, binary border-radius system, and typography rules, which are tedious to reverse-engineer from the live site. ## Core Features & Use Cases - Complete Design Tokens: Provides exact hex values, typography scales (SF Pro Rounded display, ui-sans-serif body, ui-monospace code), spacing units, and the binary 12px/9999px radius system. - Component Specifications: Defines pill-shaped buttons, tab pills, model tags, terminal command blocks, and integration grids with zero shadows and 1px borders. - Light and Dark Previews: Bundled preview.html and preview-dark.html files demonstrate the full token system implemented in both themes. - Use Case: When building a developer tool landing page styled like Ollama, invoke this skill to generate a pure-white hero with a black pill CTA, grayscale cards, and monospace terminal blocks that match the brand exactly. ## Quick Start Use the design-ollama skill to build a landing page for my CLI tool with Ollama's minimalist grayscale style.

Frequently Asked Questions about design-ollama

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a UI to look like Ollama's website?▼

Use a pure white (#ffffff) background, strictly grayscale colors, SF Pro Rounded for headings at weight 500, and pill-shaped (9999px radius) buttons and inputs. Avoid all shadows, gradients, and chromatic colors.

What border radius values does the Ollama design system use?▼

Only two values exist: 12px for non-interactive containers like cards and code blocks, and 9999px (pill shape) for all interactive elements like buttons, tabs, inputs, and tags. No intermediate values are allowed.

Does the Ollama design system support dark mode?▼

Yes, the skill includes a preview-dark.html reference implementing dark theme tokens: #090909 page background, #262626 card surfaces, white primary text, and #525252 borders, while keeping the same grayscale and zero-shadow rules.

Can I use accent colors or shadows with this design system?▼

No. The system is strictly grayscale with zero shadows; the only non-gray color is a blue focus ring (#3b82f6 at 50%) used solely for keyboard accessibility. Depth comes from background shifts and 1px borders only.

What fonts does the Ollama design system use?▼

Display headings use SF Pro Rounded with system-ui fallbacks, body text uses ui-sans-serif, and code uses ui-monospace with Menlo/Consolas fallbacks. Only weights 400 and 500 are permitted.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
curiositechcuriositech
181

web-design-expert

Generate web designs with brand identity, color palettes, typography, and UI/UX patterns.

Official
Intermediate