responsive-patterns
Responsive Patterns
Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.
When to Use
- When
ui-compositiondefines a layout that spans breakpoints - When the design-critic flags responsive issues
- When building anything more complex than single-column
Breakpoint Strategy
Content drives breakpoints, not devices. Do not use 768px because "that's tablet." Use the width where your content breaks.
- Start at 320px
- Widen slowly
- When the layout looks wrong — that's a breakpoint
- Name by behaviour, not device
More from owl-listener/designpowers
adaptive-interfaces
Use when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to individual needs
6token-architecture
Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution
6motion-choreography
Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
6design-discovery
You MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying user-facing behaviour. Explores intent, constraints, users, and context before any design decisions are made
6design-memory
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
6design-system-alignment
Use when working with or building design systems — tokens, components, naming conventions, theming, or pattern libraries — ensures consistency, accessibility compliance, and systematic thinking
6