High-performing sites today aren’t a pile of pretty screens—they’re design systems: repeatable rules for layout, color, type, motion, and components that scale with you. Below is a compact, practical blueprint you can drop into any project to get professional, consistent results without reinventing the wheel.
1) Layout: Grids, Spacing, and Density
Grid
- Use a 12-column fluid grid on desktop, 6/8 on tablet, 4 on mobile.
- Content container:
max-width: 1200–1280px,padding-inline: 16–24px. - Gutters: 16px mobile, 24px tablet, 32px desktop.
Spacing scale (tokens)
- Establish a modular scale and stick to it:
--space-0: 0--space-1: 4px--space-2: 8px--space-3: 12px--space-4: 16px--space-5: 24px--space-6: 32px--space-7: 48px--space-8: 64px
- Use only tokens. No “random 22px” margins. Consistency drives visual rhythm and maintainability.
Density
- Offer two density modes:
- Comfortable (default) for marketing and reading.
- Compact (–20% paddings) for dashboards and data tables.
2) Typography: Readability and Scale
Type scale (fluid)
- Use
clamp()to smoothly adapt across viewports:
:root{
--fs-xxs: clamp(0.75rem, 0.68rem + 0.3vw, 0.85rem);
--fs-xs: clamp(0.875rem, 0.80rem + 0.4vw, 1rem);
--fs-sm: clamp(1rem, 0.92rem + 0.5vw, 1.125rem);
--fs-md: clamp(1.125rem,1.02rem + 0.6vw, 1.25rem);
--fs-lg: clamp(1.25rem, 1.12rem + 0.7vw, 1.5rem);
--fs-xl: clamp(1.5rem, 1.35rem + 1vw, 2rem);
--fs-2xl: clamp(2rem, 1.8rem + 1.5vw, 2.75rem);
}
- Line length: 60–75 characters for body text.
- Line height: 1.5 for paragraphs, 1.2–1.3 for headings.
- Avoid using more than two families: a reliable sans (Inter, System UI) and a serif or display face for accents.
Contrast
- Body text on backgrounds should meet WCAG 2.2 AA (4.5:1). Headlines at large sizes can be 3:1, but aim higher for comfort.
3) Color: Light/Dark Themes and Tokens
Design color via semantic tokens rather than raw hex values. This makes theming trivial.
:root {
/* Neutrals */
--bg: #0b0b0c;
--bg-elev: #121214;
--surface: #ffffff;
--text: #101114;
--text-muted: #61646b;
/* Brand */
--brand-600: #4f46e5;
--brand-700: #4338ca;
/* Semantic */
--primary-bg: var(--brand-600);
--primary-fg: #ffffff;
--success: #16a34a;
--warning: #f59e0b;
--danger: #ef4444;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--surface: #0e1116;
--text: #e7e9ee;
--text-muted: #a1a6b0;
--bg: #0b0e13;
--bg-elev: #121722;
}
}
Rules
- Use one primary brand color, one accent, and consistent neutrals.
- For states (success/warning/danger), ensure contrast on both themes; verify focus states too.
- Avoid neon-on-neon. If it vibrates on your screen, it will on your users’.
4) Motion: Purpose, Not Decoration
Motion should inform—not distract.
- Timing: 120–200ms for small UI, 200–300ms for overlays/modals.
- Easing:
cubic-bezier(0.2, 0.8, 0.2, 1)for entrances;cubic-bezier(0.4, 0, 1, 1)for exits. - Reduce motion: Respect
prefers-reduced-motionand switch to fades/transforms of ≤ 50ms. - Micro-interactions: Reveal hover/focus hints, confirm success, and guide attention on errors (shake is fine at low amplitude).
5) Components: Minimal, Composable, Accessible
Design a starter set and define variations up front.
Buttons
- Sizes:
sm,md,lg(hit area ≥ 44×44). - Variants:
primary,secondary,ghost,danger. - States: default, hover, active, focus (visible), disabled, loading.
Inputs
- Labels always visible (no placeholder-only labels).
- Error text below input with an icon and
aria-describedby. - Hit area ≥ 44px height; clear focus rings.
Cards
- Soft radius (10–16px), subtle shadow; on dark mode, prefer borders over heavy shadows.
- Content spacing uses tokens (
--space-5,--space-6).
Navigation
- Keep top navigation ≤ 7 items; overflow into “More”.
- On mobile, use a bottom bar for primary sections; avoid nested hamburger mazes.
6) Accessibility by Default
- Keyboard: Every interactive element reachable with Tab/Shift-Tab; visible focus outline distinct from hover.
- ARIA: Use semantic HTML first, ARIA second. Avoid div-soup components.
- Forms: Associate labels via
for/id; group related fields (fieldset/legend). - Color: Do not communicate meaning by color alone—add icons/text.
- Media: Provide alt text; for decorative images,
alt="". Captions/transcripts for video/audio.
Run automated checks (axe, Lighthouse), then manual keyboard sweeps and screen reader spot checks before shipping.
7) Images and Illustration
- Art direction: Use
<picture>for different crops across breakpoints. - Formats: AVIF first, WebP fallback, original as last resort.
- Aspect ratio: Set
width/heightoraspect-ratioto prevent layout shift. - Iconography: Use a unified set (stroke or fill, not both). Keep sizes on an 8px grid.
8) Performance & Perception
- Fonts: Subset,
font-display: swap, and keep to ≤ 2 families. - Critical CSS: Inline above-the-fold; defer the rest.
- LCP: Prioritize the hero image with
fetchpriority="high". - JS budget: Keep initial JS under ~170–200KB compressed for marketing pages; defer non-critical scripts.
- Skeletons: Pre-allocate layout to avoid CLS; keep shimmer subtle or use static placeholders.
9) Content and Voice
Design is not just visuals—words carry the experience.
- Headings: Clear, benefit-oriented.
- Body: Short paragraphs (≤ 4 lines), active voice.
- Microcopy: Buttons and toasts speak plainly (“Save changes”, “Copied”).
- Empty states: Show purpose + next step, not emptiness.
- Error states: Say what broke and how to recover.
10) Governance: Tokens, Docs, and Reviews
- Tokens as code: Store color/type/space tokens in JSON and compile to CSS variables.
- Docs site: A simple Storybook or Zeroheight page describing usage, do/don’t, and code snippets.
- Design review: Add a lightweight review before merging UI changes; check contrast, spacing, and responsive behavior.
- Visual regression: Snapshot critical pages at common breakpoints.
Copy-Paste Starters
Button
.button {
display:inline-flex; align-items:center; justify-content:center;
gap: var(--space-2);
padding: 0.6em 1.1em; border-radius: 12px; font-weight: 600;
border: 1px solid transparent; cursor: pointer;
}
.button.primary { background: var(--primary-bg); color: var(--primary-fg); }
.button.primary:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary-bg), white 35%); outline-offset: 2px; }
.button.ghost { background: transparent; border-color: color-mix(in oklab, var(--text), transparent 70%); color: var(--text); }
.button[disabled]{ opacity: .55; cursor:not-allowed; }
Card
.card {
border-radius: 14px; padding: var(--space-6);
background: var(--surface);
border: 1px solid color-mix(in oklab, var(--text), transparent 88%);
}
Quick Pre-Launch Checklist
- Typography uses fluid scale and meets contrast.
- Spacing follows tokens; no ad-hoc values.
- Focus states visible and keyboard paths tested.
- Images responsive with defined aspect-ratios.
- Dark mode verified by token swap.
- LCP/CLS/INP pass in Lighthouse and field RUM.
- Empty/error states are helpful, not placeholders.
- Components documented with usage rules.
Final word
Modern web design is less about hero shots and more about repeatable systems. Lock your tokens, grid, and type early; build accessible, minimal components; and measure performance as a first-class requirement. The payoff is velocity: new pages look polished by default, and your users feel the care.
