frontend-design

Frontend Design

Create interfaces with intentional aesthetics and professional execution. Avoid generic "template" looks.

Design Process

Before writing code, answer these questions:

1. Purpose — What problem does this interface solve? Who uses it?
2. Tone — What aesthetic direction? (brutalist, luxury, playful, editorial, retro-futuristic, etc.)
3. Constraints — Device targets, accessibility requirements, performance budget
4. Signature — What single element makes this memorable?

Commit to a direction. Timid design is worse than bold design with flaws.

Typography

Font Selection

Avoid overused defaults. Choose typefaces that reinforce the interface's personality.

/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */

Typographic Details

/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */

Handle text overflow deliberately:

/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }

Color Systems

Theme Architecture

Build on CSS custom properties with clear semantic naming.

:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}

Color Principles

• Commit to a palette — 1 dominant + 1–2 accents. Avoid 5-color rainbows.
• Use oklch — Perceptually uniform, better than hex/hsl for programmatic palettes.
• Contrast ratios — 4.5:1 minimum for body text, 3:1 for large text (WCAG AA).

Motion & Animation

Rules

1. Respect user preference: Always honor prefers-reduced-motion
2. Animate only transform and opacity: These are GPU-composited, everything else triggers layout/paint
3. Never use transition: all: List specific properties
4. Animations must be interruptible: User actions should cancel running animations

/* GOOD: Specific properties, respects user preference */
.card {
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

High-Impact Moments

Focus animation budget on:

• Page transitions — Orchestrated staggered reveals
• State changes — Loading → content, collapsed → expanded
• Feedback — Button press, form submission confirmation

Skip: random hover effects on every element, scroll-jacking, decorative background animations.

Spatial Composition

Layout Principles

• Asymmetry is interesting — Perfectly centered grid layouts are predictable
• Intentional negative space — White space is a design element, not a mistake
• Grid-breaking elements — One element that overlaps or extends beyond the grid creates focus
• Diagonal flow — Eye movement along diagonals is more engaging than horizontal scan

Responsive Strategy

/* Fluid typography */
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* Container queries for component-level responsiveness */
.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}

Backgrounds & Atmosphere

Build visual depth through layered treatments:

/* Noise texture overlay */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

/* Gradient mesh */
.hero {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.7 0.15 250 / 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.7 0.2 30 / 0.2), transparent 50%),
    var(--color-bg);
}

Images & Media

// Explicit dimensions prevent layout shift
<Image src={src} width={800} height={600} alt="Description" />

// Below-fold: lazy load
<Image src={src} loading="lazy" alt="..." />

// Above-fold: prioritize
<Image src={src} priority alt="..." />

// Decorative: empty alt
<Image src={pattern} alt="" aria-hidden="true" />

Interactive States

Every interactive element needs 4 states:

State	Treatment
Default	Base appearance
Hover	Increased contrast or subtle shift
Focus	Visible ring via :focus-visible
Active/Pressed	Slight scale or color change
Disabled	Reduced opacity + cursor: not-allowed

.button {
  background: var(--color-accent);
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.button:hover { background: var(--color-accent-hover); }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.button:active { transform: scale(0.98); }

Anti-Patterns

Avoid	Instead
Inter/Roboto/Arial everywhere	Choose distinctive, project-appropriate typefaces
Purple gradient on white	Commit to a specific, cohesive palette
Uniform card grids	Vary sizes, add featured/hero cards
Shadows on everything	Use shadow purposefully for elevation hierarchy
border-radius: 9999px on all elements	Match radius to content type and context
Identical hover effects	Tailor interaction feedback to element function