Design Gallery
Pre-extracted DESIGN.md files from public sites. Colors, typography, spacing, and tokens, ready to drop in a repo. Open a card to preview and copy.
Agentic Infrastructure - Vercel
Design tokens extracted from CSSOM frequency analysis without LLM interpretation.
Airbnb
Airbnb's design system is built entirely on its proprietary variable font "Airbnb Cereal VF", creating a cohesive single-typeface hierarchy. The brand is anchored by a distinctive coral-pink (#ff385c, named "Rausch") used sparingly on the logo, search CTA, and key interactive elements. The layout is photo-first: full-bleed card images with rounded corners dominate the content grid. The search bar uses a multi-layer shadow to create the primary elevation focal point on the page. Spacing is tight and consistent, using a 4px base grid. The palette is near-monochrome (near-black #222222 for text, grays for secondary content, white for surfaces) with Rausch pink as the sole chromatic accent.
Anthropic
Anthropic's homepage uses a warm off-white ivory background (#faf9f5) paired with a near-black slate (#141413) to create a high-contrast, editorially serious aesthetic. Two proprietary typefaces — Anthropic Serif and Anthropic Sans — establish a clear hierarchy: the serif handles display and body reading, while the sans handles UI labels, navigation, and utility text. The layout is spacious with generous section padding, a constrained max-width container, and minimal use of color accent. The CTA button is a filled near-black pill. Depth is conveyed almost entirely through surface color contrast (ivory vs. dark slate sections) rather than shadows.
Apple
Design tokens extracted from CSSOM frequency analysis without LLM interpretation.
Dribbble
Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering.
Duolingo
Duolingo's homepage uses a white canvas with a bold brand-green (#58cc02) primary CTA, a custom rounded sans-serif typeface (Duolingo Sans), and a playful illustration-led hero. The layout is centered and spacious, with two-button CTA stacks, a language carousel at the bottom, and minimal use of shadows or decorative borders. Typography relies heavily on weight contrast (w500 body, w700 labels/headings) and uppercase letter-spaced labels. The overall feel is friendly, accessible, and gamified.
Figma
Figma's marketing site uses a strict black-and-white monochrome palette with its proprietary variable font (figmaSans) as the sole typographic voice. Large display headlines at 88–56px anchor hero sections, while a bold black pill-shaped CTA button contrasts against a pure white canvas. The layout is grid-driven with a 1440px max-content width, generous 80px vertical section padding, and a 4-column responsive grid. Depth is conveyed through product screenshot staging rather than shadows or gradients. The overall tone is confident, tool-forward, and typographically expressive.
Geld overmaken, winkelen, betalingen beheren en nog veel meer | PayPal NL
Design tokens extracted from CSSOM frequency analysis without LLM interpretation.
Harvey
Harvey's design system is a high-contrast, editorial-grade identity built for the legal AI market. It pairs a bespoke serif display font (HarveySerifFont) with a proprietary sans (HarveySansFont) against a near-black/warm-ivory palette. The hero is cinematic — full-bleed photography with a dark overlay and large serif headline — while the rest of the page uses a structured warm-neutral system. No shadows are used; hierarchy is achieved through typographic contrast, color inversion, and spatial rhythm on an 8px base grid. The overall tone is authoritative, restrained, and premium.
IKEA
IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.
Klarna
Klarna's design system features a sophisticated dark navy primary color (#0b051d) with bright accent colors including their signature pink (#ffa8cd). The system uses custom Klarna fonts alongside system fonts, emphasizes rounded corners (32px being most common), and maintains high contrast for accessibility. The design balances professionalism with approachability through generous spacing and clear typography hierarchy.
Linear
Linear's design system is a dark-first, high-density product UI built for engineering teams. The surface palette anchors on near-black (#08090a, #0f1011) with layered dark grays for sidebar, card, and panel differentiation. Typography is exclusively Inter Variable with precise negative letter-spacing at display sizes and Berkeley Mono for inline code. The radius language is deliberately small (2–6px dominant) with pill shapes reserved for badges and status chips. Elevation is expressed through subtle 1px inset borders and low-opacity drop shadows rather than dramatic layering. The primary CTA color is Linear's signature indigo (#5e6ad2), used on the Sign Up button and key links.
Lovable
Lovable's design system pairs a dramatic full-bleed aurora gradient hero (cycling through blue, purple, pink, and orange) with a warm off-white surface palette (#eceae4, #fcfbf8). The single typeface — Camera Plain Variable — spans all roles from 14px body to 60px display, using weight and size contrast for hierarchy. Rounded cards (12px radius) and a prominent chat-input prompt box anchor the AI-first interaction model. The overall tone is warm, approachable, and visually expressive while remaining structurally minimal.
Neon
Neon's design system is a dark-first developer brand built on a near-black canvas (#000000, #18191b) with a vivid neon-green primary (#00e599) and a supporting mid-green (#34d59a). The typographic system pairs Inter (UI/body) with GeistMono (code/data), both with tight negative letter-spacing. Spacing follows a 4px base grid. Border radius is uniformly minimal at 4px. Elevation is achieved through border contrast rather than shadows, with a single ambient drop-shadow used sparingly. The hero section features a full-bleed animated data-visualization background, reinforcing the database/infrastructure brand identity.
Notion
Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.
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.
Railway
Railway's design system features a dark cosmic theme with deep space backgrounds, purple accent colors, and clean typography. The interface emphasizes developer productivity with a sophisticated dark UI, subtle gradients, and carefully crafted spacing that creates a premium cloud platform experience.
Shopify
Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.
Snapchat
Snapchat's web presence uses a high-contrast light theme anchored by its iconic #FFFC00 brand yellow, near-black (#121314) primary surfaces, and a clean white page background. The design pairs Avenir Next (primary) with Graphik (secondary) for a friendly yet structured typographic hierarchy. Interaction elements — buttons, pills, and tags — use fully rounded (100px) radii, while inputs use a subtle 5px radius. Navigation is a floating pill with a soft drop shadow. Content is presented in large media cards with overlaid white text, creating an immersive, app-preview-forward layout. The overall density is moderate, with generous spacing and a clear visual hierarchy that bridges marketing and product UI conventions.
Stripe
Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.
Supabase
Supabase uses a dark-first design system built on near-black backgrounds (#0f0f0f range) with a signature brand green (#3ecf8e / #3fcf8e) as the sole accent color. The type system pairs Manrope (semibold display headings) with Inter (body/UI) and Source Code Pro (inline code). Feature sections are organized in a structured card grid with subtle border-radius (8–12px) and minimal shadow elevation. The hero headline splits white and brand-green lines for maximum contrast impact.
The Onion
The Onion's design system is a digitized satirical newspaper: bold condensed gothic headlines in black, a distinctive forest-green (#006b3a) brand accent used for section labels, trending badges, and CTAs, all set against a stark white/light-gray canvas. Typography is the primary design tool — Adobe Fonts condensed and semi-condensed grotesques (tablet-gothic, rocky-condensed) dominate headlines while utopia-std-caption handles body copy. The layout is information-dense with tight card grids, bottom-border article separators, and near-zero border radii on structural elements. Elevation is minimal — a few subtle shadows on overlays only.
Uber
Uber's design language combines clean minimalism with vibrant illustrations to create an approachable yet professional transportation platform. The stark black-and-white foundation provides clarity and readability, while colorful hero illustrations add warmth and human connection. Typography relies on the custom UberMove family for brand consistency, with generous spacing creating breathing room throughout the interface.
WIRED
WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic palette. Black (#000000) dominates at 2961 hits, anchoring text, borders, icons, and interactive states. White (#ffffff) provides the primary surface. Accent color is used sparingly — only #057dbc appears as a brand blue for subscribe CTAs. The layout uses a structured multi-column story grid with tight 8px base spacing, flat surfaces with no box shadows, and minimal border-radius (4px standard). Typography is the primary differentiator: editorial body uses Breve Text at 19px, section labels use WIRED Mono in uppercase with tracked letterspacing, and display headlines use WiredDisplay. The overall aesthetic is authoritative, information-dense, and read-flow-first.
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.