Skip to main content

Website design

Overview​

Website design covers visual language (typography, color, spacing), layout, and how those choices support usability and brand. Good design aligns with content goals and technical constraints (responsive breakpoints, performance, accessibility).

Key concepts​

  • Visual hierarchy — Headlines, spacing, and contrast guide attention.
  • Responsive layout — Fluid grids, breakpoints, and touch-friendly targets.
  • Design systems — Reusable tokens, components, and patterns.
  • Brand vs usability — Decorative flair should not block task completion.
  • Handoff — Designers and developers share specs (Figma, tokens, component libraries).

Design-to-build flow​

Sample: design tokens (CSS custom properties)​

:root {
  --color-bg: #0f1419;
  --color-text: #e6edf3;
  --font-sans: system-ui, sans-serif;
  --space-md: 1rem;
  --radius: 8px;
}

.card {
  font-family: var(--font-sans);
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

References​