# Design Trends

> Current award-winning design patterns and emerging techniques in web design (Q1/Q2 2026). Covers motion, typography, color, layout innovations, and interaction patterns derived from Awwwards, CSSDA, Godly, and SiteInspire analysis. Structured for periodic updates.

- **Type:** Skill
- **Install:** `agentstack add skill-flitzrrr-frontend-design-skills-design-trends`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [flitzrrr](https://agentstack.voostack.com/s/flitzrrr)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [flitzrrr](https://github.com/flitzrrr)
- **Source:** https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/design-trends

## Install

```sh
agentstack add skill-flitzrrr-frontend-design-skills-design-trends
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Design-Trends

> Current award-winning patterns and emerging techniques in web design (as of Q1/Q2 2026). This skill is structured for periodic updates -- each section can be updated independently.

## Scope

Use this skill when:
- You are starting a new web design project and need to know current trends
- You want to assess an existing design for contemporary relevance
- You are designing hero sections, animations, or layouts to current standards
- You are aiming for award-worthy quality (Awwwards, CSSDA, Godly)

## Principles

### 1. Motion as Meaning
Animation is not decoration. It conveys hierarchy, state, and narrative. Award-winning sites (CSSDA JPANEL 8.0+) consistently rely on scroll-driven and state-based motion.

### 2. Typography as Hero
Oversized, expressive typography dominates hero sections. Type IS the layout, not merely content within it.

### 3. Reduction with Depth
Minimalism persists, but with subtle depth through shadows, blur layers, and micro-textures. Flat design is dead; minimalism lives on.

### 4. Dark Interfaces as Default
Dark mode is not an option but the primary design path. Light variants are derivatives.

### 5. Scroll as Narrative
Vertical scrolling is the primary interaction. Each scroll section is a narrative beat.

### 6. Performance as Feature
60fps animations and fast load times are prerequisites for awards, not bonuses.

## Rules

### Motion and Animation
- **DO**: Use scroll-triggered animations with IntersectionObserver or ScrollTimeline API.
- **DO**: Implement transitions between page states with View Transitions API or FLIP animations.
- **DO**: Design brand-specific loading animations -- no generic spinners.
- **DON'T**: Use animation without purpose. Every motion must direct attention, indicate state, or clarify hierarchy.
- **DON'T**: Animations longer than 400ms (exception: narrative scroll sequences).
- **DON'T**: Overdo parallax. Subtle parallax works; excessive layer shifting disorients.

### Typography Trends
- **DO**: Use variable fonts for fluid weight transitions and responsive typography.
- **DO**: Display typefaces in hero sections large (80px+) and high-contrast.
- **DO**: One expressive display typeface + one neutral text typeface. Maximum 2 families.
- **DON'T**: Load more than 3 font weights per page.
- **DON'T**: System fonts in hero sections -- they signal a lack of design intent.

### Color and Aesthetics
- **DO**: Monochrome or highly reduced palettes with targeted accent (2-3 colors).
- **DO**: Dark backgrounds with high contrast as the primary theme.
- **DO**: Color as functional signal -- accent color = primary action.
- **DON'T**: More than 4 chromatic colors in a palette.
- **DON'T**: Pure white backgrounds without texture or depth. Prefer off-white or subtle gradients.

### Layout Innovations
- **DO**: Asymmetric grid layouts -- deliberately break the 12-column grid.
- **DO**: Bento grid layouts for feature presentations (Apple pattern).
- **DO**: Alternate full-bleed sections with constrained content for rhythm.
- **DON'T**: Rigid Bootstrap grids without visual tension.
- **DON'T**: Horizontal scrolling as primary navigation (exception: gallery contexts).

### Interaction Patterns
- **DO**: Cursor interactions: custom cursor, hover reveals, magnetic buttons.
- **DO**: Micro-interactions on every interactive element (hover/focus/active states).
- **DO**: Smooth scroll with Lenis or native CSS scroll-behavior.
- **DON'T**: Hijack natural scroll behavior without clear added value.
- **DON'T**: Click targets smaller than 44x44px.

## Patterns

Detailed pattern descriptions: see `references/patterns.md`

| Pattern | Usage | Reference |
|---|---|---|
| Immersive Hero | Landing pages, portfolios, brand sites | SOM CSSDA 8.56, Detroit Paris 8.41 |
| Scroll Storytelling | Product launches, case studies | Scroll-position-driven animations |
| Bento Grid Dashboard | Feature overviews, SaaS landing pages | Vercel Ship, Notion |
| Dark Canvas | Tech products, developer tools | #0a0a0a to #1a1a1a background |
| Kinetic Typography | Brand sites, event pages | Darknode CSSDA 8.38 |
| AI-Native Interface | SaaS with AI, agent applications | Cmd+K as AI entry point |
| Micro-Animation System | Every professional web app | Motion token system |

## Anti-Patterns

1. **Overloaded animations** -- When everything is animated, nothing stands out. Prioritize: hero entrance > scroll reveals > hover states > decorative motion.
2. **Generic gradient background** -- The purple-blue gradient is overused. Brand-specific color treatment instead of trend copying.
3. **Fake 3D without purpose** -- WebGL scenes without substantive value waste load time and battery.
4. **Copy-paste from Awwwards winners** -- Adapt trends, don't copy them.
5. **Ignoring accessibility** -- No award winner without keyboard navigation and screen reader compatibility.
6. **Mobile as afterthought** -- Responsive is mandatory. Sites that only impress on desktop fail UX evaluation.
7. **Autoplay video with sound** -- Muted background video or user-initiated playback.
8. **Excessive scroll hijacking** -- Completely overriding natural scroll behavior costs users orientation and control.

## Checklist

- [ ] Hero section has a clear animation with narrative purpose
- [ ] Typography: maximum 2 families, including one expressive display typeface
- [ ] Color palette: maximum 4 chromatic colors plus neutral tones
- [ ] Dark mode implemented or deliberately chosen as primary theme
- [ ] Scroll animations use IntersectionObserver or ScrollTimeline
- [ ] All interactive elements have hover/focus/active states
- [ ] Animations respect prefers-reduced-motion
- [ ] Layout deliberately breaks the grid for visual tension
- [ ] Mobile version independently designed, not just responsively shrunk
- [ ] No stock photography in hero sections
- [ ] All animations run at 60fps (no layout thrashing)
- [ ] Skeleton screens for asynchronous loading states
- [ ] Load time under 3 seconds on 3G simulation

## Cross-References

- `ui-patterns` -- Concrete UI patterns that implement these trends
- `visual-direction` -- Color palettes, font pairings, composition details
- `component-patterns` -- Technical component structure (21st.dev SDK)
- `agent-ui-design` -- AI interface trends and agent UX
- `web-typography` -- Typography system and scaling
- `color-theory` -- Color system fundamentals and token structure
- `accessibility` -- Accessibility as a prerequisite for award worthiness
- `responsive-design` -- Mobile strategies and breakpoint systems

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [flitzrrr](https://github.com/flitzrrr)
- **Source:** [flitzrrr/frontend-design-skills](https://github.com/flitzrrr/frontend-design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-flitzrrr-frontend-design-skills-design-trends
- Seller: https://agentstack.voostack.com/s/flitzrrr
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.