| name | design-systems |
| description | Provides design system references from popular websites. Invoke when user asks for design inspiration, UI style references, or wants to apply a specific website's design aesthetic. |
Design Systems Reference
A curated collection of DESIGN.md files from popular websites, organized by category. These design systems help generate consistent UI that matches specific brand aesthetics.
What is DESIGN.md?
DESIGN.md is a design system document format that AI agents can read to generate consistent UI. It defines:
- Color palette and semantic roles
- Typography rules and hierarchy
- Component styling (buttons, cards, inputs, etc.)
- Layout principles and spacing
- Design do's and don'ts
Categories
AI & LLM Platforms
| Site | Style Keywords |
|---|
| Claude | Warm terracotta accent, clean editorial layout |
| Cohere | Vibrant gradients, data-rich dashboard aesthetic |
| ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
| Minimax | Bold dark interface with neon accents |
| Mistral AI | French-engineered minimalism, purple-toned |
| Ollama | Terminal-first, monochrome simplicity |
| OpenCode AI | Developer-centric dark theme |
| Replicate | Clean white canvas, code-forward |
| RunwayML | Cinematic dark UI, media-rich layout |
| Together AI | Technical, blueprint-style design |
| VoltAgent | Void-black canvas, emerald accent, terminal-native |
| xAI | Stark monochrome, futuristic minimalism |
Developer Tools & IDEs
| Site | Style Keywords |
|---|
| Cursor | AI-first code editor, sleek dark interface, gradient accents |
| Expo | Dark theme, tight letter-spacing, code-centric |
| Lovable | Playful gradients, friendly dev aesthetic |
| Raycast | Sleek dark chrome, vibrant gradient accents |
| Superhuman | Premium dark UI, keyboard-first, purple glow |
| Vercel | Black and white precision, Geist font |
| Warp | Dark IDE-like interface, block-based command UI |
Backend, Database & DevOps
| Site | Style Keywords |
|---|
| ClickHouse | Yellow-accented, technical documentation style |
| Composio | Modern dark with colorful integration icons |
| HashiCorp | Enterprise-clean, black and white |
| MongoDB | Green leaf branding, developer documentation focus |
| PostHog | Playful hedgehog branding, developer-friendly dark UI |
| Sanity | Red accent, content-first editorial layout |
| Sentry | Dark dashboard, data-dense, pink-purple accent |
| Supabase | Dark emerald theme, code-first |
Productivity & SaaS
| Site | Style Keywords |
|---|
| Cal.com | Clean neutral UI, developer-oriented simplicity |
| Intercom | Friendly blue palette, conversational UI patterns |
| Linear | Ultra-minimal, precise, purple accent |
| Mintlify | Clean, green-accented, reading-optimized |
| Notion | Warm minimalism, serif headings, soft surfaces |
| Resend | Minimal dark theme, monospace accents |
| Zapier | Warm orange, friendly illustration-driven |
Design & Creative Tools
| Site | Style Keywords |
|---|
| Airtable | Colorful, friendly, structured data aesthetic |
| Clay | Organic shapes, soft gradients, art-directed layout |
| Figma | Vibrant multi-color, playful yet professional |
| Framer | Bold black and blue, motion-first, design-forward |
| Miro | Bright yellow accent, infinite canvas aesthetic |
| Webflow | Blue-accented, polished marketing site aesthetic |
Fintech & Crypto
| Site | Style Keywords |
|---|
| Binance | Bold Binance Yellow on monochrome, trading-floor urgency |
| Coinbase | Clean blue identity, trust-focused, institutional feel |
| Kraken | Purple-accented dark UI, data-dense dashboards |
| Mastercard | Warm cream canvas, orbital pill shapes, editorial warmth |
| Revolut | Sleek dark interface, gradient cards, fintech precision |
| Stripe | Signature purple gradients, weight-300 elegance |
| Wise | Bright green accent, friendly and clear |
E-commerce & Retail
| Site | Style Keywords |
|---|
| Airbnb | Warm coral accent, photography-driven, rounded UI |
| Meta | Photography-first, binary light/dark surfaces, Meta Blue CTAs |
| Nike | Monochrome UI, massive uppercase Futura, full-bleed photography |
| Shopify | Dark-first cinematic, neon green accent, ultra-light display type |
| Starbucks | Four-tier earth-green system, warm cream canvas |
Media & Consumer Tech
| Site | Style Keywords |
|---|
| Apple | Premium white space, SF Pro, cinematic imagery |
| IBM | Carbon design system, structured blue palette |
| NVIDIA | Green-black energy, technical power aesthetic |
| Pinterest | Red accent, masonry grid, image-first |
| PlayStation | Three-surface channel layout, cyan hover-scale interaction |
| SpaceX | Stark black and white, full-bleed imagery, futuristic |
| Spotify | Vibrant green on dark, bold type, album-art-driven |
| The Verge | Acid-mint and ultraviolet accents, Manuka display type |
| Uber | Bold black and white, tight type, urban energy |
| Vodafone | Monumental uppercase display, Vodafone Red chapter bands |
| WIRED | Paper-white broadsheet density, custom serif |
Automotive
| Site | Style Keywords |
|---|
| BMW | Dark premium surfaces, precise German engineering aesthetic |
| Bugatti | Cinema-black canvas, monochrome austerity |
| Ferrari | Chiaroscuro black-white editorial, Ferrari Red |
| Lamborghini | True black cathedral, gold accent |
| Renault | Vivid aurora gradients, zero-radius buttons |
| Tesla | Radical subtraction, cinematic full-viewport photography |
Usage Guidelines
When to Use This Skill
Invoke this skill when:
- User asks for design inspiration or UI style references
- User wants to apply a specific website's design aesthetic
- User needs color palette or typography guidance
- User is building a landing page and wants brand-consistent design
- User asks "what does [brand] design system look like?"
How to Use
- Identify the appropriate design system from the categories above
- Extract the relevant design tokens (colors, typography, spacing)
- Apply them to the user's project following the design system's principles
- For full DESIGN.md file, reference: https://github.com/VoltAgent/awesome-design-md
Example Prompts
- "Build a dashboard UI inspired by Linear's design"
- "Create a checkout page with Stripe's design aesthetic"
- "Make a landing page with Airbnb's warm, photography-driven style"
- "Design a terminal interface using Warp's dark IDE style"
Source
This collection is sourced from: https://github.com/VoltAgent/awesome-design-md
The repository contains full DESIGN.md files with detailed specifications including:
- Visual Theme & Atmosphere
- Color Palette & Roles
- Typography Rules (with full hierarchy table)
- Component Stylings (buttons, cards, inputs, navigation)
- Layout Principles
- Depth & Elevation
- Do's and Don'ts
- Responsive Behavior
- Agent Prompt Guide
