Product Design
Product Surfaces
Compose cards, controls, navigation, and states with disciplined hierarchy.
Cards are for grouping
Do not put every paragraph inside a card. Use a card when elements share a task, state, action, or selection boundary. Prefer spacing and alignment for ordinary editorial grouping.
Controls communicate hierarchy
Each region should have one clear primary action. Secondary actions use quieter surfaces or text treatment. Disabled controls remain legible and explain unavailable behavior when the reason is not obvious.
Inputs remain explicit
Place labels above fields. Keep placeholders as examples, not labels. Show errors near the source and preserve entered values after validation.
Navigation fits frequency
Marketing and editorial sites need concise top navigation. Mobile products may use stable tabs. Repeated desktop work benefits from sidebars, panes, command search, and keyboard shortcuts.
Complete the state cycle
Design default, hover, focus, active, selected, disabled, loading, empty, error, offline, success, and destructive states when they apply. Essential actions cannot depend on hover.