Design Principles
The 9 core principles derived from Apple's Human Interface Guidelines. These aren't style rules — they are the decision-making framework behind every component, layout, and interaction pattern in the system.
Core Design Principles
Each principle addresses a dimension of the user experience. Together they form an interlocking system where excellence in one reinforces the others.
Every element serves a purpose. Eliminate visual noise. Text must be legible at every size. Icons are unambiguous. White space is intentional, not empty. A clear interface communicates instantly — the user never has to decode the UI to find the content.
Visual weight guides attention. Size, weight, color, and position all communicate relative importance. The most important information should be the most visually dominant. Users scan before they read — hierarchy gives them a map.
Layers create context. Content lives in a spatial, dimensional environment. Elevation communicates hierarchy — elements closer to the user carry more importance. Blur, shadow, and translucency are the tools of depth, not decoration.
The UI responds to every interaction. States are always visible. Taps produce visual, and where appropriate, haptic responses. Loading states, error states, success states — every outcome is communicated clearly. Silence in an interface reads as broken.
Familiar patterns reduce cognitive load. Don't reinvent interactions that already have established conventions. Consistent use of color, spacing, motion, and component behavior means users only learn once — then apply that knowledge everywhere.
Chrome defers to content. UI elements support, not compete. Navigation, toolbars, and controls step back when users are consuming or creating. The interface should feel like a frame for the content, not a painting hung in front of it.
Controls look like they work the way they work. Buttons look pressable. Sliders look slideable. Scrollable areas look scrollable. Visual design communicates interaction model — users should never need to discover that something is interactive through trial and error.
Interfaces respond to context, size, capability, and user preference. A great interface works on a 320px phone and a 5120px monitor. It respects system dark mode, reduced motion, accessibility font sizes, and high contrast preferences without requiring user configuration.
prefers-reduced-motion, or using fixed pixel values instead of fluid sizing.Use platform conventions. Resist the urge to be "different." Swipe to go back, pull to refresh, long-press for context menus — these are not constraints, they are features. Users arrive with years of platform knowledge. Native thinking lets you borrow that knowledge for free.
Principles in Practice
Each principle rendered as a tangible UI pattern. These are not illustrations — they are live components from the design system.
Frontend Implications
How each principle translates into concrete CSS approaches, React patterns, and common violations to avoid in production code.
| Principle | CSS Approach | React Pattern | Common Violation |
|---|---|---|---|
| Clarity | color contrast ratio ≥ 4.5:1, font-size minimum 12px, purposeful whitespace |
Single-responsibility components, meaningful prop names, no hidden state | Low-contrast placeholder text, decorative icons without aria-hidden |
| Hierarchy | font-size scale, font-weight 400→700, color primary→tertiary |
Semantic HTML — <h1>→<h6>, <strong>, <small> |
All text font-weight: 600, overuse of uppercase labels |
| Depth | box-shadow scale, backdrop-filter: blur(), z-index tokens |
Portal-rendered modals, z-index context via CSS variables |
Heavy shadows on every card, blur without a background layer |
| Feedback | :hover, :active, :focus-visible, transition on state |
Loading, error, success states in every async operation; aria-live regions |
Async submit with no loading state, missing :focus-visible styles |
| Consistency | CSS custom properties (var(--color-accent)), shared class names |
Design system component library, shared prop interfaces, Storybook | Inline styles, hardcoded hex values, duplicate component implementations |
| Content Focus | position: sticky with scroll-aware opacity, overflow: hidden chrome |
Context-aware UI visibility, scroll-direction hook, hide-on-scroll patterns | Fixed toolbars consuming >20% of viewport height on mobile |
| Affordance | cursor: pointer, visible border on inputs, :hover background shifts |
role="button", tabIndex, keyboard event handlers alongside click |
Div-based buttons without role, hover-only affordance on touch devices |
| Adaptability | clamp(), @media queries, prefers-color-scheme, prefers-reduced-motion |
useMediaQuery hook, responsive design tokens, system theme sync |
Fixed px widths, ignoring prefers-reduced-motion for animations |
| Native Thinking | Platform scroll behavior, native <select> on mobile, touch-friendly tap targets (44px) |
React Navigation conventions, standard gesture libraries, system share API | Custom scroll-jacking, non-standard gesture direction overrides |
The Hierarchy Pyramid
Every interface is built in layers. The lowest layers are the most fundamental — changes here ripple through everything above. Understand this model and you'll make better decisions at every level of the stack.
12 Practical Rules
Distilled from the 9 principles — these are the rules you'll reach for most often during design and implementation reviews.
prefers-reduced-motion. Wrap all non-essential animations in a media query. Some users have vestibular disorders where motion causes physical discomfort.