web-design

Web Design

Focus on clear hierarchy, generous spacing, and restrained styling to make interfaces feel intentional.

Visual Hierarchy & Focus

Group related elements by proximity and aligned edges; avoid scattered, evenly-spaced elements that compete for attention.
Add hierarchy with weight before color: font-weight: 600 and size changes beat random accent colors.
Reduce noise: fewer borders; use spacing, background tints, or subtle dividers instead of heavy outlines.

Layout & Spacing

Use a consistent scale (4px or 8px).
Make vertical rhythm obvious: larger gaps between sections than between labels/inputs.
Set max widths for readability (e.g. max-width: 1280px for pages, 68-70ch for text blocks).
Pad clickable areas generously (12–16px vertical, 16–24px horizontal) so touch targets feel confident.

Typography

Pick one font family; use weight/size/letter-spacing for contrast instead of juggling many fonts.
Define a small scale of text styles (e.g., 32/40 , 24/32 , 18/28 , 16/24 , 14/20 ) and reuse them.
Use letter-spacing for uppercase labels; use color to de-emphasize metadata instead of shrinking excessively.

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: #6c7280; }

Color & Contrast

Start with neutrals; let a single accent color carry primary actions. Avoid pure black/white—use softened grays for warmth.
Build palettes by lightening/darkening the same hue; use low-saturation tints for surfaces and bolder shades for actions.
Ensure contrast for text on tints; add a subtle border when a tinted panel touches a white background.
Use color for meaning (success/info/warn/danger) plus an icon or text so color-blind users are covered.

Depth, Shape & Elevation

Prefer soft, diffuse shadows for elevation; combine slight offset with low opacity blur. Avoid harsh, opaque drop shadows.
Keep radii consistent (e.g., 8–12px across inputs, cards, modals). Match inner elements to the parent radius.
Separate stacked surfaces with either a light border or a faint shadow but not both.

Components That Feel Designed

Buttons: one clear primary, a low-emphasis secondary (ghost/text), and a destructive variant. Use consistent padding and radius.
Forms: pair clear labels with inputs; avoid placeholder-as-label; show inline validation close to the field; use generous vertical spacing.
Lists/tables: increase row height, soften alternating backgrounds, and highlight the primary cell with weight/color.
Icons: keep stroke weight consistent; pair icons with labels unless the meaning is universal. Balance visual weight with padding.

States, Feedback & Empty Space

Design hover, active, focus, loading, error, and success states. A primary button should have at least hover + active + disabled styles.
Use skeletons or subtle shimmer for loading instead of spinners alone; provide friendly empty states with a short “what to do next.”
Clarify errors with color, icon, and text; reserve red for errors and use calmer hues for neutral info.
Give content room to breathe—whitespace is a design tool, not wasted space.

Compositional Polish

Use consistent gaps, radii, shadows, and border colors across the entire UI to create harmony.
Replace visual clutter (dividers, lines, boxes) with spacing and alignment; let one strong anchor (title or primary action) lead.
When stacking elements on images, add a dark or light overlay to keep text legible.

Source Transparency