awesome-design

name	awesome-design
description	Brand-specific design systems (54+ companies) for pixel-perfect UI. Use when building UI that should match a specific brand's look and feel (e.g., "make it look like Linear", "use Vercel's design system", "Stripe-style checkout page"). Provides exact colors, typography, component specs, and do's/don'ts for each brand.
metadata	{"openclaw":{"emoji":"🎨","requires":{"bins":["git"]}}}

Awesome Design Systems

Brand-specific design system references from awesome-design-md. Each DESIGN.md provides exact colors, typography, component specs, layout principles, and agent prompt guides for pixel-perfect UI.

How to Use

1. Identify the brand the user wants to match
2. Read the corresponding DESIGN.md file:

   {baseDir}/design-md/design-md/<brand>/DESIGN.md
   

3. Apply the design system to implement the UI

Available Brands (54)

AI & ML: claude, cohere, elevenlabs, mistral.ai, minimax, ollama, replicate, runwayml, together.ai, x.ai

Developer Tools: cursor, expo, linear.app, lovable, mintlify, opencode.ai, posthog, raycast, resend, sentry, vercel, voltagent, warp, zapier

Infrastructure & Data: clickhouse, composio, hashicorp, mongodb, sanity, stripe, supabase

Design & Productivity: airtable, cal, clay, figma, framer, intercom, miro, notion, pinterest, superhuman, webflow

Fintech & Crypto: coinbase, kraken, revolut, wise

Enterprise & Consumer: airbnb, apple, bmw, ibm, nvidia, spacex, spotify, uber

DESIGN.md Structure

Each file follows a standardized 9-section format:

1. Visual Theme & Atmosphere — Core aesthetic philosophy
2. Color Palette & Roles — Complete color system with hex values
3. Typography Rules — Font families, weights, sizes, hierarchy
4. Component Stylings — Buttons, cards, forms, navigation specs
5. Layout Principles — Spacing systems, grid, border-radius
6. Depth & Elevation — Shadows, elevation layers
7. Do's and Don'ts — 10 affirmative + 10 negative guidelines
8. Responsive Behavior — Breakpoints, scaling strategies
9. Agent Prompt Guide — Quick reference for LLM implementation

Example Workflow

User: "Build a dashboard that looks like Linear"

1. Read {baseDir}/design-md/design-md/linear.app/DESIGN.md
2. Extract: colors (dark background #191919, accent #5E6AD2), typography (Inter, weight 510), component patterns
3. Implement using the exact specs from the design system

Update

Run {baseDir}/scripts/install.sh to pull the latest design systems from GitHub.