Design System Library

A curated collection of 58 production design systems extracted from world-class products. Use these as references when designing interfaces, building component libraries, or establishing visual direction for CineConcerts projects.

How to Use This Skill

When given a design task, consider which design system best fits the context:
- Dashboard / data-heavy UI → Linear, Posthog, Sentry, Vercel
- E-commerce / consumer → Stripe, Airbnb, Spotify, Pinterest
- Content / editorial → Notion, Webflow, Framer
- Developer tools → Cursor, Raycast, Warp, Supabase
- Luxury / premium feel → Apple, Ferrari, BMW, Lamborghini
- Clean / minimal → Cal, Resend, Wise, Superhuman
When asked to "design like X", load the corresponding reference file and follow its tokens, patterns, and principles exactly.
When establishing a new design system, study 2-3 references that match the desired aesthetic, then synthesize a custom system that fits CineConcerts' brand (dark themes, cinematic, gold accents #c9a04c, premium feel).
When reviewing designs, check against reference systems for consistency in spacing, typography scale, and component patterns.

Available Design Systems (58)

Tech & SaaS

| Company | Reference | Best For | |---------|-----------|----------| | Linear | linear.app.md | Task management, clean dashboards | | Vercel | vercel.md | Developer platforms, deployment UIs | | Stripe | stripe.md | Payment flows, data tables, forms | | Notion | notion.md | Content editors, flexible layouts | | Supabase | supabase.md | Developer dashboards, database UIs | | Cursor | cursor.md | IDE-like interfaces, code editors | | Figma | figma.md | Design tools, collaborative UIs | | Framer | framer.md | Visual builders, animation-heavy | | Raycast | raycast.md | Command palettes, launcher UIs | | Warp | warp.md | Terminal UIs, developer tools | | Miro | miro.md | Whiteboard, collaborative canvas | | Airtable | airtable.md | Spreadsheet-like, data management | | Posthog | posthog.md | Analytics dashboards, charts | | Sentry | sentry.md | Error tracking, monitoring UIs | | Mintlify | mintlify.md | Documentation sites | | Webflow | webflow.md | Visual web builders | | Sanity | sanity.md | CMS interfaces | | Cal | cal.md | Scheduling, calendar UIs | | Intercom | intercom.md | Chat, support interfaces | | Clickhouse | clickhouse.md | Data engineering UIs | | MongoDB | mongodb.md | Database management UIs | | Hashicorp | hashicorp.md | Infrastructure management | | Zapier | zapier.md | Workflow automation UIs |

AI & ML

| Company | Reference | Best For | |---------|-----------|----------| | Claude | claude.md | AI chat interfaces | | Cohere | cohere.md | AI platform UIs | | Ollama | ollama.md | Local AI tool UIs | | Replicate | replicate.md | Model hosting UIs | | Mistral.ai | mistral.ai.md | AI platform UIs | | Minimax | minimax.md | AI generation UIs | | Together.ai | together.ai.md | AI inference UIs | | X.ai | x.ai.md | AI assistant UIs | | RunwayML | runwayml.md | Creative AI tools | | ElevenLabs | elevenlabs.md | Audio/voice AI UIs | | Lovable | lovable.md | AI code generation UIs | | OpenCode.ai | opencode.ai.md | AI coding tools |

Consumer & Media

| Company | Reference | Best For | |---------|-----------|----------| | Airbnb | airbnb.md | Marketplace, booking flows | | Spotify | spotify.md | Media players, playlists | | Pinterest | pinterest.md | Image grids, discovery | | Uber | uber.md | Maps, ride/delivery UIs | | Superhuman | superhuman.md | Email, keyboard-first UIs | | Resend | resend.md | Email platform UIs | | Wise | wise.md | Fintech, transfer flows | | Revolut | revolut.md | Banking, financial UIs | | Coinbase | coinbase.md | Crypto, trading UIs | | Kraken | kraken.md | Exchange, trading UIs |

Enterprise & Infrastructure

| Company | Reference | Best For | |---------|-----------|----------| | Apple | apple.md | Premium consumer products | | IBM | ibm.md | Enterprise, Carbon design system | | Nvidia | nvidia.md | Hardware/tech branding | | Expo | expo.md | Mobile dev platforms | | Composio | composio.md | Integration platforms | | VoltAgent | voltagent.md | Agent frameworks | | Clay | clay.md | Data enrichment UIs |

Automotive & Luxury

| Company | Reference | Best For | |---------|-----------|----------| | Ferrari | ferrari.md | Luxury, high-performance branding | | BMW | bmw.md | Premium automotive UIs | | Lamborghini | lamborghini.md | Ultra-luxury, dramatic design | | Tesla | tesla.md | Clean tech, minimalist automotive | | Renault | renault.md | Modern automotive branding | | SpaceX | spacex.md | Technical, futuristic branding |

CineConcerts Design Context

When applying these references to CineConcerts work, keep in mind our brand:

Dark themes preferred (zinc-900/950 backgrounds)
Gold accent: #c9a04c
Cinematic feel — premium, theatrical, orchestral
iOS 26 Liquid Glass for native app work
Existing patterns: shadcn/ui components in some projects, Tailwind CSS throughout