Web design

Web Design -- Beautiful Modern Websites

Sources & Attribution

This skill is composed from and inspired by:

Source	Skill	License	URL
anthropics/skills	frontend-design	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/frontend-design
anthropics/skills	web-artifacts-builder	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
anthropics/skills	theme-factory	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/theme-factory
athina-ai/goose-skills	create-html-slides	MIT	https://github.com/athina-ai/goose-skills/tree/main/skills/capabilities/create-html-slides
msitarzewski/agency-agents	design-ui-designer	MIT	https://github.com/msitarzewski/agency-agents/blob/main/design/design-ui-designer.md
msitarzewski/agency-agents	design-whimsy-injector	MIT	https://github.com/msitarzewski/agency-agents/blob/main/design/design-whimsy-injector.md

Design analysis references (studied for real-world patterns):

• https://paperclip.ing/ -- Refined warm minimalism, Instrument Serif + Inter, glassmorphic nav, orchestrated scroll animations
• https://skills.gooseworks.ai/ -- Anti-SaaS editorial warmth, linen-beige canvas, zero shadows, per-item pastel identity

---

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 {
  /* Spacing -- fluid with clamp */
  --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);

  /* Colors -- override per theme */
  --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;

  /* Typography */
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadows */
  --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);

  /* Transitions */
  --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;

  /* Radii */
  --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); /* gap color = divider color */
}
.feature-grid > * {
  background: var(--color-bg); /* cell bg covers the parent 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);
}
/* Stagger children */
.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; /* per-item pastel */
  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:

/* Button hover with scale + glow */
.btn-delight {
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-delight:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: var(--shadow-glow);
}

/* Staggered entrance animations */
@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; }

/* 3D tilt on hover */
.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 texture overlay */
.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 grayscale-to-color reveal */
.logo-item {
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.3s ease;
}
.logo-item:hover {
  filter: grayscale(0) opacity(1);
}

/* Animated cost/progress bar */
.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:

/* Fluid container */
.container {
  width: min(90%, 1140px);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Breakpoints */
@media (max-width: 900px) { /* Large tablet */ }
@media (max-width: 768px) { /* Tablet */ }
@media (max-width: 640px) { /* Small tablet */ }
@media (max-width: 480px) { /* Mobile */ }

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

1. Clarify -- Understand purpose, audience, constraints. If Yesterday CI applies → use §11 briefing, skip to step 5.
2. Choose aesthetic -- Pick a bold direction (see §1 archetypes)
3. Select palette -- Use a theme (§5) or create bespoke
4. Set up tokens -- Define CSS custom properties (§4)
5. Build structure -- Semantic HTML, layout with CSS Grid/Flexbox
6. Style -- Apply typography, colors, spacing, backgrounds
7. Components -- Use proven patterns (§6) where they fit
8. Animate -- Add motion and micro-interactions (§7) -- or choose deliberate stillness
9. Responsive -- Test and adjust for all viewports (§9)
10. Accessibility -- Verify contrast, keyboard nav, screen readers (§10)
11. Polish -- Final details, whimsy, edge cases