AI design systems
Design systems extracted from AI product, model and research websites: assistants, model providers and AI tooling. Some pair calm, editorial typography with warm neutral palettes; others take the dark, technical look of developer products.
4 DESIGN.md examples in this category, from Anthropic, Harvey, Paperclip and xAI. Extracted from each site’s public pages, not official brand guidelines. New to the format? Read what a DESIGN.md is.
Anthropic
Anthropic's design system is a restrained, typographically-led identity built around two custom typefaces — Anthropic Serif and Anthropic Sans — set against a warm ivory background (#faf9f5). The palette is deliberately minimal: near-black (#141413) on warm off-white, with muted stone tones for secondary text and borders. Large-scale serif display type anchors the editorial voice, while a dark-panel section (near-black background with ivory text) creates dramatic contrast. The overall aesthetic communicates intellectual seriousness and safety-first mission through generous whitespace, high typographic contrast, and zero decorative ornamentation.
Harvey
Harvey's design system is built around a bespoke dual-typeface identity — HarveySerifFont for editorial authority and HarveySansFont for functional clarity — set against a warm near-black (#0f0e0d) navigation bar and an off-white ivory (#fafaf9) content surface. The palette is deliberately monochromatic, using a graduated warm gray scale (gray-50 through gray-950) with no accent hues, signaling trust and restraint appropriate for high-stakes legal work. Elevation is conveyed through surface contrast rather than shadows. The hero headline uses a large serif at 72px, creating immediate typographic authority, while body copy and UI elements use the custom sans. Spacing follows an 8px base grid with named scale tokens (xs, sm, md, xl, 2xl).
Paperclip
Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. The hero is defined by a vivid multi-color gradient illustration of stacked pill/capsule shapes in magenta, violet, teal, orange, and yellow — creating a chromatic, energetic visual identity against the dark field. Typography pairs Inter Tight (condensed, heavy headlines with negative letter-spacing) with Inter (body/UI) and JetBrains Mono (code/status). The primary CTA uses a white pill-shaped button on dark background. A semantic green (#22c55e) status system signals agent and task states throughout the product UI. Navigation is minimal and flat with a subtle bottom border.
xAI
xAI's marketing site uses a warm off-white surface palette anchored by --color-ivory (#f9f8f6) and --color-white (#ffffff), with near-black #0a0a0a as the dominant text and foreground color. The typographic system is split between universalSansDisplay for large display headings (60–72px, tight negative letter-spacing), universalSans for body and UI copy, and GeistMono for code and terminal contexts. Radius language is dominated by 9999px pill shapes on CTAs and tags, with 12px and 6px for cards and inputs. Elevation is minimal — cards use a soft multi-layer drop shadow while most surfaces are flat. The overall tone is technical-premium: restrained color, generous whitespace, and a strong monospace code aesthetic signaling developer credibility.
Don’t see the site you need?
Paste any URL to get a DESIGN.md from any website. Colors, typography, spacing, and tokens, ready for your AI workflow.