Skip to content

MarcBender-git/awesome-design

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

awesome-design

Curated collection of DESIGN.md files capturing design systems from 60 leading companies. Drop one into your project, point your AI coding agent at it, and get pixel-accurate UI.

Format

Every file follows the Google Stitch DESIGN.md spec with 9 sections: Visual Theme, Color Palette, Typography, Component Stylings, Layout, Depth & Elevation, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.

Each file ≤200 lines. Data extracted from live site computed styles, annotated where inferred.

Collection

60 curated design systems — v1.0.0.

AI & Machine Learning (14)

  • claude — warm cream canvas, coral accent, editorial Styrene display
  • cohere — New Yorker-style editorial serif with sunset gradient overlays
  • huggingface — warm yellow (#FFD21E) + emoji-friendly community density
  • minimax — vibrant blue→violet gradients, stat cards, CJK-ready typography
  • mistral — French minimalism, massive serif, signature orange (#FA500F)
  • ollama — man-page minimalism, system fonts, single install command hero
  • openai — Söhne-everywhere institutional calm, magazine post grids
  • opencode — brutalist grayscale with uppercase JetBrains Mono display
  • perplexity — ivory-and-ink editorial, search-pill hero, turquoise CTA
  • replicate — white canvas with mono code samples + generative image grids
  • runwayml — cinematic video heroes, GT Sectra serif, paper-warm chapters
  • together — research-lab navy + floating 3D geometric objects
  • voltagent — dot-grid dark with electric-teal agent-node diagrams
  • xai — pure-black brutalist monograph, zero accent colors

Developer Tools & Platforms (15)

  • bun — peach-cream canvas, mascot, opinionated benchmarks
  • cursor — editor-dark canvas with authentic code-preview heroes
  • expo — mobile-first with real iPhone mockups and build-log dashboards
  • framer — dark canvas with holographic cyan gradient and parallax motion
  • linear — near-black canvas, signature purple (#5E6AD2), 32px slim buttons
  • lovable — dark canvas with pulsing coral-pink glow and pill chat input
  • mintlify — fresh mint (#0D9373) docs-first, browser-chrome previews
  • raycast — cinematic pure-black with command-palette hero and keyboard glyph chips
  • sentry — deep purple-black with pink stack-trace highlights
  • supabase — near-black canvas with signature Supabase green (#3ECF8E)
  • turbo — post-Vercel dark with magenta-red signature and 3D swirl mark
  • v0 — pure black-and-white Geist, giant chat-input hero
  • vercel — pure black/white Geist minimalism with aggressive whitespace
  • warp — pink-gradient terminal with floating AI chat bubbles
  • zapier — white canvas with signature orange (#FF4A00) and workflow diagrams

Infrastructure & Cloud (11)

  • clickhouse — neon yellow (#FAFF69) on black, benchmark-bar heroics
  • composio — dark agent-ops with violet-to-pink gradient and ASCII callouts
  • hashicorp — enterprise white with per-product accent stripes
  • modal — white canvas with angular M-gradient green logo mark
  • neon — noise-textured dark with electric-green and hot-pink flicker
  • planetscale — deep navy with cyan-teal VTGate topology diagrams
  • railway — warm-dark canvas, magenta gradient, train-station metaphor
  • sanity — stark white with vermilion red (#F03E2F) and orange dot-patterns
  • stripe — white canvas with rotating conic-gradient wave and Sohne type
  • tailscale — white canvas with soft-lime (#A7FFBB) mesh-network diagrams
  • upstash — dark canvas with bright green and pulsing-globe imagery

SaaS — Business & Productivity (10)

  • arc — paper-cream with chromatic spectrum gradient and hand-drawn marginalia
  • attio — editorial serif H1 on white with pastel gradient washes
  • cal-com — soft off-white with tilted booking-widget hero and warm-cool bloom
  • clerk — deep navy with Clerk purple (#6C47FF) and auth-widget showcase grid
  • liveblocks — white canvas with scattered live-cursor pills over dot-grid
  • pitch — near-black with neon yellow-green CTA and perspective deck-stack hero
  • plain — warm cream canvas with Tiempos serif and hand-drawn illustrations
  • posthog — cream canvas with 2px black borders and hard-offset sticker shadows
  • resend — pure black with violet-pink gradient cone and rendered email-card stack
  • retool — warm beige canvas with electric-blue CTAs and real dashboard mockups

Design & Productivity (2)

  • figma — white canvas with logo-palette shapes and canvas-preview cursor pills
  • notion — warm cream with Lyon Display serif and emoji-first page previews

Enterprise & Consumer (4)

  • apple — cinematic full-bleed SF Pro minimalism, shadow-free premium void
  • ibm — Carbon Design System institutional white, zero radius, Plex Sans light H1s
  • nvidia — true black with signature green (#76B900) glow on 3D product renders
  • uber — black/white stark minimalism with 0px-radius sharp edges and full-bleed photography

Design-Forward Portfolios (4)

  • brittany-chiang — navy canvas with signature teal (#64FFDA) and mono-numbered section headers
  • josh-comeau — warm cream (and plum dark) with interactive teaching demos embedded
  • locomotive — pinned case-study openers, horizontal scroll mastery, Migra editorial serif
  • rauno — narrow 680px reading column with inline interactive playgrounds

Usage

  1. git clone https://github.com/MarcBender-git/awesome-design.git
  2. Copy design-md/<slug>/DESIGN.md into your project.
  3. Tell your AI agent: "Use DESIGN.md as the design system for this build."

Contributing

See CONTRIBUTING.md.

License

MIT. Design data extracted from public homepages; no proprietary assets included.

About

Curated DESIGN.md collection — 60 company design systems for AI coding agents to consume during UI generation. Extended from VoltAgent's format.

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors