| name | web-design |
| description | Build distinctive, production-grade frontend interfaces with high design quality. Use when asked to build websites, landing pages, dashboards, web apps, or any web UI that should look polished and modern. Generates creative, polished code that avoids generic AI aesthetics. Includes Yesterday corporate identity briefing for branded reports and deliverables. |
| metadata | {"category":"design"} |
Web Design -- Beautiful Modern Websites
Sources & Attribution
This skill is composed from and inspired by:
Design analysis references (studied for real-world patterns):
1. Design Thinking (before any code)
Before writing a single line, commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick a strong flavor -- brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, neon cyber, vintage editorial, Swiss modern, warm editorial, anti-SaaS calm…
- Constraints: Framework, performance targets, accessibility level (WCAG AA minimum)
- Differentiator: What makes this UNFORGETTABLE? What's the one thing someone remembers?
CRITICAL: Bold maximalism and refined minimalism both work -- the key is intentionality, not intensity. Choose a direction and execute with precision.
Real-World Aesthetic Archetypes (studied from live sites)
"Warm Technical" (paperclip.ing style):
- Serif headlines (Instrument Serif) + sans body (Inter) + mono code (JetBrains Mono)
- Monochromatic warm palette (off-whites
#f5f3f0, #f0ece7) with ONE semantic accent color (green = "alive")
- Glassmorphic floating pill navbar (
backdrop-filter: blur(20px) saturate(1.4))
- 1px-gap grid technique (parent bg = border color, gap = 1px) for seamless divider lines
- Orchestrated IntersectionObserver scroll reveals with staggered
calc(var(--i) * .14s) delays
- Full-width hero image at 65vh with content overlapping upward via negative margin
- Interactive CSS/JS data visualizations as feature demos (not static screenshots)
"Anti-SaaS Editorial" (gooseworks style):
- System UI fonts, extrabold 44px headings, tight
-0.02em letter-spacing
- Warm linen canvas background (
#D9D5CE) -- like unbleached paper
- Zero shadows, zero gradients -- flat surfaces with color contrast and
1.5px borders only
- Per-item muted pastel identity colors (sage
#B8D4A3, lavender #C5B3D9, teal #A3C9C9)
- Decorative blur circles (semi-transparent, positioned off-edge) for organic depth
- Deliberate stillness -- minimal to no animation, favoring calm authority
- Generous
1127px max-width with ample side margins
2. Anti-AI-Slop Rules
NEVER produce generic "AI-generated" aesthetics:
| DO NOT use | Instead |
|---|
| Inter, Roboto, Arial, system-ui as display fonts | Distinctive fonts: Instrument Serif, Syne, Clash Display, Cormorant, Fraunces, Bodoni Moda, Outfit, Archivo Black, JetBrains Mono… |
| Purple gradients on white | Bold palettes with dominant color + sharp accent. Use the theme system below or create bespoke palettes. |
Indigo #6366f1 everywhere | Context-specific color choices that match the aesthetic |
| Centered hero + cards grid (the default) | Asymmetry, overlap, diagonal flow, grid-breaking, generous negative space OR controlled density |
| Uniform rounded corners everywhere | Mix sharp and soft, or commit fully to one |
| Generic stock photo placeholders | Gradient meshes, noise textures, geometric patterns, layered transparencies, grain overlays |
| Box shadows on everything | Consider: no shadows at all (flat + borders), OR dramatic shadows with purpose |
Generic pure-white #ffffff backgrounds | Warm whites (#f5f3f0, #faf9f6), tinted canvases (#D9D5CE), or committed dark |
| Space Grotesk as the "creative" choice | It's overused. Explore: Manrope, Plus Jakarta Sans, Satoshi, DM Sans, Nunito |
Every design must be different. Vary light/dark, fonts, layouts, color systems. Never converge on the same choices across generations.
3. Frontend Aesthetics Guidelines
Typography
- Pair a distinctive display font with a refined body font
- Use Google Fonts, Bunny Fonts, or self-hosted -- load via
<link> or @import
- Size with
clamp() for fluid responsiveness:
h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
body { font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.6; }
Color & Theme
- Use CSS custom properties for the entire palette
- Dominant color with sharp accents outperforms timid, evenly-distributed palettes
- Single-accent discipline works: one accent color with semantic meaning (e.g., green = active/alive), everything else monochrome
- Always define both light and dark theme variables
- Warm-shift your grays -- pure grays feel clinical, warm grays (
#888880, #4a4a4a) feel intentional
- Ensure WCAG AA contrast (4.5:1 minimum for text)
Motion & Micro-interactions
- One well-orchestrated page load with staggered reveals (
animation-delay) > scattered micro-interactions
- Stagger pattern:
animation-delay: calc(var(--i) * 0.14s + 80ms) -- set --i per element via style attribute
- Hover states that surprise and delight
- Scroll-triggered animations via IntersectionObserver (add
.is-visible class on enter)
- CSS-only where possible; use Framer Motion / Motion library for React when needed
- Custom easing:
cubic-bezier(0.16, 1, 0.3, 1) (smooth out), cubic-bezier(0.34, 1.56, 0.64, 1) (spring/bounce)
- Respect
prefers-reduced-motion
- Valid choice: zero animation -- deliberate stillness conveys calm authority (gooseworks approach)
Spatial Composition
- Unexpected layouts: asymmetry, overlap, diagonal flow
- Grid-breaking elements that draw the eye
- Generous negative space OR controlled density -- both work if intentional
- Asymmetric column splits (
5fr 7fr, 1fr 1.2fr) feel more dynamic than equal widths
- Overlap elements with negative margins for depth
Backgrounds & Atmosphere
- Create depth: gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows, decorative borders
- Glassmorphism:
backdrop-filter: blur(20px) saturate(1.4) with low-alpha backgrounds
- Custom cursors, grain overlays, subtle parallax
- OR: flat and borderless -- atmosphere via color alone (gooseworks approach)
- Match effects to the overall aesthetic -- restraint for minimal, elaborate for maximal
4. Design Token System
Use CSS custom properties for a complete token system:
:root {
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: clamp(2rem, calc(1.5rem + 1.5vw), 3rem);
--space-xl: clamp(3rem, calc(2rem + 3vw), 5rem);
--space-2xl: clamp(4rem, calc(2.5rem + 4.5vw), 7rem);
--space-section: clamp(5rem, calc(3rem + 5.5vw), 9rem);
--color-bg: #ffffff;
--color-bg-alt: #f5f3f0;
--color-surface: #f0ece7;
--color-surface-raised: #e8e4de;
--color-border: #e0dcd6;
--color-text: #1a1a1a;
--color-text-secondary: #4a4a4a;
--color-text-muted: #888880;
--color-accent: #22c55e;
--color-accent-subtle: #22c55e33;
--font-display: 'Instrument Serif', serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--shadow-sm: 0 1px 2px rgba(0,0,0,.08);
--shadow-md: 0 4px 12px rgba(0,0,0,.12);
--shadow-lg: 0 12px 40px rgba(0,0,0,.16);
--shadow-glow: 0 0 20px var(--color-accent-subtle);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 100px;
--radius-full: 9999px;
}
5. Ready-Made Theme Palettes
Pick one as a starting point or create a bespoke palette:
| Theme | Background | Accent | Secondary | Text | Fonts |
|---|
| Warm Technical | #ffffff / #f5f3f0 | #22c55e | #f0ece7 | #1a1a1a | Instrument Serif / Inter / JetBrains Mono |
| Linen Editorial | #D9D5CE / #F5F4F1 | --olive | per-item pastels | #1A1A1A | System UI extrabold / System UI |
| Ocean Depths | #1a2332 | #2d8b8b | #a8dadc | #f1faee | DejaVu Sans Bold / DejaVu Sans |
| Sunset Boulevard | #264653 | #e76f51 | #f4a261 | #e9c46a | DejaVu Serif Bold / DejaVu Sans |
| Forest Canopy | #2d4a2b | #7d8471 | #a4ac86 | #faf9f6 | FreeSerif Bold / FreeSans |
| Modern Minimalist | #36454f | #708090 | #d3d3d3 | #ffffff | DejaVu Sans Bold / DejaVu Sans |
| Golden Hour | #4a403a | #f4a900 | #c1666b | #d4b896 | FreeSans Bold / FreeSans |
| Arctic Frost | #fafafa | #4a6fa5 | #d4e4f7 | #333 | DejaVu Sans Bold / DejaVu Sans |
| Desert Rose | #e8d5c4 | #d4a5a5 | #b87d6d | #5d2e46 | FreeSans Bold / FreeSans |
| Tech Innovation | #1e1e1e | #0066ff | #00ffff | #ffffff | DejaVu Sans Bold / DejaVu Sans |
| Botanical Garden | #f5f3ed | #4a7c59 | #f9a620 | #b7472a | DejaVu Serif Bold / DejaVu Sans |
| Midnight Galaxy | #2b1e3e | #4a4e8f | #a490c2 | #e6e6fa | FreeSans Bold / FreeSans |
| Neon Cyber | #0a0e27 | #00ffff | #ff00ff | #e0e0ff | Clash Display / Satoshi |
| Terminal Green | #0d1117 | #39d353 | #238636 | #c9d1d9 | JetBrains Mono |
| Swiss Modern | #ffffff | #ff0000 | #000000 | #333 | Archivo / Nunito |
| Paper & Ink | #f5f0e8 | #2c1810 | #8b4513 | #333 | Cormorant Garamond / Source Serif 4 |
6. Proven Component Patterns
Glassmorphic Floating Navbar
.nav {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
max-width: 680px;
width: calc(100% - 2rem);
border-radius: 38px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.25);
padding: 0.5rem 1.5rem;
z-index: 100;
}
1px-Gap Grid Dividers (no borders needed)
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border);
}
.feature-grid > * {
background: var(--color-bg);
padding: var(--space-lg);
}
Hero with Overlapping Content
.hero-image {
width: 100%;
height: 65vh;
object-fit: cover;
}
.hero-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.85) 70%, #fff 100%);
}
.hero-content {
position: relative;
margin-top: -6rem;
max-width: 780px;
margin-inline: auto;
text-align: center;
}
Scroll-Triggered Entrance (JS + CSS)
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.38s; }
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-visible'); });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
Decorative Blur Circles (organic depth)
.card-visual {
position: relative;
background: #B8D4A3;
border-radius: 20px;
overflow: hidden;
}
.card-visual::before,
.card-visual::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(20px);
}
.card-visual::before {
width: 120px; height: 120px;
bottom: -20px; right: -20px;
background: rgba(26, 26, 26, 0.08);
}
.card-visual::after {
width: 60px; height: 60px;
top: -10px; left: -10px;
background: rgba(26, 26, 26, 0.06);
}
7. Whimsy & Delight Layer (optional)
Add personality with micro-interactions when the design calls for it:
.btn-delight {
transition: all var(--duration-normal) var(--ease-out);
}
.btn-delight:hover {
transform: scale(1.02) translateY(-1px);
box-shadow: var(--shadow-glow);
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.stagger > * {
animation: fadeSlideUp 0.6s var(--ease-out) backwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.tilt-card {
transition: transform var(--duration-normal) var(--ease-out);
transform-style: preserve-3d;
}
.tilt-card:hover {
transform: perspective(800px) rotateX(2deg) rotateY(-3deg);
}
.noise::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
.logo-item {
filter: grayscale(1) opacity(0.5);
transition: filter 0.3s ease;
}
.logo-item:hover {
filter: grayscale(0) opacity(1);
}
.bar-fill {
width: 0;
transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-fill.is-visible {
width: var(--fill-percent);
}
Playful Microcopy Ideas
| Context | Generic | Delightful |
|---|
| Loading | "Loading..." | "Brewing something good..." |
| Empty state | "No items found" | "It's quiet here. Too quiet." |
| Success | "Saved successfully" | "Locked in. You're golden." |
| Error | "Something went wrong" | "Well, that didn't go as planned." |
| 404 | "Page not found" | "You've wandered off the map." |
8. Tech Stack Reference
Vanilla HTML/CSS/JS (simplest)
Best for: landing pages, single-page sites, static content.
- HTML5 + Tailwind CSS (CDN or build) + vanilla JS
- Astro for multi-page static sites (paperclip.ing uses Astro v5)
React + shadcn/ui (component-rich)
Best for: dashboards, web apps, interactive UIs.
pnpm create vite my-app --template react-ts
pnpm install tailwindcss postcss autoprefixer class-variance-authority clsx tailwind-merge lucide-react
40+ shadcn/ui components available: accordion, button, card, dialog, dropdown-menu, form, input, select, sheet, table, tabs, toast, tooltip...
Next.js / Astro (full-featured)
Best for: multi-page sites, blogs, documentation, SSR/SSG.
9. Responsive Design
Mobile-first with fluid scaling:
.container {
width: min(90%, 1140px);
margin-inline: auto;
padding-inline: var(--space-md);
}
@media (max-width: 900px) { }
@media (max-width: 768px) { }
@media (max-width: 640px) { }
@media (max-width: 480px) { }
Viewport-fitting (for full-screen sections)
.hero { min-height: 100dvh; display: grid; place-items: center; }
10. Accessibility Baseline (WCAG AA)
- Color contrast: 4.5:1 for normal text, 3:1 for large text
- Focus indicators: visible, high-contrast outlines on all interactive elements
- Semantic HTML: proper heading hierarchy, landmarks, alt text
- Keyboard navigation: all interactive elements reachable via Tab
- Reduced motion:
@media (prefers-reduced-motion: reduce) for all animations
- Tabular numbers for data:
font-variant-numeric: tabular-nums
11. Yesterday Corporate Identity
When building output for Yesterday Consulting (reports, analyses, proposals, presentations), apply the Yesterday CI instead of a custom aesthetic.
Full briefing: references/yesterday-ci-briefing.md
Canonical source: Yesterday-AI/consulting-projects/templates/operations/yesterday-ci-briefing.md
Future home: The CI briefing will move to a dedicated branding repo under skills/.
Quick Reference
- Fonts: Source Serif 4 (display), DM Sans (body), IBM Plex Mono (kickers/labels/meta)
- Brand colors:
--y-orange: #FC4E14, --y-gold: #FFBB38, neutrals #0A0A0A → #F5F5F5
- Output: Self-contained
.html, no build tools, opens in browser
- Nav: Sticky top bar with "Yesterday" wordmark + context on right
- Kickers:
01 -- SECTION NAME format, mono font, orange
- Footer: "Yesterday Consulting -- yesterday.company" + "Vertraulich"
- Language: German body copy, English class names
- Key components:
.hero, .score-bar, .section-kicker, .issue (with severity), .pullquote, .verdict, .clean-table, .photo-break
When the Yesterday CI applies, skip §1-§5 of this skill (aesthetic choice, anti-AI-slop, custom palettes) -- the CI briefing defines all design decisions. Use §6-§10 (components, motion, responsive, accessibility) as supplementary guidance.
12. Workflow
- Clarify -- Understand purpose, audience, constraints. If Yesterday CI applies → use §11 briefing, skip to step 5.
- Choose aesthetic -- Pick a bold direction (see §1 archetypes)
- Select palette -- Use a theme (§5) or create bespoke
- Set up tokens -- Define CSS custom properties (§4)
- Build structure -- Semantic HTML, layout with CSS Grid/Flexbox
- Style -- Apply typography, colors, spacing, backgrounds
- Components -- Use proven patterns (§6) where they fit
- Animate -- Add motion and micro-interactions (§7) -- or choose deliberate stillness
- Responsive -- Test and adjust for all viewports (§9)
- Accessibility -- Verify contrast, keyboard nav, screen readers (§10)
- Polish -- Final details, whimsy, edge cases
