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 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 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.
Apple
Apple's storefront design system is built on a tightly controlled typographic hierarchy using the proprietary SF Pro typeface family across Display and Text optical sizes. The palette is near-monochrome — deep near-black (#1d1d1f) on near-white (#f5f5f7, #fafafc) surfaces — punctuated by a single Apple Blue (#0071e3) for primary CTAs. Buttons use a fully-rounded 980px border-radius pill shape. Navigation is a fixed 44px-tall global bar with transparent background, transitioning to a frosted overlay on open. Spacing follows an 8-based rhythm with 11px and 22px as dominant micro-spacing values. The overall aesthetic is flat with no decorative shadows — depth is conveyed through surface color differentiation and product imagery.
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 - The world’s most popular way to learn
Design tokens extracted from CSSOM frequency analysis without LLM interpretation.
Figma
Figma's marketing site uses a stark black-and-white monochrome system anchored by its proprietary figmaSans variable font. The design is typographically driven — large display headings at 88px/56px with tight negative letter-spacing contrast against lightweight body copy at weight 330. CTAs use fully-rounded pill shapes (border-radius: 9999px) in solid black with white text. The layout is grid-based with a 1440px max-content width, generous 80px vertical section padding, and a clean white canvas. Depth is minimal — shadows are subtle oklch-based overlays. A lavender/purple accent (#cb9fd2) appears in the footer banner. The overall aesthetic is confident, typographically sophisticated, and brand-forward.
Harvey
Harvey's design system is built around a warm, near-black and off-white monochromatic palette anchored by two proprietary typefaces — HarveySerifFont for editorial headings and HarveySansFont for all UI text. The hero is a full-bleed cinematic photograph overlaid with a dark scrim, placing large serif headlines over photography. The overall tone is authoritative and understated, evoking premium legal services rather than typical SaaS. No decorative color accents exist; hierarchy is achieved entirely through type scale, weight, and warm gray tonal steps. Elevation is flat — no box shadows appear in the CSSOM data. Spacing follows a base-8 system with generous section padding.
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.
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.
PayPal
PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons — an outlined "Inloggen" and a filled black "Rekening openen". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience.
Railway
Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.
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 anchored by a deep near-black background (oklch ~0.19) with a vivid green brand accent (#3ecf8e / #3fcf8e). The layout is structured around a responsive feature card grid, with Manrope for display headings and Inter for body/UI text. Source Code Pro handles all monospace/code contexts. The color system is built on oklch custom properties with semantic naming. Cards use 12px radius with subtle border treatment, buttons use 6–8px radius, and the overall density is moderate with an 8px base spacing grid.
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 homepage employs a near-monochromatic design system anchored in a deep near-black (#171717) and an off-white background (#fafafa / #ffffff). The proprietary GeistSans typeface carries all hierarchy — from a massive 64px display heading with −3.84px letter-spacing down to 14px body copy. Elevation is expressed exclusively through 1px border rings (box-shadow spread) using #ebebeb, with no traditional drop shadows. Buttons use fully-rounded pill shapes for primary CTAs and outlined pill shapes for secondary actions. The overall aesthetic is confident, minimal-radius-language, and developer-focused.
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.
lovable.dev
A Cloudflare-generated security verification interstitial page for lovable.dev. The design is extremely sparse: a single centered column with a brand logo, page title, body copy, and an embedded Cloudflare Turnstile widget. Both light and dark themes are supported via prefers-color-scheme. Typography is exclusively system-ui at a small set of sizes. No border radii, shadows, or decorative elements are present beyond the Cloudflare widget itself. The dark theme uses near-black (#000000) backgrounds with near-white (#f2f2f2) text; the light theme inverts to near-white backgrounds with near-black (#313131) text.
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.