Design Styles

Apply professional design aesthetics to web and app projects with comprehensive style guidance, recommendations, and implementation details.

How to Use This Skill

1. Apply a Specific Style by Name

When user mentions a style (e.g., "use glassmorphism", "apply brutalist design", "make it minimalist"):

Read references/design-styles-comprehensive-reference.md and locate the requested style
Extract key characteristics, color palettes, typography, and layout principles
Provide specific, actionable implementation guidance:
- Color schemes with hex codes
- Typography recommendations (font families, sizes, weights)
- Layout principles (spacing, grid, structure)
- CSS/code examples demonstrating the style
- Component-specific guidance (buttons, cards, navigation, etc.)
Reference real-world examples from the guide

Example response structure:

I'll apply [STYLE NAME] to your project.

**Key Characteristics:**
- [List 3-5 defining features]

**Color Palette:**
- Primary: [hex codes]
- Secondary: [hex codes]
- Accents: [hex codes]

**Typography:**
- Headings: [font family, weights]
- Body: [font family, size]

**Layout Principles:**
- [Spacing guidelines]
- [Grid structure]
- [Key layout features]

**Implementation:**
[CSS/code examples]

**Real-world examples:** [List 2-3 from reference]

2. Recommend Styles Based on Criteria

When user asks "what design style for [X]?" or describes their project/audience/brand:

Read the comprehensive reference
Analyze based on user's criteria:
- Industry → Check "Choosing the Right Style → By Industry"
- Target Audience → Check "Choosing the Right Style → By Target Audience"
- Brand Personality → Check "Choosing the Right Style → By Brand Personality"
- Project Type → Match to industry categories
Recommend 2-4 appropriate styles with brief rationale
Ask user to select preferred style or provide more context

Example response structure:

Based on [CRITERIA], I recommend these design styles:

1. **[STYLE NAME]** - [Why it fits, 1-2 sentences]
2. **[STYLE NAME]** - [Why it fits, 1-2 sentences]
3. **[STYLE NAME]** - [Why it fits, 1-2 sentences]

Which style resonates with your vision? Or I can provide more details about any of these.

3. Browse/List Available Styles

When user asks "what design styles are available?" or "show me style options":

Read the comprehensive reference
Present the Quick Reference Table or organized categories
Offer to provide details on any specific style
Can filter by category if user specifies (e.g., "show me retro styles", "what are the modern styles?")

4. Combine with Frontend-Design Skill

When working alongside the frontend-design skill:

This skill provides the aesthetic direction (colors, typography, layout principles)
Frontend-design skill implements the actual code
Pass clear design specifications from this skill to frontend-design
Reference the comprehensive guide for style-specific patterns

Design Style Categories

The comprehensive reference includes 40+ styles organized into:

Minimalist & Clean: Minimalist, Flat Design, Swiss/International
Material & Depth: Glassmorphism, Neomorphism, Neumorphism, Skeuomorphic
Maximalist & Bold: Maximalist Chaos, Memphis Style, Collage
Retro & Nostalgic: Retro-Futuristic, Y2K/Web 2.0, Vaporwave, Art Deco
Natural & Organic: Organic/Natural, Wabi-Sabi, Handcrafted/Artisanal
Soft & Gentle: Soft/Pastel, Kawaii/Cute, Playful/Toy-like
Elegant & Refined: Luxury/Refined, Editorial/Magazine, Corporate/Enterprise
Raw & Unconventional: Brutalist/Raw, Neubrutalism, Grunge, Industrial
Tech & Futuristic: Cyberpunk, Terminal/Hacker, Metro/Modern UI
Color-Focused: Monochromatic, Gradient/Aurora, Dark Mode
Layout & Structure: Grid/Modular, Academic/Research, Outlined/Line Art
Interactive & Dynamic: Kinetic/Motion-First, Atmospheric, Data Visualization
Other: Corporate Memphis, Claymorphism, Isometric, Bauhaus

Quick Selection Guide

Common use cases:

Tech/SaaS startup → Minimalism, Glassmorphism, Gradient, Neubrutalism, Dark Mode
E-commerce → Minimalism, Grid/Modular, Editorial, Luxury/Refined (depends on products)
Creative/Agency → Maximalist, Memphis, Brutalist, Kinetic, Editorial
Wellness/Health → Organic/Natural, Soft/Pastel, Wabi-Sabi, Glassmorphism
Finance/Corporate → Swiss/International, Corporate/Enterprise, Minimalism, Dark Mode
Gaming/Entertainment → Cyberpunk, Retro-Futuristic, Y2K, Maximalist, Vaporwave
Fashion/Luxury → Luxury/Refined, Art Deco, Maximalist, Editorial
Portfolio/Personal → Minimalist, Brutalist, Editorial, any style matching personal brand

By audience:

Gen Z → Y2K, Vaporwave, Neubrutalism, Memphis, Playful
Millennials → Minimalism, Flat Design, Organic, Gradient, Dark Mode
Professionals/B2B → Swiss/International, Corporate/Enterprise, Minimalism, Editorial
Creatives → Brutalism, Maximalist, Memphis, Collage, Kinetic
Luxury Consumers → Luxury/Refined, Art Deco, Minimalism, Editorial

By personality:

Bold & Energetic → Maximalist, Memphis, Cyberpunk, Y2K
Calm & Trustworthy → Minimalism, Organic/Natural, Soft/Pastel, Swiss
Edgy & Rebellious → Brutalism, Grunge, Cyberpunk, Neubrutalism
Sophisticated & Premium → Luxury/Refined, Art Deco, Editorial, Minimalism
Playful & Friendly → Playful/Toy-like, Kawaii, Corporate Memphis, Soft/Pastel
Technical & Professional → Terminal/Hacker, Swiss, Corporate/Enterprise, Dark Mode

Style Combinations

Many modern projects blend 2-3 styles. Popular combinations from the reference:

Minimalism + Gradients + Kinetic (e.g., Stripe, Apple)
Brutalism + Bold Colors (Neubrutalism - Gumroad, Pitch)
Dark Mode + Glassmorphism (macOS, modern dashboards)
Organic + Soft Pastels (Wellness apps)
Editorial + Data Visualization (NYT, data journalism)
Flat Design + Corporate Memphis (Big Tech illustrations)
Swiss Style + Minimalism (Premium design agencies)

When suggesting combinations, ensure they complement each other and don't create visual conflict.

Implementation Guidelines

When providing implementation details:

Color Palettes

Provide specific hex codes:

Primary colors (2-3)
Secondary/accent colors (2-3)
Neutral colors (grays, backgrounds)
Text colors (with contrast ratios for accessibility)

Typography

Specify:

Font families (with web-safe alternatives or Google Fonts)
Heading hierarchy (H1-H6 sizes and weights)
Body text size and line height
Letter spacing for specific styles when relevant

Layout Principles

Define:

Spacing system (e.g., 8px grid, specific margins/padding)
Grid structure (columns, gutters)
Border radius values
Shadow specifications (for relevant styles)
Responsive breakpoints

Code Examples

Provide CSS/code demonstrating:

Component styling (buttons, cards, inputs)
Layout patterns
Style-specific effects (glass blur, neumorphic shadows, etc.)
Responsive behavior

Accessibility Considerations

Note any accessibility concerns for the style:

Color contrast ratios (WCAG AA minimum)
Motion sensitivity (for kinetic/motion-first styles)
Touch target sizes
Focus states

Best Practices

Always reference the comprehensive guide - Load references/design-styles-comprehensive-reference.md to get accurate, detailed information
Be specific and actionable - Don't just describe the style, provide implementation details
Include real examples - Reference the examples listed in the comprehensive guide
Consider accessibility - Always note accessibility requirements for each style
Suggest combinations thoughtfully - Ensure hybrid styles complement each other
Match to user context - Consider industry, audience, and brand when recommending
Provide visual hierarchy - Explain how the style creates hierarchy and guides user attention
Note trend longevity - Reference whether the style is timeless or trend-dependent

Resources

references/design-styles-comprehensive-reference.md

Complete guide to 40+ web design styles including:

Detailed style descriptions
Key characteristics
Real-world examples with URLs
Quick reference table
Selection guides by industry, audience, brand personality
Style combinations and hybrid approaches
Design resources and inspiration galleries
Best practices and accessibility notes
Trend longevity analysis

When to read: Always read this file when working with design styles. It's the primary source of truth for all style information.