# Web Design 2026 > Design and build consumer-facing websites using 2025-2026 web design trends. Use when the user asks to create a website, landing page, SaaS marketing site, product page, or consumer-facing web UI and wants it to look modern and current. Extends the frontend-design skill with specific trend knowledge, CSS patterns, and implementation guidance. Use when this capability is needed. - Skill: `tomevault-io/web-design-2026` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/web-design-2026` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-design-2026/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/web-design-2026 --- # Web Design 2025-2026 Trends Skill Build consumer-facing websites that look and feel like they were designed in 2026, not 2023. This skill encodes the dominant visual, interaction, and structural trends shaping modern web design and provides concrete implementation patterns. **This skill is a companion to `frontend-design`.** Read `frontend-design/SKILL.md` first for general design thinking and aesthetics principles. This skill adds trend-specific direction and code patterns on top of that foundation. ## When to Use This Skill - User asks for a "modern" website, landing page, or consumer-facing product UI - User references any 2025-2026 trend by name (glassmorphism, bento grid, etc.) - User wants a site that feels current, fresh, or cutting-edge - User is building for e-commerce, SaaS, fintech, lifestyle, or brand sites - User says "make it look like a real startup site" or similar ## Design Decision Framework Before writing code, make three choices: ### 1. Pick a Trend Cluster (1-2 primary, 1 accent) Trends group into compatible clusters. Don't mix everything — pick a lane: | Cluster | Primary Trends | Best For | |---------|---------------|----------| | **Polished Future** | Glassmorphism + kinetic type + dark mode | SaaS, fintech, dev tools | | **Expressive Energy** | Dopamine colors + maximalism + motion narrative | Lifestyle, beauty, Gen Z brands | | **Technical Precision** | Blueprint annotations + monospace + barely-there UI | Dev tools, API products, technical SaaS | | **Human Warmth** | Hand-drawn textures + creative process + organic shapes | Indie brands, portfolios, creative agencies | | **Retro Digital** | Retrofuturism + neon accents + pixel art + Y2K nostalgia | Entertainment, gaming, music, youth culture | | **Editorial Calm** | Archival index + content-first + oversized serif type | Media, publishing, luxury, long-form content | ### 2. Pick a Color Strategy The 2026 palette philosophy: **one dominant color, commit hard.** - **Single-hue system**: Pick one saturated color, build the entire palette from it (tints, shades, desaturated variants). Orange is the current frontrunner but any bold choice works. - **Neon-on-dark**: High-saturation accents (#39FF14, #FF69B4, #00D4FF) on near-black backgrounds. Glows via `box-shadow` with color spread. - **Dopamine palette**: 3-4 clashing brights that shouldn't work but do. Jewel tones, unexpected combos. Test with WCAG contrast. - **Muted editorial**: Desaturated earth tones, cream backgrounds, dark text. Let typography carry the visual weight. ### 3. Pick a Layout Pattern - **Bento grid**: Modular cards of varying sizes, rounded corners (16-24px), slight gaps. Cards can tilt or overlap. - **Scroll narrative**: Full-viewport sections revealed sequentially. Pin elements, animate on scroll progress. - **Asymmetric editorial**: Off-center content, overlapping elements, diagonal flow, generous whitespace. - **Content-first minimal**: Nearly invisible UI chrome. Navigation as floating pills. Content is the design. --- ## Implementation Patterns Detailed CSS/JS patterns for each major trend are in the references directory. **Read the relevant reference before coding:** ``` references/glassmorphism.md — Frosted glass panels, layered depth, blur effects references/kinetic-typography.md — Animated headlines, variable fonts, scroll-triggered type references/bento-grids.md — Modular card layouts, responsive bento patterns references/scroll-narrative.md — Scroll-driven animations, pinned sections, CSS scroll-timeline references/color-systems.md — Single-hue systems, neon-on-dark, dopamine palettes references/dark-mode-first.md — Dark-first design, OLED palettes, auto-switching references/blueprint-style.md — Technical annotation aesthetic, monospace, diagrams references/motion-design.md — Micro-animations, hover states, entrance choreography references/accessibility.md — Inclusive design patterns, ARIA, contrast, reduced-motion references/3d-ar-immersive.md — WebGL, Three.js, AR previews, interactive 3D references/neumorphism.md — Soft UI, inset/outset shadows, tactile elements references/human-warmth.md — Hand-drawn textures, organic shapes, creative process aesthetic ``` --- ## Critical Rules ### Always Do - **Design dark mode first** — it's the majority preference (91%+). Light mode is the variant. - **Ship `prefers-reduced-motion`** from the start — wrap all animations in the media query. - **Ship `prefers-color-scheme`** from the start — auto-switch dark/light. - **Use CSS custom properties** for the entire color system — makes theme switching trivial. - **Use a variable font** — one font file, infinite expressiveness. Weight, width, and optical size axes. - **Test contrast ratios** — 4.5:1 minimum for body text, 3:1 for large text. Non-negotiable. - **Lazy-load heavy assets** — 3D models, large images, video. First paint must be fast. - **Use semantic HTML** — `