Design Systems
141portable DESIGN.md systems.
The 9-section DESIGN.md schema — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Every artifact reads from the active system. Switch system, next render uses new tokens.
AI & LLM 14
click any card → DESIGN.md on GitHub
claude
featuredClaude (Anthropic)
Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.
cohere
Cohere
Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
elevenlabs
ElevenLabs
AI voice platform. Dark cinematic UI, audio-waveform aesthetics.
huggingface
Hugging Face
ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.
minimax
MiniMax
AI model provider. Bold dark interface with neon accents.
mistral-ai
Mistral AI
Open-weight LLM provider. French-engineered minimalism, purple-toned.
ollama
Ollama
Run LLMs locally. Terminal-first, monochrome simplicity.
openai
OpenAI
Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.
opencode-ai
OpenCode
AI coding platform. Developer-centric dark theme.
replicate
Replicate
Run ML models via API. Clean white canvas, code-forward.
runwayml
Runway
AI video generation. Cinematic dark UI, media-rich layout.
together-ai
Together AI
Open-source AI infrastructure. Technical, blueprint-style design.
voltagent
VoltAgent
AI agent framework. Void-black canvas, emerald accent, terminal-native.
x-ai
xAI
Elon Musk's AI lab. Stark monochrome, futuristic minimalism.
Automotive 7
click any card → DESIGN.md on GitHub
bmw
featuredBMW
Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.
bmw-m
BMW M
Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.
bugatti
Bugatti
Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.
ferrari
Ferrari
Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.
lamborghini
Lamborghini
Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.
renault
Renault
French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.
tesla
Tesla
Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.
Backend & Data 8
click any card → DESIGN.md on GitHub
clickhouse
featuredClickHouse
Fast analytics database. Yellow-accented, technical documentation style.
composio
Composio
Tool integration platform. Modern dark with colorful integration icons.
hashicorp
HashiCorp
Infrastructure automation. Enterprise-clean, black and white.
mongodb
MongoDB
Document database. Green leaf branding, developer documentation focus.
posthog
PostHog
Product analytics. Playful hedgehog branding, developer-friendly dark UI.
sanity
Sanity
Headless CMS. Red accent, content-first editorial layout.
sentry
Sentry
Error monitoring. Dark dashboard, data-dense, pink-purple accent.
supabase
Supabase
Open-source Firebase alternative. Dark emerald theme, code-first.
Bold & Expressive 8
click any card → DESIGN.md on GitHub
bold
featuredBold
Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
brutalism
Brutalism
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
colorful
Colorful
Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.
dramatic
Dramatic
High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
energetic
Energetic
Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
expressive
Expressive
Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
neobrutalism
Neobrutalism
Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.
vibrant
Vibrant
Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
Creative & Artistic 11
click any card → DESIGN.md on GitHub
artistic
featuredArtistic
High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
cafe
Cafe
Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
cosmic
Cosmic
Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
creative
Creative
Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
doodle
Doodle
Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
editorial
Editorial
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
fantasy
Fantasy
Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
friendly
Friendly
Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.
lingo
Lingo
Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.
publication
Publication
Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
storytelling
Storytelling
Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.
Design & Creative 7
click any card → DESIGN.md on GitHub
airtable
featuredAirtable
Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
canva
Canva
Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.
clay
Clay
Creative agency. Organic shapes, soft gradients, art-directed layout.
figma
Figma
Collaborative design tool. Vibrant multi-color, playful yet professional.
framer
Framer
Website builder. Bold black and blue, motion-first, design-forward.
miro
Miro
Visual collaboration. Bright yellow accent, infinite canvas aesthetic.
webflow
Webflow
Visual web builder. Blue-accented, polished marketing site aesthetic.
Developer Tools 9
click any card → DESIGN.md on GitHub
cursor
featuredCursor
AI-first code editor. Sleek dark interface, gradient accents.
expo
Expo
React Native platform. Dark theme, tight letter-spacing, code-centric.
github
GitHub
Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
lovable
Lovable
AI full-stack builder. Playful gradients, friendly dev aesthetic.
mission-control
Mission Control Design System
Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.
raycast
Raycast
Productivity launcher. Sleek dark chrome, vibrant gradient accents.
superhuman
Superhuman
Fast email client. Premium dark UI, keyboard-first, purple glow.
vercel
Vercel
Frontend deployment. Black and white precision, Geist font.
warp
Warp
Modern terminal. Dark IDE-like interface, block-based command UI.
E-Commerce & Retail 5
click any card → DESIGN.md on GitHub
airbnb
featuredAirbnb
Travel marketplace. Warm coral accent, photography-driven, rounded UI.
meta
Meta (Store)
Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.
nike
Nike
Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.
shopify
Shopify
E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.
starbucks
Starbucks
Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.
Editorial · Studio 1
click any card → DESIGN.md on GitHub
Editorial / Personal / Publication 1
click any card → DESIGN.md on GitHub
Editorial & Print 1
click any card → DESIGN.md on GitHub
Fintech & Crypto 7
click any card → DESIGN.md on GitHub
binance
featuredBinance.US
Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
coinbase
Coinbase
Crypto exchange. Clean blue identity, trust-focused, institutional feel.
kraken
Kraken
Crypto trading. Purple-accented dark UI, data-dense dashboards.
mastercard
Mastercard
Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.
revolut
Revolut
Digital banking. Sleek dark interface, gradient cards, fintech precision.
stripe
Stripe
Payment infrastructure. Signature purple gradients, weight-300 elegance.
wise
Wise
Money transfer. Bright green accent, friendly and clear.
Layout & Structure 4
click any card → DESIGN.md on GitHub
bento
featuredBento
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
levels
Levels
Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.
perspective
Perspective
Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.
spacious
Spacious
Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.
Media & Consumer 12
click any card → DESIGN.md on GitHub
apple
featuredApple
Consumer electronics. Premium white space, SF Pro, cinematic imagery.
ibm
IBM
Enterprise technology. Carbon design system, structured blue palette.
nvidia
NVIDIA
GPU computing. Green-black energy, technical power aesthetic.
Visual discovery. Red accent, masonry grid, image-first.
playstation
PlayStation
Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.
spacex
SpaceX
Space technology. Stark black and white, full-bleed imagery, futuristic.
spotify
Spotify
Music streaming. Vibrant green on dark, bold type, album-art-driven.
theverge
The Verge
Tech editorial media. Acid-mint and ultraviolet accents, Manuka display, rave-flyer story tiles.
uber
Uber
Mobility platform. Bold black and white, tight type, urban energy.
vodafone
Vodafone
Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands.
wired
WIRED
Tech magazine. Paper-white broadsheet density, custom serif display, mono kickers, ink-blue links.
xiaohongshu
Xiaohongshu
Lifestyle UGC social platform. Singular brand red, generous radius, content-first.
Modern & Minimal 10
click any card → DESIGN.md on GitHub
clean
featuredClean
Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
contemporary
Contemporary
Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
flat
Flat
Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
minimal
Minimal
Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.
modern
Modern
Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.
mono
Mono
Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.
refined
Refined
Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.
shadcn
Shadcn
Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.
simple
Simple
Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.
sleek
Sleek
Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.
Morphism & Effects 6
click any card → DESIGN.md on GitHub
claymorphism
featuredClaymorphism
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
glassmorphism
Glassmorphism
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
gradient
Gradient
Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.
neon
Neon
Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.
neumorphism
Neumorphism
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
skeumorphism
Skeumorphism
Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.
Productivity & SaaS 10
click any card → DESIGN.md on GitHub
arc
featuredArc Browser
"The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.
cal
Cal.com
Open-source scheduling. Clean neutral UI, developer-oriented simplicity.
discord
Discord
Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.
duolingo
Duolingo
Language-learning platform. Bright owl green, chunky shadows, gamified joy.
intercom
Intercom
Customer messaging. Friendly blue palette, conversational UI patterns.
linear-app
Linear
Project management. Ultra-minimal, precise, purple accent.
mintlify
Mintlify
Documentation platform. Clean, green-accented, reading-optimized.
notion
Notion
All-in-one workspace. Warm minimalism, serif headings, soft surfaces.
resend
Resend
Email API. Minimal dark theme, monospace accents.
zapier
Zapier
Automation platform. Warm orange, friendly illustration-driven.
Professional & Corporate 10
click any card → DESIGN.md on GitHub
ant
featuredAnt
Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
application
Application
App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.
corporate
Corporate
Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
dashboard
Dashboard
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
elegant
Elegant
Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
enterprise
Enterprise
Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.
luxury
Luxury
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.
material
Material
Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.
premium
Premium
Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.
professional
Professional
Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.
Retro & Nostalgic 4
click any card → DESIGN.md on GitHub
dithered
featuredDithered
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
paper
Paper
Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
retro
Retro
Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
vintage
Vintage
1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.
Starter 1
click any card → DESIGN.md on GitHub
Themed & Unique 5
click any card → DESIGN.md on GitHub
agentic
featuredAgentic
Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
futuristic
Futuristic
Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
pacman
Pacman
Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
tetris
Tetris
Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.
totality-festival
Totality Festival
Surface: web
Apply these
A design system on its own renders nothing.
Pair any of the 141 systems above with a skill (the what) — the agent picks the active DESIGN.md and renders. Or skip ahead and see what real prompts × these systems produce.
Add your own
Drop a DESIGN.md. Done.
The 9-section schema is portable Markdown — write it once, every render reads it. The product-system library is imported via scripts/sync-design-systems.ts; re-run to refresh from upstream.