Hard borders age quickly. Soft surfaces use elevation: fill, inset highlight, and ambient shadow — the same recipe in light and dark via semantic tokens.
Challenge
- Components hardcoded greys per theme
- Hover states felt noisy or flat
- Cards and rails looked inconsistent across pages
Approach
- Shared softSurface / softIcon / softRail utilities
- Semantic colors for card, muted, and primary
- Small intentional hover motion
- Theme QA on every surface before ship
Results
One surface language across the site. New features inherit polish instead of inventing a new card style each time.
Topics: UI, CSS, Tokens
All case studies