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

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.

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.

: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

: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.

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

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

.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.

/* 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 {
  displa