Design System design systems
21 tokenized DESIGN.md references for design system products and brands.
Motion-first dark-mode component system with Aurora violet-pink-blue gradients, non-standard radii (7.6/9.6/13.6px), and atmospheric glow elevation.
Figma-first SaaS component system with Inter Variable weight 550, odd-numbered radii (5/7/9/11/13px), and dual-layer subtle elevation.
Enterprise SaaS vocabulary for Jira/Confluence/Trello/Bitbucket — Atlassian Sans variable-font weight 653, semantic ds-token naming, electric blue brand, dual-layer shadows, and accessibility-first defaults.
IBM's enterprise design system — sharp 0px corners everywhere, IBM Plex Sans at weight 300 display, IBM Blue (#0f62fe) as the singular interactive color, layer-based elevation instead of drop shadows, and 20-year enterprise heritage.
Friendly Tailwind plugin design system. Outfit weight 900 display, 36 OKLCH-based themes, semantic component classes, full-pill button radii, colorful-by-default celebration aesthetic.
A dark-first, token-architected design system — near-black
NextUI's v3 refresh — confident, color-celebrating React UI library with electric blue brand, vibrant purple secondary, full-pill chips, and a six-role semantic color system.
Token-first design system reference for HyperKit.
Apple's design doctrine — SF Pro Display/Text optical pair, System Blue as the singular brand, 18px card radius, full-pill buttons, and soft single-layer shadows.
Editorial-technical design infrastructure — Inter sans paired with a Reckless Neue serif display face, a single violet brand accent over a near-white canvas, generous Tailwind v4 radii, and dashed/mono detailing that signals tokens, components, and machine-readable context.
Google's M3 Expressive — tactile, colorful, alive. 24px-dominant radii, signature purple
Material-depth design language for Windows 11, Microsoft 365, and Copilot. Acrylic and Mica materials, Segoe UI Variable typography, Communication Blue brand anchor, 4px grid precision, surgical shadow stacks.
Dark-first design with emerald-teal brand glow, Geist at weight 300 for whisper-weight display type, and atmospheric brand-color shadows instead of neutral drop shadows.
Tokens-first framework-agnostic design system built on Radix Themes scales, Outfit at weight 700, with `4px` workhorse radii and dual-layer shadow definition.
Shopify's commerce-first design system — quiet white chrome, warm-near-black ink, Inter weight 450 body, Shopify dark green for brand moments, and circular avatars dominating the surface.
Mainstream Tailwind SaaS design system with 840+ components, white canvas, blue-500 accent, and 8/12px radii — refined defaults, never opinionated.
GitHub's design system — Mona Sans at custom variable weights (440/480/500), 6px radius workhorse, semantic token vocabulary, and accessibility as structure.
Aggressively un-branded monochrome component kit — pure white canvas, near-black ink, single hairline border, 10px workhorse radius, Geist sans with -2.4px display tracking.
Editorial monochrome from Tailwind Labs — InterVariable weight 400 at 96px with -4.8px tracking, IBM Plex Mono for eyebrows, pill buttons, 12px cards, 32px heroes, inset hairline shadows.
Dashboard-first system — pure white canvas, Geist 700 with tight tracking for KPIs, ui-monospace for tabular data, mint teal as a chart color only, 6-8px radii, borders for elevation, no shadows on static surfaces.
The polished SaaS baseline — Inter weight 600 display, purple brand scale, 1-pixel radius granularity, dual-layer slate-blue-tinted shadows, 4px focus rings, gray scale from 25 to 900.