# Design Trends

> Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger when the user says "apply a trend", "style this like...", "make it feel like...", or references any of the 13 web design trends or 4 AI design trends. Even if they just say "make this look cool" or "give this some personality" — consider offering trend options from this skill.

- Skill: `growthaudit/design-trends` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add growthaudit/design-trends`
- Raw SKILL.md: https://api.skillmd.com/api/skills/growthaudit/design-trends/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: growthaudit (https://skillmd.com/u/growthaudit)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/growthaudit/design-trends

---


# Design Trends Skill

Apply 2026 web design trends as complete, opinionated styling systems to any artifact. Each trend is a full design language — not just colors, but layout philosophy, motion principles, typography rules, CSS patterns, and Tailwind utility strategies.

## How It Works

1. **User requests a trend** (or you suggest one based on context)
2. **Read the trend file** from `trends/` directory to load the full specification
3. **Apply the design system** to whatever artifact you're building — React component, HTML page, landing page, dashboard, etc.
4. **Combine trends** if appropriate — some layer naturally (e.g. Dark Mode + Neumorphism, Retrofuturism + Bold Typography)

## Available Trends (17 total)

### Core Design Trends (13)

| # | Trend | File | Quick Vibe |
|---|-------|------|------------|
| 1 | 3D & Immersive | `trends/3d-immersive.md` | Depth, parallax, perspective transforms, WebGL-inspired |
| 2 | Experimental Navigation | `trends/experimental-nav.md` | Non-linear layouts, radial menus, hidden drawers, exploration |
| 3 | Vibrant Color Palettes | `trends/vibrant-color.md` | Neon gradients, Y2K nostalgia, dopamine design, high-saturation |
| 4 | Bold Typography | `trends/bold-typography.md` | Oversized headlines, kinetic lettering, variable fonts, type-as-hero |
| 5 | Dark Mode | `trends/dark-mode.md` | OLED-friendly, high contrast, ambient glows, light/dark toggle |
| 6 | Motion Design | `trends/motion-design.md` | Scroll-triggered, micro-animations, easing curves, scrollytelling |
| 7 | Gamified Design | `trends/gamified.md` | Points, progress bars, badges, streaks, reward loops, XP systems |
| 8 | Neumorphism | `trends/neumorphism.md` | Soft shadows, inset/raised elements, tactile UI, frosted surfaces |
| 9 | Retrofuturism | `trends/retrofuturism.md` | Neon + chrome, pixel art accents, CRT glow, arcade/sci-fi aesthetic |
| 10 | Maximalism | `trends/maximalism.md` | Dense layers, rich textures, overlapping visuals, bold everything |
| 11 | Collage | `trends/collage.md` | Scrapbook, torn textures, sticker graphics, handwritten fonts |
| 12 | Neo-Brutalism | `trends/neo-brutalism.md` | Raw borders, loud colors, anti-design, visible structure, no polish |
| 13 | Sustainable Design | `trends/sustainable.md` | Lean, accessible, high-contrast, minimal footprint, ethical UX |

### AI Design Trends (4)

| # | Trend | File | Quick Vibe |
|---|-------|------|------------|
| 14 | Chatbot UI | `trends/chatbot-ui.md` | Conversational interfaces, agentic flows, multi-step dialogs |
| 15 | Voice Interface | `trends/voice-interface.md` | Waveform visualizers, voice-first nav, accessibility-forward |
| 16 | Progressive Nurturing | `trends/progressive-nurture.md` | Adaptive forms, contextual reveals, smart personalization |
| 17 | AI-Native Layout | `trends/ai-native.md` | Dynamic content zones, streaming indicators, confidence UI |

## Usage Instructions

### Single Trend Application
1. Read the relevant `trends/<name>.md` file
2. Apply the **CSS Variables**, **Tailwind Config**, and **Layout Principles** from the trend
3. Follow the **Do / Don't** rules specific to that trend
4. Use the **Reference Examples** and **Code Snippets** as starting points

### Combining Trends
Some trends layer naturally. When combining:
- Pick a **primary trend** (drives layout + typography)
- Pick a **secondary trend** (adds texture, motion, or color)
- The primary trend's layout rules win in conflicts
- Good combos are noted in each trend file

### Building Artifacts
When building React/HTML artifacts with a trend:
- Apply CSS variables from the trend to `:root`
- Use the Tailwind utilities and custom classes specified
- Follow the layout grid / composition rules
- Add the motion/interaction patterns if applicable
- Import Google Fonts specified in the trend (use `@import url(...)` in CSS)

### Creating Custom Trend Mashups
If no single trend fits, create a hybrid:
1. Read 2-3 trend files
2. Cherry-pick the color palette from one, layout from another, typography from a third
3. Document what you combined so the user can iterate

## Anti-Slop Principles

Every trend in this skill is designed to produce distinctive, non-generic output. Universal rules:
- **Never** center everything — use asymmetric layouts when possible
- **Never** default to purple gradients unless the trend specifically calls for it
- **Never** use uniform rounded corners on everything — vary border-radius by element role
- **Never** use Inter as the only font — each trend specifies distinct pairings
- **Never** add decorative blobs/circles for no reason — every visual element earns its place
- **Always** create visual hierarchy through contrast, not just size
- **Always** let the trend's personality override "safe" defaults