Skip to content

Latest commit

 

History

History
52 lines (35 loc) · 1.34 KB

File metadata and controls

52 lines (35 loc) · 1.34 KB

UI Style Guide 2026

Layout

  • Fewer, well-defined containers over many small sections
  • Generous spacing creates separation before adding visual effects
  • Cards are acceptable when they express grouping or hierarchy

Corners

  • Rounded corners are standard
  • Subtle radius values that feel intentional, not playful
  • Avoid sharp 90-degree corners unless intentionally industrial

Shadows and Depth

  • Soft, low-contrast, diffused shadows
  • Shadows imply separation, not elevation theatrics
  • No heavy drop shadows or strong directional lighting
  • One to two shadow layers max

Cards

  • Cards should feel grounded, not floating
  • Light elevation, border plus shadow, or surface contrast
  • Don't overuse cards as a default layout primitive

Color and Surfaces

  • Soft neutrals, off-whites, warm grays
  • Surface contrast or translucency instead of strong outlines
  • Glass/frosted effects acceptable when subtle and accessible

Interaction

  • Micro transitions reinforce spatial relationships
  • Hover/focus states feel responsive, not animated
  • No excessive motion or springy effects

Typography

  • Strong headings, calm body text
  • No visual noise around content

What to Avoid

  • Chunky shadows
  • Overly flat, sterile layouts
  • Neumorphism as primary style
  • Over-designed card grids

Summary: If depth does not improve comprehension, remove it.