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.
Airbnb
Airbnb's design system is built around a single custom variable font (Airbnb Cereal VF), a near-monochromatic neutral palette punctuated by a signature coral-red (#FF385C), and a card-grid layout system with generous rounded corners. The UI is light-themed with white surfaces, subtle multi-layer elevation shadows, and a structured search bar as the primary interaction hub. Listing cards dominate the content area with photo-first presentation, badge overlays, and compact metadata typography.
Anthropic
Anthropic's homepage uses a warm off-white ivory background (#faf9f5) paired with near-black slate text (#141413), creating a high-contrast but visually warm reading environment. The design employs two proprietary typefaces — Anthropic Sans for UI and display, and Anthropic Serif for editorial and feature headings — establishing a clear typographic hierarchy. Layout is spacious with generous section spacing, a centered max-width container, and minimal use of decorative elements. Depth is conveyed through subtle multi-layer shadows and surface color shifts rather than strong elevation. The primary CTA ("Try Claude") uses a filled dark button with rounded corners, contrasting against the ivory field.
Apple
Apple.com uses a tightly controlled, brand-owned typographic system (SF Pro Display + SF Pro Text) on near-white and light-gradient surfaces. The design is characterised by large, centred hero headlines, pill-shaped CTAs in Apple Blue (#0071e3), and a near-black (#1d1d1f) text palette. Elevation is conveyed through background colour shifts rather than shadows. Navigation is a translucent 44px global bar with secondary grey tones. The overall aesthetic is spacious, product-photography-led, and typographically precise.
Dribbble - Discover the World’s Top Designers & Creative Professionals
Design tokens extracted from CSSOM frequency analysis without LLM interpretation.
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.
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.
Lassie
Lassie is an AI-powered medical admin platform targeting doctors. The design leads with a cinematic full-bleed hero photograph overlaid with large serif italic type (abcMarist), creating an editorial, human-first impression. The surface palette is warm stone (#f9f8f5) rather than clinical white, softening the medical context. Navigation uses a floating pill-shaped bar with rounded corners. Typography mixes the expressive abcMarist serif for headings with DM Sans for body and DM Mono for data labels. No box shadows are used — depth is achieved through surface color contrast and border hairlines. The overall tone is warm, trustworthy, and editorial.
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 pink, magenta, blue, and orange) with a warm off-white surface palette (#eceae4, #fcfbf8). The primary typeface is Camera Plain Variable — a contemporary variable serif — used across all text roles from 14px body to 60px display. Interaction is centered on a prominent chat input card with rounded corners (12px), floating over the gradient. Navigation is minimal and transparent. The overall tone is warm, expressive, and AI-product-forward.
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 dark, warm-toned design system built on a near-black charcoal canvas (#141413). The hero features a striking sculptural illustration of colorful gradient pill shapes. Typography pairs Inter Tight (display/headings) with Inter (body) and JetBrains Mono (code), all rendered in a warm cream (#F3E6C4, --manila). CTAs use fully-rounded pill buttons with the cream fill against the dark background. The design uses a well-structured CSS variable system with semantic aliases (--bg, --surface, --rule, --ink-t) and a fluid spacing scale via clamp(). The overall aesthetic is bold, warm-dark, and developer-friendly with a distinctive AI-product personality.
PayPal
PayPal's homepage uses a bold, immersive sky-blue (#60CDFF) hero section paired with ultra-heavy display typography (PayPal Pro w900 at 178px with -7px letter-spacing). The design system is built on a Tailwind CSS foundation with a minimal color palette — predominantly black text on white or light-blue surfaces. Pill-shaped border radii (1000px) dominate interactive elements, while elevation is conveyed through a single soft ambient shadow. The overall tone is confident, high-contrast, and consumer-friendly.
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 near-black (#02090a) hero section with a full-bleed background video, large display typography in NeueHaasGrotesk, and a signature mint-green (#36f4a4) accent against dark surfaces. Navigation sits in a charcoal-black bar. CTAs use fully-rounded pill buttons — one white-filled, one white-outlined — creating a clear primary/secondary hierarchy. The overall system is high-contrast, commerce-forward, and typographically confident, with generous spacing and a restrained radius vocabulary anchored at 12px for cards and 9999px for buttons.
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 dual-theme (light/dark) developer-focused design system anchored by a single custom typeface — Circular — across all text roles. The brand identity is expressed through a vivid green (#3ecf8e / #3fcf8e) used exclusively for accent text, CTA buttons, and logo marks against near-black or near-white surfaces. Elevation is communicated entirely through border contrast (1px borders in #2e2e2e dark / #dfdfdf light) rather than shadows, creating a flat, structured aesthetic. Spacing follows an 8px base grid with consistent multiples (8, 16, 24, 32, 96px). Border radii cluster at 6–8px for interactive elements and 12–16px for cards and panels.
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.
Vercel
Vercel's marketing site uses a strict monochromatic palette anchored in near-black (#171717) on off-white (#fafafa/#ebebeb) surfaces. The design is defined by Geist — Vercel's own typeface — deployed at extreme negative letter-spacing for display headings (−3.84px at 64px) and tight tracking for body copy. Elevation is expressed entirely through 1px border rings (box-shadow spread) rather than drop shadows, keeping the surface language flat and precise. The hero features a bold geometric black triangle as the brand symbol, and secondary labels use all-caps spaced Geist Mono for a developer-tool aesthetic. CTAs are pill-shaped with a filled black primary and a ghost outline secondary.
WIRED
WIRED's design system is a high-contrast, editorially-driven layout built on a strict black-and-white monochrome foundation with a single accent blue (#057dbc) reserved for navigation highlights and active states. The typographic system is deeply custom: WiredDisplay for hero headlines, BreveText for body and article text, WiredMono for labels and metadata, and Apercu for UI elements. The layout is information-dense with a multi-column grid, flat surfaces (no shadows), and hairline borders as the primary structural dividers. Spacing follows an 8px base grid. The overall aesthetic is authoritative, print-inspired editorial with digital precision.
xAI
xAI's design system is a high-contrast, developer-forward light theme built on a near-black (#0a0a0a) and white (#ffffff) core. The layout uses generous whitespace with a centered hero and pill-shaped CTAs. Two custom typefaces — universalSansDisplay for large headings and universalSans for body/UI — are paired with GeistMono for code and terminal content. The dark terminal panel (code editor mockup) creates a dramatic visual contrast against the white page. CSS custom properties follow a semantic naming system (--primary, --accent, --background, --card) mapped to a named color scale (jet, charcoal, umbra, fog, dove, ivory, etc.).
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.