A high-fidelity website UI design skill that produces visually distinctive, fully responsive, aesthetically coherent web interfaces free of generic AI aesthetics. Activate when the user requests to design, build, redesign, or visually improve any website, landing page, portfolio, dashboard, marketing page, or web component. This skill encodes senior UI designer judgment: thirteen design methodologies with code-level signatures, fourteen type pairings, ten named color palettes, a mandatory res...
Scanned 5/27/2026
Install via CLI
Skills Directoryopenskills install ChopDreamDust/web-ui-design-skill---
name: web-ui-design
description: "A high-fidelity website UI design skill that produces visually distinctive, fully responsive, aesthetically coherent web interfaces free of generic AI aesthetics. Activate when the user requests to design, build, redesign, or visually improve any website, landing page, portfolio, dashboard, marketing page, or web component. This skill encodes senior UI designer judgment: thirteen design methodologies with code-level signatures, fourteen type pairings, ten named color palettes, a mandatory responsive design contract that produces layouts working on both mobile and desktop, container queries, CSS subgrid, fluid typography, component heuristics, motion design tokens, dark mode architecture, View Transitions API, performance standards, a five-question Output Signature Test, eight failure mode diagnostics, and eleven prohibited anti-patterns. It transforms Claude from a code generator into a design partner that commits to a direction and executes with full-stack responsive precision."
compatibility: "claude.ai, Claude Desktop, Claude Code, API"
version: "4.0.0"
changelog: "v4.0.0 — Added three new design methodologies (Memphis/Pop, Swiss New Wave, Korean Minimal Tech); expanded Type Pairing Library to 14 entries; expanded Named Palette Recipes to 10; added CSS Subgrid patterns; added View Transitions API; added Dark Mode Architecture; added Performance Standards; expanded Failure Mode Diagnostics to eight modes; expanded Anti-Aesthetics Index to eleven entries; added GitHub-specific design patterns; Conflux-framework alignment for internal validation gate."
---
# web-ui-design
A professional website UI design skill. Every output must work beautifully on both mobile and desktop — not just mobile. Not just desktop. Both. Every time.
---
## Quick Reference
| Need | Key Protocol |
|---|---|
| New website or page | Phase 0 → Method → Responsive Contract → Execute |
| Font choice | Type Pairing Library |
| Color palette | Named Palette Recipes |
| Layout system | Responsive Design Contract (mandatory) |
| Dark mode | Dark Mode Architecture |
| Multi-col desktop grid | CSS Subgrid Patterns |
| Page transition | View Transitions API |
| Quality verification | Output Signature Test |
| Redesign existing UI | Phase 0 + Anti-AI Audit |
| Diagnose generic output | Failure Mode Diagnostics |
| GitHub project page | GitHub-Specific Patterns |
| Performance | Performance Standards |
---
## Phase 0 — Direction Lock
**Mandatory. No code before this is complete.**
```
DIRECTION LOCK
──────────────────────────────────────────────────────────────
1. USER CONTEXT
Who uses this? What device? What emotional state?
Example: "A hiring manager, desktop, scanning in 5 seconds,
mildly skeptical, wants to be impressed."
2. DOMINANT IMPRESSION [one adjective only]
ceremonial / authoritative / intimate / raw / luxurious /
urgent / tranquil / playful / industrial / precise /
dissonant / restrained / electric
"Clean and modern" is not an answer.
3. DESIGN LINEAGE
Name the methodology or hybrid from the Method Taxonomy.
"Minimal" is not an answer.
4. ACTIVE ANTI-PATTERN
Name the exact cliché this project would default to.
Example: "Purple gradient hero, Inter, two centered CTAs."
Then: what is the designed alternative?
5. THE UNFORGETTABLE DETAIL
One thing a viewer screenshots. Name it. Build it first.
──────────────────────────────────────────────────────────────
```
### Worked Example
```
Project: Aurum — high-end Japanese-French restaurant, London
1. USER CONTEXT
Prospective diners with high disposable income, desktop + mobile,
comparing 3-4 restaurants for a special occasion.
Decision window: 8 seconds.
2. DOMINANT IMPRESSION → ceremonial
3. DESIGN LINEAGE → Art Deco × Japanese Ma
Art Deco: gilded geometry, gold on near-black, theatrical symmetry.
Japanese Ma: deliberate empty space as active element, restraint.
The tension between ornament and void is the identity.
4. ANTI-PATTERN
Full-bleed food photography hero (used by every restaurant).
Alternative: First viewport is typographic — restaurant name in
Bodoni Moda italic at full display scale. Photography appears below,
treated as editorial element, not background.
5. UNFORGETTABLE DETAIL
Right-edge vertical navigation rotated 90°, fixed on scroll.
Each section illuminates in gold via IntersectionObserver.
Derived: Palette #05 Bone & Gold · Pairing #7 Bodoni Moda + Jost
```
---
## Internal Validation Gate
Run before delivering any output. Adapted from Conflux's Anti-Hallucination Gate protocol. All five checks must pass.
| Gate | Question | Fail action |
|---|---|---|
| G-1 Distinctiveness | Could this be mistaken for AI-generated UI from the past 90 days? | Phase 0 failed → restart |
| G-2 Typography | Can you name the display + body fonts and justify each in one sentence? | Default choice → replace from Pairing Library |
| G-3 Color | Can you name the palette or describe its HSL construction logic? | Arbitrary color → apply a Named Recipe |
| G-4 Layout | Is there at least one spatial decision that would make a designer pause? | Template layout → add editorial asymmetry |
| G-5 Responsive | Does the layout have explicit `@media (min-width: 1024px)` desktop rules? | Responsive Contract skipped → add desktop rules now |
---
## Responsive Design Contract
**This section is not optional. Every output follows it.**
Mobile-first traffic exceeded 60% of global web traffic in 2025 (Statista). Google uses mobile-first indexing. A design that only works on mobile is half a design. A design that only works on desktop is broken.
### Breakpoint Architecture
Mobile-first always. Structure base CSS for smallest screens, enhance upward.
```css
:root {
--bp-sm: 480px; /* Mobile landscape */
--bp-md: 768px; /* Tablet */
--bp-lg: 1024px; /* Laptop / small desktop */
--bp-xl: 1280px; /* Desktop */
--bp-2xl: 1536px; /* Large desktop / wide */
}
.component {
display: block;
padding: 1rem;
}
@media (min-width: 768px) {
.component {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 2rem;
}
}
@media (min-width: 1024px) {
.component {
grid-template-columns: repeat(3, 1fr);
padding: 3rem;
}
}
```
**Content-driven breakpoints**: Add breakpoints where your layout breaks, not at arbitrary device targets.
### Fluid Typography — No Fixed Pixel Sizes for Display Type
```css
:root {
/* NEVER: font-size: 72px (overflows on mobile) */
/* ALWAYS: clamp(min, preferred, max) */
--t-hero: clamp(2.2rem, 7vw, 6rem);
--t-2xl: clamp(1.8rem, 5vw, 4rem);
--t-xl: clamp(1.4rem, 3vw, 2.5rem);
--t-lg: clamp(1.1rem, 1.8vw, 1.4rem);
--t-base: 1rem;
--t-sm: 0.875rem;
--t-xs: 0.75rem;
--t-2xs: 0.65rem;
--measure: 68ch;
--measure-sm: 52ch;
--measure-xs: 44ch;
}
```
### Desktop-Specific Layout Patterns
These patterns must appear in every desktop view. Do not collapse everything to single-column on desktop.
```css
/* Two-column editorial layout — primary desktop pattern */
.layout-editorial { display: block; }
@media (min-width: 1024px) {
.layout-editorial {
display: grid;
grid-template-columns: minmax(0, 65ch) 1fr;
gap: clamp(3rem, 6vw, 6rem);
max-width: 1320px;
margin-inline: auto;
}
}
/* Swiss 12-column grid */
.layout-swiss {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
padding-inline: 5vw;
}
.swiss-content { grid-column: 3 / 11; }
.swiss-wide { grid-column: 2 / 12; }
.swiss-bleed { grid-column: 1 / -1; }
/* Asymmetric hero — always left-align on desktop */
.hero-desktop {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 100svh;
padding-inline: clamp(1.5rem, 5vw, 4rem);
}
@media (max-width: 900px) {
.hero-desktop { grid-template-columns: 1fr; }
}
```
### Mobile-Specific Patterns
```css
/* Mobile nav: full-screen overlay ONLY */
@media (max-width: 767px) {
.nav-menu {
position: fixed; inset: 0; z-index: 200;
background: var(--c-bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: clamp(1.5rem, 4vh, 2.5rem);
transform: translateY(-100%); opacity: 0;
transition: transform 400ms cubic-bezier(.16,1,.3,1),
opacity 400ms cubic-bezier(.45,0,.55,1);
}
.nav-menu.open { transform: none; opacity: 1; }
.nav-menu a { font-size: var(--t-xl); }
}
/* Touch targets: 44×44px minimum (WCAG 2.5.5) */
a, button, [role="button"], input, select {
min-height: 44px; min-width: 44px;
}
@media (max-width: 767px) {
.card-grid { grid-template-columns: 1fr !important; }
.two-col { grid-template-columns: 1fr !important; }
}
```
### Container Queries — Component-Level Responsiveness
```css
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
}
}
/* Browser support: 93.92% globally as of late 2025 — safe to use in production */
```
### CSS Subgrid — Alignment Across Nested Components
Subgrid allows nested elements to inherit the parent grid's row tracks, eliminating magic numbers when aligning card internals across a grid row.
```css
/* Parent establishes named tracks */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: auto;
gap: 2rem;
}
/* Each card spans rows and inherits them from the parent */
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid; /* Inherit parent row definitions */
gap: 0;
}
/* Now card internals align to the same baseline across all cards */
.card-image { grid-row: 1; }
.card-label { grid-row: 2; align-self: end; }
.card-heading { grid-row: 3; }
.card-cta { grid-row: 4; align-self: start; }
/* Progressive enhancement: 90%+ browser support as of 2025 */
@supports (grid-template-rows: subgrid) {
.card { grid-template-rows: subgrid; }
}
```
### Image Responsiveness — Prevent CLS
```css
.img-container {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--c-surface);
}
.img-container img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
img, video { width: 100%; height: auto; display: block; }
```
### Spacing Discipline
All spacing values are multiples of 8px. No arbitrary values.
```css
:root {
--su: 8px;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
--s-24: 96px; --s-32: 128px;
--s-section: clamp(4rem, 10vh, 8rem);
--s-lg: clamp(2rem, 5vw, 4rem);
--s-pad: clamp(1.5rem, 5vw, 4rem);
}
```
---
## Dark Mode Architecture
Dark mode is not a color inversion. It is a separate surface hierarchy with different contrast relationships.
### System-Preference Detection + Manual Toggle
```css
/* Step 1: Define tokens for both modes */
:root {
--c-bg: #F5F0E8;
--c-surface: #EDE8DE;
--c-text: #1A1714;
--c-muted: #8C8278;
--c-accent: #C4501A;
--c-border: rgba(26,23,20,.1);
}
@media (prefers-color-scheme: dark) {
:root {
--c-bg: #0C0B09;
--c-surface: #151311;
--c-text: #EDE6DB;
--c-muted: #78726A;
--c-accent: #C8914A;
--c-border: rgba(200,145,74,.14);
}
}
/* Step 2: Manual toggle overrides system preference */
[data-theme="light"] { /* reassign light values */ }
[data-theme="dark"] { /* reassign dark values */ }
```
### Dark Mode Surface Hierarchy
Surfaces must lighten as they elevate — never darken. Never use pure black (`#000`). Warm near-black reads as depth; pure black reads as void.
```css
--c-bg: #0C0B09; /* Base: deepest layer */
--c-surface: #151311; /* Cards, panels */
--c-surface-2: #1E1C19; /* Modals, popovers */
--c-surface-3: #272420; /* Tooltips, highest z */
/* Shadows on dark: use ambient glow, not drop-shadow */
.dark-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: 0 0 0 1px rgba(255,255,255,.03),
0 4px 16px rgba(0,0,0,.4);
}
```
### Images in Dark Mode
```css
/* Prevent harsh white-background images on dark surfaces */
img { filter: brightness(.9) contrast(1.05); }
@media (prefers-color-scheme: light) {
img { filter: none; }
}
```
---
## View Transitions API
Smooth page transitions without JavaScript frameworks. Progressive enhancement — degrades gracefully where unsupported (96%+ browser support as of 2025).
```css
/* Enable cross-document transitions */
@view-transition { navigation: auto; }
/* Custom: slide new page in from right */
::view-transition-old(root) {
animation: slide-out-left 300ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
animation: slide-in-right 300ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes slide-out-left {
to { transform: translateX(-30px); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(30px); opacity: 0; }
}
/* Named transition: persist a hero image across page navigations */
.hero-image {
view-transition-name: hero-image; /* Must be unique per page */
contain: layout;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
```
---
## Method Taxonomy
Thirteen design lineages, fully internalized. Each has a conceptual core, use/avoid cases, and CSS implementation signature.
---
### 01 · Swiss International Typographic Style
**Core**: Grid precision. Type hierarchy through scale and weight alone — no decoration. Helvetica lineage. Swiss red as the only accent.
**Use for**: Corporate, institutional, serious journalism, healthcare, annual reports.
**Avoid for**: Consumer apps, food/lifestyle, anything requiring warmth.
```css
:root {
--f-primary: 'Neue Haas Grotesk', 'DM Sans', Helvetica, sans-serif;
--c-bg: #F2F2F0; --c-text: #111; --c-accent: #E8002D;
font-feature-settings: "tnum" 1, "kern" 1;
}
@media (min-width: 1024px) {
.swiss-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.swiss-content { grid-column: 3 / 11; }
}
```
---
### 02 · Bauhaus / Constructivist
**Core**: Geometric primary forms. Primary color triad (red, blue, yellow, black). Type as architectural shape. Strong diagonals.
**Use for**: Creative agencies, cultural institutions, art festivals, design schools.
**Avoid for**: SaaS, anything requiring approachability.
```css
:root {
--f-display: 'Barlow Condensed', sans-serif; /* 700, 800 */
--f-body: 'Barlow', sans-serif;
--c-red: #DD1C1A; --c-blue: #1A3F7A; --c-yellow: #F2C12E;
}
.bauhaus-cut { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.bauhaus-vertical {
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: clamp(3rem, 8vw, 7rem); font-weight: 800;
}
```
---
### 03 · Editorial / Magazine
**Core**: Typography drives all hierarchy. Pull quotes, standfirsts, captions are first-class design elements. Density and white space alternate deliberately.
**Use for**: Blogs, publications, writing portfolios, newsletters, content marketing.
**Avoid for**: App UIs, transactional interfaces.
```css
:root {
--f-display: 'Playfair Display', Georgia, serif; /* 700, 900, 900i */
--f-body: 'Instrument Sans', system-ui;
--f-label: 'JetBrains Mono', monospace;
--measure: 65ch;
}
.standfirst { font-size: var(--t-lg); font-weight: 300; max-width: var(--measure-sm); }
.pull-quote {
font-family: var(--f-display); font-style: italic; font-weight: 700;
font-size: var(--t-xl); border-left: 3px solid var(--c-accent);
padding-left: 2rem; margin-block: 3rem;
}
@media (min-width: 1024px) {
.editorial-grid { display: grid; grid-template-columns: 1fr 340px; gap: 4rem; }
}
```
---
### 04 · Brutalism / New Brutalism
**Core**: Raw structural honesty. Borders over shadows. Monospace by choice. Confrontation over reassurance.
**Use for**: Developer tools, open-source, counter-culture brands, avant-garde studios.
**Avoid for**: Consumer products, enterprise SaaS, risk-averse buyers.
```css
:root {
--f-display: 'IBM Plex Mono', monospace;
--f-body: 'IBM Plex Sans Condensed', sans-serif;
--c-bg: #FFF; --c-text: #000; --border: 2px solid #000;
}
.brut-card {
border: var(--border); box-shadow: 5px 5px 0 #000;
border-radius: 0; padding: 1.5rem;
transition: transform 100ms, box-shadow 100ms;
}
.brut-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 #000; }
*, button, input { border-radius: 0 !important; }
```
---
### 05 · Glassmorphism / Frosted UI
**Core**: Layered translucency. `backdrop-filter: blur()` over rich, colorful backgrounds. Depth through blur and transparency.
**Use for**: Dark-mode dashboards, music players, SaaS with strong brand color.
**Avoid for**: Light-mode layouts (effect disappears), text-heavy content.
```css
:root {
--glass-blur: 20px; --glass-sat: 1.8;
--glass-border: rgba(255,255,255,.15);
--glass-bg: rgba(255,255,255,.06);
}
.glass-backdrop {
background:
radial-gradient(ellipse 80% 50% at 20% 40%, hsl(250,80%,40%), transparent 60%),
radial-gradient(ellipse 60% 60% at 80% 60%, hsl(190,70%,35%), transparent 60%),
#0A0A14;
}
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
```
---
### 06 · Neumorphism / Soft UI
**Core**: Monochromatic surfaces. Tactile depth via dual-shadow extrusion. Light source fixed top-left. **Only works on mid-tone backgrounds (HSL lightness 70–85%).**
```css
:root { --neu-bg: #E8E4E0; --neu-radius: 16px; }
.neu-raised {
background: var(--neu-bg); border-radius: var(--neu-radius);
box-shadow: -6px -6px 12px rgba(255,255,255,.8), 6px 6px 12px rgba(0,0,0,.18);
}
.neu-pressed {
box-shadow: inset -4px -4px 8px rgba(255,255,255,.8), inset 4px 4px 8px rgba(0,0,0,.18);
}
/* WARNING: Never use on dark backgrounds — effect inverts and breaks. */
```
---
### 07 · Japanese Minimalism / Ma Aesthetics (間)
**Core**: 間 (ma) — empty space as active design element. Asymmetric balance. Unhurried pace. Subtle grain texture. Never centered, but perfectly weighted.
**Use for**: Luxury brands, high-end restaurants, design portfolios, wellness.
**Avoid for**: High-density information apps, anything with urgency.
```css
:root {
--f-display: 'Cormorant Garamond', 'Noto Serif JP', serif; /* 300, 400 */
--f-body: 'DM Sans', 'Noto Sans JP', sans-serif;
--c-bg: #FAFAF8; --c-accent: #8B6F52;
--s-section: clamp(8rem, 18vh, 14rem);
}
.ma-content { max-width: 52ch; margin-left: 15%; }
@media (max-width: 767px) { .ma-content { margin-left: 0; } }
.ma-enter { animation: ma-rise 800ms cubic-bezier(.25,.1,.25,1) both; }
@keyframes ma-rise { from { opacity: 0; transform: translateY(12px); } }
```
---
### 08 · Art Deco / Geometric Luxury
**Core**: Geometry in service of glamour. Gold, black, ivory. Radiating fan and chevron motifs. Symmetry broken by one powerful asymmetric element.
**Use for**: Luxury hospitality, fine dining, jewelry, high-end events.
**Avoid for**: Tech products, anything fast-paced.
```css
:root {
--f-display: 'Bodoni Moda', 'Cormorant Garamond', serif; /* 400i, 700 */
--f-body: 'Jost', sans-serif;
--c-bg: #0C0B09; --c-gold: #C8A84B; --c-ivory: #F5F0E3;
}
.deco-heading { letter-spacing: .25em; text-transform: uppercase; font-style: italic; }
.deco-divider { display: flex; align-items: center; gap: 1rem; }
.deco-divider::before, .deco-divider::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
```
---
### 09 · Retrofuturism / Synthwave
**Core**: The 1980s vision of the future. Phosphor glow on near-black. CRT scan lines. Grid perspective. Everything glows.
**Use for**: Gaming, music, creative tools, entertainment.
**Avoid for**: B2B, finance, healthcare.
```css
:root {
--f-display: 'Orbitron', sans-serif; /* 700, 900 */
--f-body: 'Exo 2', sans-serif;
--f-mono: 'Share Tech Mono', monospace;
--c-bg: #040810; --c-cyan: #00E5FF; --c-pink: #FF2D78;
}
.retro-glow { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
.retro-scanlines::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 1px,transparent 3px
);
}
```
---
### 10 · Organic / Biomorphic
**Core**: Fluid, non-rectangular forms. Earthy palette (terracotta, moss, sand, rust). Humanist type with personality.
**Use for**: Wellness, food, sustainable brands, yoga, skincare.
**Avoid for**: Technology, finance, anything requiring precision or authority.
```css
:root {
--f-display: 'Lora', serif;
--f-body: 'Nunito Sans', sans-serif;
--c-terracotta: #C4603A; --c-moss: #5E7A53; --c-sand: #D4B896;
}
.organic-blob {
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
animation: blob-morph 8s ease-in-out infinite alternate;
}
@keyframes blob-morph {
0% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
100% { border-radius: 70% 30% 50% 50% / 30% 70% 50% 60%; }
}
```
---
### 11 · Memphis / Pop Design
**Core**: Italian maximalism from the 1980s. Geometric shapes used decoratively — squiggles, dots, triangles. Bold primaries against pastels or black. Typography treated as illustration. Deliberately anti-functional ornamentation.
**Use for**: Fashion, streetwear, music, youth brands, editorial art direction, event pages.
**Avoid for**: Corporate, SaaS, healthcare, financial services.
```css
:root {
--f-display: 'Alfa Slab One', serif; /* 400 — single weight, maximum impact */
--f-body: 'Space Grotesk', sans-serif; /* 300, 400, 700 */
--c-yellow: #FFE600; --c-hot-pink: #FF2D78;
--c-black: #0A0A0A; --c-sky: #80D4F0;
}
/* Geometric decorative patterns via CSS — no images needed */
.memphis-dots {
background-image: radial-gradient(var(--c-hot-pink) 2px, transparent 2px);
background-size: 24px 24px;
}
/* Typography as illustration: oversized, misaligned, color-blocked */
.memphis-headline {
font-size: clamp(4rem, 15vw, 12rem);
font-weight: 400;
line-height: .85;
color: var(--c-yellow);
transform: rotate(-3deg); /* Intentional misalignment */
display: inline-block;
}
.memphis-block {
background: var(--c-hot-pink);
padding: .1em .3em;
display: inline;
}
```
---
### 12 · Swiss New Wave / Post-Digital
**Core**: Deconstruction of Swiss grid rationalism. Overlapping type, misregistered layers, diagonal rules, and layered transparency. Simultaneously systematic and anarchic. Emerged from Wolfgang Weingart; digitized by Neville Brody.
**Use for**: Cultural institutions, music labels, independent publishing, design studios, avant-garde fashion.
**Avoid for**: Consumer products, corporate, any context requiring immediate legibility.
```css
:root {
--f-display: 'Space Grotesk', 'Syne', sans-serif; /* 700, 800 */
--f-body: 'Space Mono', monospace;
--c-bg: #F0EDE5;
--c-ink: #0A0A0A;
--c-accent: #FF3300; /* Swiss red, maximal saturation */
}
/* Layered overprinting: elements float over each other */
.wave-layer {
position: absolute;
mix-blend-mode: multiply;
opacity: .85;
}
/* Diagonal type — deliberate misregistration */
.wave-headline {
font-weight: 800;
font-size: clamp(3rem, 10vw, 9rem);
line-height: .9;
margin-inline-start: -5vw; /* type bleeds off-edge intentionally */
letter-spacing: -.02em;
}
/* Exposed grid lines — system made visible */
.wave-grid::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
90deg, var(--c-accent) 0px, var(--c-accent) 1px, transparent 1px, transparent 80px
);
opacity: .12;
pointer-events: none;
}
/* Misregistered overprint: offset duplicate in accent color */
.wave-overprint { position: relative; color: var(--c-ink); }
.wave-overprint::before {
content: attr(data-text);
position: absolute;
inset: 2px 0 0 3px;
color: var(--c-accent);
mix-blend-mode: multiply;
pointer-events: none;
}
```
---
### 13 · Korean Minimal Tech
**Core**: Extreme precision in micro-spacing, Pretendard (or Noto Sans KR) for Korean/Latin harmony, near-white surfaces with surgical use of one chromatic accent. Borrows from Dieter Rams but adds warmth through subtle grain and off-white. Dominant in Korean app UI and tech startup culture since 2022.
**Use for**: SaaS products, productivity apps, fintech, any product with Korean or East Asian market presence, clean-tech brands.
**Avoid for**: Entertainment, luxury, anything requiring emotional warmth or expressiveness.
```css
:root {
--f-primary: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', system-ui;
--f-display: 'Pretendard Variable', sans-serif; /* wght: 700–900 */
--f-mono: 'JetBrains Mono', monospace;
--c-bg: #FAFAFA; /* Warm white — not pure #FFF */
--c-surface: #F4F4F2;
--c-text: #111111;
--c-muted: #888888;
--c-accent: #3B82F6; /* One clear blue — no palette drift */
--c-border: rgba(0,0,0,.08);
/* Micro-spacing: 4px base unit */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
}
/* Grain texture: warmth without visual weight */
body::after {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.03'/></svg>");
background-size: 200px;
}
/* Components: borders, not shadows — precision over depth */
.kt-card {
border: 1px solid var(--c-border);
border-radius: 8px;
padding: var(--s-6);
background: var(--c-surface);
transition: border-color 200ms;
}
.kt-card:hover { border-color: var(--c-accent); }
/* Typography: tight tracking on headings; tabular figures always */
h1, h2, h3 { letter-spacing: -.025em; font-feature-settings: "kern" 1; }
code, .mono { font-feature-settings: "tnum" 1, "ss01" 1; }
```
---
## Typography System
### Proven Type Pairings
| # | Display Font & Weights | Body Font | Mono / Label | Vibe | Best For |
|---|---|---|---|---|---|
| 1 | Cormorant Garamond 300, 400i, 600 | DM Sans 300, 400 | DM Mono 400 | Luxury restraint | Portfolios, restaurants |
| 2 | Playfair Display 700, 900, 900i | Instrument Sans 300, 400 | JetBrains Mono | Magazine authority | Blogs, publications |
| 3 | EB Garamond 400, 400i, 700 | Source Sans 3 300, 400 | Source Code Pro | Academic gravitas | Research, educational |
| 4 | IBM Plex Mono 700 | IBM Plex Sans Condensed 400 | (same) | Raw precision | Developer tools |
| 5 | Barlow Condensed 700, 800 | Barlow 300, 400 | Barlow Condensed 500 | Constructed energy | Agencies, cultural |
| 6 | Lora 400, 400i, 700 | Nunito Sans 300, 400 | Courier Prime | Organic warmth | Wellness, food |
| 7 | Bodoni Moda 400i, 700 | Jost 200, 300 | — | Theatrical luxury | Hospitality, jewelry |
| 8 | Orbitron 700, 900 | Exo 2 300, 400 | Share Tech Mono | Neon precision | Gaming, music |
| 9 | Noto Serif Display 300, 400 | Noto Sans 300 | — | Tranquil authority | Minimal luxury |
| 10 | Spectral 300, 400i, 700 | DM Sans 300, 400 | DM Mono | Refined function | Fintech, SaaS |
| 11 | Libre Baskerville 700 | Libre Franklin 300, 400 | Libre Mono | Populist editorial | News, civic |
| 12 | Alfa Slab One 400 | Nunito Sans 400 | Space Mono | Bold friendly | Food, playful apps |
| 13 | Crimson Pro 300, 400i, 700 | Plus Jakarta Sans 300, 400 | JetBrains Mono 400 | Cultural authority | Arts institutions, galleries |
| 14 | Syne 700, 800 | Onest 300, 400 | Space Mono 400 | Technical creative | Startups, creative tech |
**Loading rule**: Load only the exact weights used. Each unused weight costs 15–40kB. Always `display=swap`.
```html
<!-- Pairing #13 — Cultural Authority -->
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
<!-- Pairing #14 — Technical Creative -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Onest:wght@300;400&family=Space+Mono:wght@400&display=swap" rel="stylesheet"/>
```
### Variable Font Configuration
Variable fonts reduce HTTP requests and allow programmatic font animation.
```css
@font-face {
font-family: 'Pretendard Variable';
src: url('PretendardVariable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}
/* Animate font-weight on hover — only possible with variable fonts */
.vf-headline {
font-variation-settings: 'wght' 400;
transition: font-variation-settings 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vf-headline:hover { font-variation-settings: 'wght' 800; }
```
### Scale System
| Ratio | Name | Best For | Generated sizes (base 16px) |
|---|---|---|---|
| 1.200 | Minor Third | Dense UI, dashboards | 10 / 12 / 14 / 16 / 19 / 23 / 28 / 34px |
| 1.250 | Major Third | Marketing, SaaS | 10 / 13 / 16 / 20 / 25 / 31 / 39 / 49px |
| 1.333 | Perfect Fourth | Editorial, portfolios | 9 / 12 / 16 / 21 / 28 / 38 / 51 / 67px |
**Typography hard rules**: Body text 45–75ch line length, max 80ch. Line height 1.5–1.7 for body; 1.0–1.15 for display. Never justify text in web. Weight 100–200 on body is illegible on non-Retina screens. Never `'Inter'` as display type — it is a UI chrome font with no display voice at scale. Two typefaces maximum (occasionally three). Two from the same category cancel each other.
---
## Color Architecture
### Named Palette Recipes
**01 · Charcoal & Amber** — Dark editorial luxury
```css
--c-bg: #0C0B09; --c-surface: #151311; --c-text: #EDE6DB;
--c-muted: #78726A; --c-accent: #C8914A; --c-border: rgba(200,145,74,.14);
```
**02 · Ivory & Ink** — Light editorial warm
```css
--c-bg: #F5F0E8; --c-surface: #EDE8DE; --c-text: #1A1714;
--c-muted: #8C8278; --c-accent: #C4501A; --c-border: rgba(26,23,20,.1);
```
**03 · Swiss Steel** — Red-black-white precision
```css
--c-bg: #F2F2F0; --c-surface: #E8E8E5; --c-text: #111111;
--c-muted: #888; --c-accent: #E8002D; --c-border: rgba(17,17,17,.1);
```
**04 · Void & Cyan** — Retrofuturist dark
```css
--c-bg: #040810; --c-surface: #0A1020; --c-text: #C8E8F0;
--c-muted: #4A6878; --c-accent: #00C8E8; --c-accent-2: #FF2D78;
```
**05 · Bone & Gold** — Art Deco ceremony
```css
--c-bg: #0C0A07; --c-surface: #141209; --c-text: #F5F0E5;
--c-muted: #706858; --c-accent: #C49A45; --c-ivory: #F0E8D0;
```
**06 · Slate & Sage** — Organic wellness
```css
--c-bg: #F4F0E8; --c-surface: #EDE7DC; --c-text: #2C2820;
--c-muted: #8A8070; --c-accent: #5E7A53; --c-warm: #C4603A;
```
**07 · Paper & Depth** — Corporate authority
```css
--c-bg: #FAFAF9; --c-surface: #F0EEE8; --c-text: #0D1B2A;
--c-muted: #6B7280; --c-accent: #1B4FBF; --c-border: rgba(13,27,42,.08);
```
**08 · Dust & Rust** — Warm brutalism
```css
--c-bg: #F2EBE0; --c-surface: #EBE2D4; --c-text: #1A1410;
--c-muted: #8C7D6E; --c-accent: #B85C38; --c-border: #1A1410;
```
**09 · Ocean & Phosphor** — Deep blue dark SaaS
```css
--c-bg: #050D1A; --c-surface: #0A1628; --c-text: #D4E8F8;
--c-muted: #4A6880; --c-accent: #38B2F0; --c-accent-2: #22D3A0;
--c-border: rgba(56,178,240,.12);
/* Use case: developer dashboards, analytics, monitoring tools */
```
**10 · Midnight & Violet** — Premium dark dashboard
```css
--c-bg: #0A0814; --c-surface: #12101E; --c-text: #E8E0F8;
--c-muted: #6858A0; --c-accent: #9D7CF8; --c-accent-2: #F878B4;
--c-border: rgba(157,124,248,.14);
/* Use case: AI products, music platforms, creative tools */
```
**Construction rules**: Never pure `#000` or `#FFF`. Accent saturation minimum 45%. Background saturation maximum 10%. Monochromatic + one rule: build bg/surface/text/muted in one hue family, add exactly one unrelated accent.
---
## GitHub-Specific Design Patterns
GitHub renders Markdown in a fixed container (~800px max-width) with system fonts. These patterns apply when designing READMEs, documentation pages, or companion project sites.
### README Visual Hierarchy
```markdown
<!-- Badge cluster: order by importance — version, compatibility, status -->
[](…)
[](…)
[](…)
<!-- Never more than 5 badges — cognitive load increases beyond this -->
<!-- Use flat-square style consistently — mixing styles signals sloppiness -->
<!-- Color-code badges semantically: version=brand color, license=neutral, CI status=green/red -->
```
### Code Block Discipline
Always specify the language for syntax highlighting. Never use indented code blocks — they cannot carry language hints. Never put more than 40 lines in a single README code block; link to the source file for longer samples.
### Companion Site (Open-Source Project Page)
When building a static site alongside a GitHub project, use these tokens to bridge GitHub's visual language with intentional design.
```css
/* GitHub dark mode surface tokens — for visual continuity */
:root[data-theme="dark"] {
--c-bg: #0D1117; /* GitHub's exact dark background */
--c-surface: #161B22; /* GitHub's exact card surface */
--c-border: #30363D; /* GitHub's exact border */
--c-text: #E6EDF3;
--c-accent: #58A6FF; /* GitHub's exact blue link */
--c-green: #3FB950; /* GitHub's exact success green */
}
/* Code blocks: match GitHub's rendering */
pre, code {
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
font-size: 0.875rem;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 6px;
}
```
---
## Performance Standards
Performance is a design quality. A visually stunning page that loads in 5 seconds on mobile is a failed design.
### Core Web Vitals Targets
| Metric | Target | What it measures |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | Perceived load speed |
| INP (Interaction to Next Paint) | < 200ms | Responsiveness |
| CLS (Cumulative Layout Shift) | < 0.1 | Visual stability |
### Asset Optimization
```html
<!-- Preload the LCP image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<!-- Preconnect to font providers -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Defer non-critical scripts -->
<script src="analytics.js" defer></script>
<!-- Lazy-load below-fold images -->
<img src="feature.webp" loading="lazy" decoding="async" alt="…">
```
### CSS Performance Rules
```css
/* NEVER animate reflow properties */
/* BAD: */ transition: width, height, top, left, margin, padding;
/* GOOD: */ transition: transform, opacity;
/* Add will-change ONLY after profiling confirms a specific animation is slow */
.animated-element { will-change: transform; }
/* Contain layout: prevent child changes from propagating upward */
.card-grid { contain: layout; }
/* Font loading: prevent invisible text during load */
@font-face { font-display: swap; }
```
### Image Format Decision Tree
```
Photograph? → WebP (50-70% smaller than JPEG) → fallback JPEG
Logo/icon with transparency? → SVG (scales infinitely) → fallback PNG
Animated illustration? → CSS animation or SMIL SVG → fallback GIF
Above the fold? → fetchpriority="high" + preload
Below the fold? → loading="lazy" + decoding="async"
```
---
## Motion Design
```css
:root {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
--dur-instant: 100ms;
--dur-fast: 200ms;
--dur-base: 400ms;
--dur-slow: 600ms;
--dur-crawl: 900ms;
}
/* GPU-composited enter animation — ONLY opacity + transform */
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
/* Staggered group */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
/* NEVER: transition: all 200ms ease; */
.btn { transition: background-color var(--dur-fast) var(--ease-smooth),
transform var(--dur-fast) var(--ease-out); }
/* Minimum loop duration: 4 seconds — shorter loops cause visual fatigue */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
```
---
## Accessibility Integration
**Contrast**: Body text < 18px: 4.5:1 minimum. Large text ≥ 18px: 3:1. UI components: 3:1. Check at [webaim.org/resources/contrastchecker](https://webaim.org/resources/contrastchecker) before delivery.
**Color is never the only signal**: 8% of males are red-green colorblind. Error states = red + icon + copy. Success = green + checkmark + copy.
```css
:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
border-radius: 2px;
}
```
**Semantic HTML contract**: Every page uses `<header>`, `<nav aria-label>`, `<main>`, `<section aria-labelledby>`, `<article>`, `<aside aria-label>`, `<footer>`. One `<main>` per page. Every `<section>` has an `<h2>`. All images have `alt`. Interactive elements are natively interactive — `<button>`, not `<div role="button">`. Use `<dialog>` with `showModal()` for modals, not `<div position:fixed>`.
---
## Component Heuristics
**Hero**: One primary CTA. Two equal CTAs split attention and halve conversion. Headlines large enough to read at 200px thumbnail width. Background: typographic, textural, abstract, or illustrative — never stock photography of people at laptops.
**Navigation desktop**: Fixed or sticky, max 64px height, all links visible. Dropdowns maximum one level.
**Navigation mobile**: Full-screen overlay or slide-in panel only. No horizontal nav bar. No multi-level dropdowns. Stagger link entries with 80ms delay increments.
**Cards**: Three data points maximum on the card face. Shadow discipline — one depth per z-level. A card's border-radius must match the project's geometric vocabulary, not default to `12px`. Use CSS subgrid for card grids where internal alignment across rows matters.
**Forms**: Every input has a visible persistent `<label>`. Placeholder text disappears — it is not a label. Error: red + icon + message. Success: green + checkmark. Tab order matches visual order. Input height minimum 44px.
---
## Code Output Standards
### Complete Design Token Template
```css
:root {
/* ── COLOR ──────────────────────────────────── */
--c-bg: #0C0B09; --c-surface: #151311;
--c-text: #EDE6DB; --c-muted: #78726A;
--c-accent: #C8914A; --c-border: rgba(200,145,74,.14);
/* ── TYPOGRAPHY ─────────────────────────────── */
--f-display: 'Playfair Display', Georgia, serif;
--f-body: 'Instrument Sans', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', 'Courier New', monospace;
/* ── SCALE (Perfect Fourth × 1.333) ────────── */
--t-hero: clamp(2.5rem, 7vw, 6rem);
--t-2xl: clamp(1.8rem, 5vw, 4rem);
--t-xl: clamp(1.4rem, 3vw, 2.5rem);
--t-lg: clamp(1.1rem, 1.8vw, 1.4rem);
--t-base: 1rem; --t-sm: .875rem; --t-xs: .75rem; --t-2xs: .65rem;
/* ── MEASURE ─────────────────────────────────── */
--measure: 68ch; --measure-sm: 52ch; --measure-xs: 44ch;
/* ── SPACING (8px grid) ──────────────────────── */
--s-section: clamp(4rem, 10vh, 8rem);
--s-lg: clamp(2rem, 5vw, 4rem);
--s-pad: clamp(1.5rem, 5vw, 4rem);
/* ── MOTION ──────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
--dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 600ms;
}
```
**Class naming**: Role-descriptive, never appearance-descriptive. `.hero-headline` not `.big-white-text`. `.card--featured` not `.gold-border-card`.
---
## Failure Mode Diagnostics
**Mode 1 — Direction Lock was incomplete**
Symptom: Output is technically correct but has no character.
Remedy: Return to Phase 0. One adjective. One named methodology. One specific unforgettable detail. Rebuild.
**Mode 2 — Palette has no commitment**
Symptom: Colors are inoffensive but forgettable.
Remedy: Select a Named Palette Recipe and apply it without modification on the first pass.
**Mode 3 — Typography has no voice**
Symptom: Type is proportional and appropriate, but the page has no personality.
Remedy: Maximize display/body contrast. An expressive serif (Playfair Display 900i) against a neutral grotesque (DM Sans 400) creates voice. Two neutral typefaces cancel each other.
**Mode 4 — Layout defaults to centered everything**
Symptom: Every section is symmetrically centered. No tension, no directionality.
Remedy: Name the layout pattern before writing CSS. Left-align body content by default. Centering is a deliberate statement, not a default state.
**Mode 5 — Only mobile or only desktop was designed**
Symptom: On desktop, everything is stacked single-column. Or on mobile, content overflows.
Remedy: Apply the Responsive Design Contract. Build mobile first, then write explicit `@media (min-width: 1024px)` rules for every major layout component. Test at 375px, 768px, 1280px, and 1440px before delivery.
**Mode 6 — Unforgettable detail described but not built**
Symptom: Output is polished but not memorable.
Remedy: Build the unforgettable detail first, not last. It is the conceptual anchor. If it is not visible on first scroll at normal speed, it is not doing its job.
**Mode 7 — Dark mode is a color inversion**
Symptom: `filter: invert(1)` applied to root, or every light token is its direct opposite. Images become negatives. Text feels harsh.
Remedy: Dark mode is a new surface hierarchy. Redefine all color tokens. Surfaces elevate by getting lighter. Shadows become ambient glow. Images use `brightness(.9) contrast(1.05)`. Refer to Dark Mode Architecture.
**Mode 8 — Animation is gratuitous, not functional**
Symptom: Every element animates on scroll regardless of whether the motion carries information. The user is watching things move rather than reading content.
Remedy: Every animation must answer "what does this motion communicate?" Entrance animations reveal hierarchy. Hover transitions confirm interactivity. Loading states indicate process. Decorative motion that cannot answer this question must be removed. Always respect `prefers-reduced-motion`.
---
## Output Signature Test
Run internally before delivering any output. All five must pass.
**1 — Distinctiveness**: Could this be mistaken for any other AI-generated UI from the past 90 days? → If yes: Phase 0 failed. Restart.
**2 — Typography justification**: Can you name the display and body fonts and explain in one sentence why those specific fonts? → If not: Default choice. Replace from the Pairing Library.
**3 — Color attribution**: Can you name the palette or describe its construction logic? → If not: Arbitrary color. Apply a Named Recipe.
**4 — Layout surprise**: Is there at least one spatial decision that would make a designer expecting a conventional layout pause? → If no: Template layout. Add editorial asymmetry, a grid breaker, or density contrast.
**5 — Responsive verification**: Does the layout have explicit desktop-view rules (`@media (min-width: 1024px)`)? Does it look intentional at 1280px, not just stacked? → If no: Responsive Contract was skipped. Add desktop layout rules before delivery.
---
## Anti-Aesthetics Index
| # | Prohibited | Why | Alternative |
|---|---|---|---|
| 1 | `linear-gradient(135deg, #6366f1, #8b5cf6)` hero | Statistical default. Zero research. | Named palette near-black + ambient radial at 5% opacity; or heading text as texture via `-webkit-text-stroke` |
| 2 | `'Inter'` as display type | UI chrome font. No display voice at scale. | Any Pairing Library entry with non-standard weight (300i, 900, variable axis) |
| 3 | White bg + `border-radius:12px` + `box-shadow: 0 4px 24px rgba(0,0,0,.08)` | Verbatim Tailwind UI default. No design decision. | `border: 1px solid var(--c-border)` with left-edge accent on hover; or color-field cards with no shadow |
| 4 | Centered hero: headline + sub + two equal CTAs | Identical to ~40% of the web. Passive. | Left-aligned, one CTA, standfirst in muted color, asymmetric spatial weight |
| 5 | Teal + coral + white | Template marketplace SaaS. No brand. | Any Named Recipe. Minimum: specific near-black warmth, not `#000` |
| 6 | `transform: scale(1.05)` card hover | Tailwind `hover:scale-105`. No information content. | `translateY(-4px)` + shadow deepening; or left-edge accent reveal; or clip-path underline draw |
| 7 | 🚀/✨ as section icons | Content, not design. The emoji does no visual work. | SVG icons at consistent stroke weight; or numbered section system in mono label font |
| 8 | Everything single-column on desktop | Failure to apply Responsive Contract to desktop. | Explicit `@media (min-width: 1024px)` multi-column grid for every section |
| 9 | `filter: invert(1)` for dark mode | Mechanical inversion breaks color relationships. Images become negatives. | Dedicated dark-mode token set per the Dark Mode Architecture section |
| 10 | Glassmorphism on light backgrounds | `backdrop-filter: blur()` is invisible on white or near-white surfaces — the blur has nothing to blur. | On light-mode surfaces, use bordered elevation with subtle drop-shadow instead |
| 11 | Variable font loaded at all weight axes | Loading all axes adds weight equivalent to every static variant. | Define only the needed range: `font-weight: 400 800;` not `100 900`. Subset with `unicode-range`. |
No comments yet. Be the first to comment!
