awesome-style-refs

Ant Design by Ant Group provides 60+ React components optimized for enterprise dashboards, admin panels, and data-heavy applications. Use when building internal tools, CRM interfaces, analytics dashboards, or apps needing form/table excellence and pro components. Four design values: Natural, Certain, Meaningful, Growing.

Build collaborative team interfaces with Atlassian Design System—a React-based system used in Jira, Confluence, and Trello with design tokens, dynamic tables, flags, inline editing, and emphasis on team workflows. Trigger this skill when designing project management tools, team collaboration UIs, issue tracking systems, or workflow-heavy applications.

Atmospheric gradient mesh inspired by northern lights. Use this for premium SaaS products, developer platforms, and luxury brands—creates an ethereal, modern, high-end aesthetic with subtle motion and glassmorphism overlays.

IBM Carbon provides 30+ accessible, token-based components across React, Svelte, Angular, and Web Components. Use for enterprise B2B apps, data visualization dashboards, internal tools needing WCAG AA minimum compliance (often exceeds to AAA), and products requiring multiple theme support (White, Gray 10/90/100).

Soft, playful 3D clay-like design with rounded shapes and pastel colors. Use this when targeting young audiences, playful brands, or apps that want to feel friendly and approachable—perfect for kids' apps, design tools, wellness apps, and creative platforms.

Content-first design with zero ornament. Clean typography, generous whitespace, and purposeful color. Use this for professional products, documentation, corporate sites, and premium brands that prioritize clarity and trust—think Apple, Stripe, high-end SaaS.

Microsoft Fluent 2 emphasizes light, depth, motion, material, and scale across Windows, iOS, Android, and web. Trigger for Microsoft ecosystem apps, Windows UI design, cross-platform products with strong accessibility requirements (WCAG AAA target), and apps needing token-based theming flexibility.

Create stunning frosted glass UI effects with Glassmorphism—a modern design style using backdrop blur, semi-transparent backgrounds, and layered depth. Trigger this skill when designing modern dashboards, premium interfaces, overlay modals, cards on dynamic backgrounds, or contemporary UIs with visual depth.

Build enterprise CRM interfaces with Salesforce Lightning—a BEM-based design system for complex record pages, data tables, kanban boards, and dashboards. Trigger this skill when designing Salesforce-like applications, CRM dashboards, record management UIs, or enterprise data tools.

Apple's Liquid Glass (iOS 26+) creates translucent, dynamic materials that refract content below and respond to ambient light. Use when building modern Apple ecosystem apps needing elevated, premium glass-layer aesthetics with fluid animations. Required for iOS 27+ compliance.

Material Design 3 uses dynamic color from seed colors, 35+ shape variants, and motion physics for personal, expressive, accessible UI. Trigger for Google ecosystem apps, Android, web products needing modern component library with adaptive layouts and AR/spatial support.

Bold, aggressive, no-nonsense design with thick black borders, hard shadows, and high-contrast colors. Use this when you want maximum visual impact, energy, and rebellion against polished aesthetics—perfect for indie products, creative portfolios, and brands targeting young/tech audiences.

Design with Neumorphism—a soft, sculptural design style using dual shadows (light and dark) on monochromatic backgrounds to create subtle depth and tactile surfaces. Trigger this skill when designing soft, approachable interfaces, minimalist dashboards, health/wellness apps, or design-forward products emphasizing gentle aesthetics.

Build merchant admin interfaces with Shopify Polaris—a React-based design system optimized for eCommerce efficiency, data richness, and action-driven workflows. Trigger this skill when designing admin dashboards, product tables, order management UIs, or responsive merchant-facing tools.

Realistic, tactile design that mimics physical materials: leather, metal, wood, paper. Use this when you want to communicate luxury, familiarity, or nostalgia—perfect for wallets, note apps, premium products, and retro-inspired interfaces that feel tangible and trustworthy.