Design Styles

---
description: "Access 263+ design styles with AI-optimized prompt keywords for frontend development"
triggers:
  - design style
  - design aesthetic
  - visual style
  - minimalism
  - maximalism
  - art deco
  - brutalist
  - neomorphism
  - glassmorphism
  - cyberpunk
  - vaporwave
globs:
  - "*.tsx"
  - "*.css"
  - "*.scss"
  - "*.tailwind.config.*"
  - "theme*.ts"
---

# Design Styles Skill

Access 263+ curated design styles with AI-optimized prompt keywords for frontend development.

## Overview

This skill provides comprehensive access to 19 design categories, each containing multiple style variations optimized for AI-assisted code generation. Use these styles to rapidly prototype and implement consistent design systems.

## 19 Design Categories

### 1. Minimalist Styles
- **Clean Minimalism**: Simple, white space, subtle shadows
- **Scandinavian Design**: Natural materials, muted colors, functionality
- **Japanese Minimalism**: Zen aesthetics, negative space, natural elements
- **Swiss Design**: Grid-based, clean typography, limited color
- **Flat Design**: No gradients, bright colors, simple shapes

**Prompt Keywords**: `minimal`, `clean`, `simple`, `whitespace`, `scandinavian`, `zen`, `flat`

### 2. Historical Styles
- **Art Deco**: Geometric patterns, gold accents, bold lines
- **Victorian**: Ornate details, rich colors, decorative elements
- **Baroque**: Dramatic, ornate, gold embellishments
- **Gothic**: Dark tones, pointed arches, medieval elements
- **Renaissance**: Classical proportions, symmetry, refined details

**Prompt Keywords**: `art-deco`, `victorian`, `baroque`, `gothic`, `renaissance`, `historical`, `ornate`

### 3. Retro & Vintage
- **80s Retro**: Neon colors, geometric shapes, gradients
- **90s Web**: Bright colors, basic shapes, nostalgia
- **Vaporwave**: Pastel colors, glitch effects, 80s-90s aesthetics
- **Memphis Design**: Bold colors, geometric shapes, playful patterns
- **Mid-Century Modern**: Organic shapes, clean lines, warm woods

**Prompt Keywords**: `retro`, `80s`, `90s`, `vaporwave`, `memphis`, `vintage`, `mid-century`

### 4. Digital UI Styles
- **Neumorphism**: Soft shadows, subtle depth, monochromatic
- **Glassmorphism**: Frosted glass, transparency, blur effects
- **Skeuomorphism**: Real-world textures, shadows, 3D elements
- **Material Design**: Elevation, bold colors, deliberate motion
- **Fluent Design**: Acrylic materials, depth, motion, light

**Prompt Keywords**: `neumorphism`, `glassmorphism`, `material`, `fluent`, `skeuomorphic`, `soft-ui`

### 5. Futuristic Styles
- **Cyberpunk**: Neon colors, dark backgrounds, tech aesthetics
- **Sci-Fi**: Futuristic UI, holographic elements, space themes
- **Neon Tech**: Glowing elements, dark mode, electric colors
- **Dystopian**: Dark, gritty, industrial elements
- **Hi-Tech**: Clean tech, blue accents, digital interfaces

**Prompt Keywords**: `cyberpunk`, `sci-fi`, `neon`, `futuristic`, `dystopian`, `tech`, `holographic`

### 6. Nature-Inspired
- **Organic**: Natural shapes, earth tones, flowing forms
- **Botanical**: Plant motifs, green palettes, natural textures
- **Ocean Theme**: Blues, waves, aquatic elements
- **Forest Theme**: Greens, browns, woodland imagery
- **Desert**: Warm tones, sand colors, minimalist plants

**Prompt Keywords**: `organic`, `botanical`, `nature`, `ocean`, `forest`, `desert`, `earth-tones`

### 7. Bold & Expressive
- **Maximalism**: Layered elements, rich colors, abundant decoration
- **Brutalist**: Raw, concrete-like, bold typography
- **Neo-Brutalism**: Bright colors, thick borders, bold shadows
- **Expressive Typography**: Large text, varied fonts, dynamic layouts
- **Colorful Chaos**: Multiple bright colors, overlapping elements

**Prompt Keywords**: `maximalist`, `brutalist`, `neo-brutalist`, `bold`, `expressive`, `vibrant`

### 8. Dark Mode Styles
- **Dark Elegant**: Deep blacks, gold accents, luxury feel
- **Dark Minimalist**: Simple dark UI, subtle contrasts
- **Dark Neon**: Dark background, bright neon accents
- **Dark Material**: Material design in dark theme
- **OLED Black**: Pure black, high contrast, battery-saving

**Prompt Keywords**: `dark-mode`, `dark-elegant`, `dark-minimal`, `dark-neon`, `oled-black`

### 9. Gradient & Color
- **Gradient Mesh**: Complex gradients, colorful blends
- **Duotone**: Two-color schemes, bold contrasts
- **Rainbow**: Full spectrum, vibrant multi-color
- **Pastel Gradients**: Soft color transitions, gentle tones
- **Metallic Gradients**: Chrome, gold, silver effects

**Prompt Keywords**: `gradient`, `duotone`, `rainbow`, `pastel`, `metallic`, `colorful`

### 10. Professional & Corporate
- **Corporate Blue**: Professional, trustworthy, clean
- **Financial**: Conservative, secure, traditional
- **Legal**: Professional, serif fonts, formal
- **Medical**: Clean, white, trustworthy, accessible
- **Tech Startup**: Modern, bold, innovative

**Prompt Keywords**: `corporate`, `professional`, `business`, `financial`, `medical`, `startup`

### 11. Creative & Artistic
- **Artistic Grunge**: Textured, rough edges, creative chaos
- **Watercolor**: Soft blends, artistic, flowing
- **Abstract Art**: Geometric shapes, bold colors, creative
- **Pop Art**: Bold colors, comic style, high contrast
- **Collage**: Layered images, mixed media, creative

**Prompt Keywords**: `artistic`, `grunge`, `watercolor`, `abstract`, `pop-art`, `collage`

### 12. Gaming & Entertainment
- **Gaming UI**: HUD elements, stats displays, action-focused
- **Streaming**: Dark theme, vibrant accents, chat-friendly
- **RPG Fantasy**: Medieval, magical elements, ornate
- **Esports**: Bold, energetic, competitive
- **Retro Gaming**: Pixel art, 8-bit colors, nostalgic

**Prompt Keywords**: `gaming`, `streaming`, `rpg`, `fantasy`, `esports`, `pixel-art`, `8-bit`

### 13. E-commerce
- **Luxury Store**: Elegant, spacious, high-end feel
- **Fast Fashion**: Trendy, bold, image-heavy
- **Marketplace**: Clean grids, product-focused, functional
- **Subscription Box**: Curated, minimal, lifestyle-focused
- **Handmade**: Artisanal, warm, personal touch

**Prompt Keywords**: `ecommerce`, `luxury`, `fashion`, `marketplace`, `subscription`, `handmade`

### 14. Educational
- **Academic**: Clean, readable, professional
- **Kids Learning**: Colorful, playful, friendly
- **Course Platform**: Organized, clean, progress-focused
- **Documentation**: Clear hierarchy, code-friendly, searchable
- **Tutorial**: Step-by-step, visual, engaging

**Prompt Keywords**: `educational`, `academic`, `learning`, `kids`, `course`, `tutorial`, `docs`

### 15. Social & Community
- **Social Network**: User-focused, feed-based, interactive
- **Forum**: Threaded, readable, community-focused
- **Dating App**: Personal, image-heavy, swipe-friendly
- **Community Hub**: Welcoming, organized, discussion-friendly
- **Blog Platform**: Reading-focused, typography-heavy, clean

**Prompt Keywords**: `social`, `forum`, `dating`, `community`, `blog`, `feed`

### 16. Productivity
- **Task Manager**: Clean, organized, action-focused
- **Dashboard**: Data-rich, charts, analytics
- **Note Taking**: Distraction-free, typography-focused
- **Calendar**: Time-based, clean grids, color-coded
- **Project Management**: Boards, timelines, team-focused

**Prompt Keywords**: `productivity`, `dashboard`, `tasks`, `notes`, `calendar`, `project-management`

### 17. Health & Wellness
- **Fitness**: Energetic, motivational, stats-focused
- **Meditation**: Calm, minimal, soothing colors
- **Nutrition**: Fresh, colorful, food-photography
- **Healthcare**: Clean, accessible, trustworthy
- **Mindfulness**: Gentle, nature-inspired, peaceful

**Prompt Keywords**: `fitness`, `meditation`, `wellness`, `nutrition`, `healthcare`, `mindfulness`

### 18. Travel & Hospitality
- **Travel Booking**: Image-heavy, adventure-focused
- **Hotel**: Luxury, spacious, elegant
- **Restaurant**: Food-focused, atmospheric, inviting
- **Tourism**: Destination-focused, inspirational, vibrant
- **Airline**: Clean, efficient, professional

**Prompt Keywords**: `travel`, `hotel`, `restaurant`, `tourism`, `airline`, `hospitality`

### 19. Experimental & Emerging
- **3D UI**: Three-dimensional elements, depth, immersive
- **AR/VR Interface**: Spatial, futuristic, immersive
- **Particle Effects**: Animated particles, dynamic, engaging
- **Morphing Shapes**: Fluid animations, organic transitions
- **Generative Art**: Algorithmic, unique, creative

**Prompt Keywords**: `3d`, `ar`, `vr`, `particles`, `morphing`, `generative`, `experimental`

## How to Use Prompt Keywords

### 1. Style Selection
Choose a style based on your project needs:
```
"Create a [component] with [style-keyword] design style"
Example: "Create a login form with glassmorphism design style"
```

### 2. Combining Styles
Mix keywords for hybrid designs:
```
"Create a dashboard with dark-mode and neumorphism"
"Design a card component with cyberpunk and glassmorphism"
```

### 3. Specific Elements
Target specific UI elements:
```
"Create glassmorphism buttons"
"Design a brutalist navigation bar"
"Build a neumorphic card component"
```

## Style Selection Decision Tree

```
Project Type?
├── Corporate/Professional → Corporate Blue, Material Design
├── Creative/Portfolio → Artistic, Bold, Glassmorphism
├── E-commerce → Luxury Store, Marketplace, Clean Minimalism
├── Gaming → Cyberpunk, Neon Tech, Gaming UI
├── Health/Wellness → Meditation, Organic, Pastel
├── Educational → Academic, Kids Learning, Documentation
├── Social → Social Network, Community Hub, Blog
└── Experimental → 3D UI, AR/VR, Generative Art

User Demographic?
├── Young/Trendy → Vaporwave, Neo-Brutalism, Bold
├── Professional → Corporate, Clean Minimalism, Material
├── Creative → Artistic, Maximalism, Expressive
├── Technical → Dark Mode, Brutalist, Hi-Tech
└── General → Scandinavian, Flat Design, Material

Mood/Atmosphere?
├── Energetic → Cyberpunk, Neon, Bold
├── Calm → Minimalism, Meditation, Pastel
├── Luxury → Art Deco, Dark Elegant, Metallic
├── Playful → Memphis, Colorful, Pop Art
└── Professional → Corporate, Swiss Design, Material
```

## Example Prompts

### Minimalist Login Page
```
Create a login page with Scandinavian minimalism design style.
Use muted colors, natural material textures, and generous whitespace.
Include a clean form with subtle shadows and simple typography.
```

### Cyberpunk Dashboard
```
Design a dashboard with cyberpunk aesthetic.
Use dark background (#0a0e27), neon cyan (#00ffff) and magenta (#ff00ff) accents.
Include glowing borders, tech-inspired grid layouts, and holographic card effects.
```

### Glassmorphism Card Component
```
Create a card component with glassmorphism style.
Use frosted glass effect with backdrop-filter blur,
semi-transparent white background (rgba(255,255,255,0.1)),
subtle border, and soft shadow.
```

### Neo-Brutalist Button
```
Design a button with neo-brutalist style.
Use bright background color (#ffff00), thick black border (4px),
bold offset shadow (8px 8px 0 #000), and strong typography.
```

### Art Deco Hero Section
```
Create a hero section with Art Deco style.
Use geometric patterns, gold (#d4af37) and black color scheme,
symmetrical layout, bold lines, and elegant serif typography.
```

## Links to Full Style Reference

For complete design specifications, color palettes, typography systems, and component examples:

- **Full Style Database**: `[[Resources/Design-Systems/Style-Database]]`
- **Color Palettes**: `[[Resources/Design-Systems/Color-Palettes]]`
- **Typography Systems**: `[[Resources/Design-Systems/Typography]]`
- **Component Examples**: `[[Resources/Design-Systems/Component-Library]]`
- **Design Tokens**: `[[Resources/Design-Systems/Design-Tokens]]`

## Integration with Other Skills

- **css-generation**: Convert style selections to CSS/Tailwind code
- **component-patterns**: Apply styles to component patterns
- **keycloak-theming**: Use styles for authentication pages

## Quick Reference Table

| Category | Popular Styles | Primary Colors | Use Cases |
|----------|---------------|----------------|-----------|
| Minimalist | Clean, Scandinavian, Flat | White, Gray, Black | Corporate, SaaS |
| Digital UI | Glassmorphism, Material | Translucent, Bold | Modern apps |
| Futuristic | Cyberpunk, Neon Tech | Neon, Dark | Gaming, Tech |
| Bold | Brutalist, Neo-Brutalist | Bright, High contrast | Creative, Agencies |
| Professional | Corporate, Medical | Blue, White | Business, Healthcare |

## Best Practices

1. **Consistency**: Choose one primary style per project
2. **Accessibility**: Ensure sufficient color contrast (WCAG AA/AAA)
3. **Performance**: Optimize CSS for chosen style effects
4. **Responsiveness**: Adapt style elements for mobile
5. **Brand Alignment**: Match style to brand personality

## Resources

- Design inspiration: Dribbble, Behance, Awwwards
- Component libraries: shadcn/ui, Material-UI, Chakra UI
- Color tools: Coolors, Adobe Color, Paletton
- Typography: Google Fonts, Font Pair, Typescale