| name | design-system-library |
| description | Reference library of 58 world-class design systems from companies like Linear, Stripe, Vercel, Apple, Notion, Spotify, and more. Use when designing UI components, choosing visual direction, implementing design tokens, or when asked to match a specific company's design aesthetic. Each reference includes typography, color palettes, spacing systems, component patterns, and interaction guidelines. Do NOT use for backend work, API design, or non-visual tasks.
|
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
Consumer & Media
Enterprise & Infrastructure
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
