Purpose
To define repeatable layout patterns that cover most UI needs (landing pages, dashboards, forms, marketing modules), ensuring design speed, consistency, and reduced decision fatigue.
1. Why Patterns Matter
- Users learn patterns fast → breaking them increases friction.
- Teams scale faster → reusing patterns instead of improvising.
- Devs love patterns → fewer custom layouts, easier to maintain.
2. Core UI Patterns
| Pattern Type | Definition | Structure | Best Use Cases | Notes |
| Hero + CTA | Top-of-page entry block with key message + action | Headline → Subtext → Primary CTA → Visual | Landing pages, app onboarding | Only 1 hero per screen; CTA must be primary |
| Card Grid | Modular containers with repeatable content | Card (icon/image + title + text + CTA) in 2–4 columns | Feature lists, dashboards, pricing | Must be responsive: 3→2→1 columns |
| Form Layout | Input-driven task blocks | Label → Input → Helper/Error text | Sign-ups, bookings, data entry | Use vertical stacking for mobile |
| Sidebar + Content | Persistent nav on left/right, dynamic content on main pane | Sidebar → Content → Optional filters | Dashboards, admin tools | Collapsible on tablet; bottom nav on mobile |
| List + Detail | List view on left, detail view on right | List panel → Detail panel | Messaging, task managers, CRMs | Collapse list into tab on mobile |
| Banner/Strip CTA | Narrow call-to-action bar | Short message → CTA button | Upsells, notifications | Place mid-flow or at bottom |
| Modal/Overlay | Focused container triggered on action | Overlay → Content → CTA | Confirmation flows, quick forms | Keep max width 600px |
| Empty State | Default screen when no data exists | Illustration → Message → CTA | First-time users, “no results” | Always guide next action |
3. Pattern Selection Process
- Map Need to Pattern
- Ask: “What’s the main action/outcome?” → Pick base pattern.
- Adapt with Tokens
- Apply visual tokens (colors, typography, spacing).
- Test Responsiveness
- Validate pattern works across desktop, tablet, mobile.
- Document Reuse
- Store pattern as Figma component → reuse, don’t duplicate.
4. Do’s & Don’ts
Do:
- Reuse patterns → improve familiarity + dev efficiency.
- Annotate deviations clearly when you must break patterns.
- Limit variation → e.g., don’t create 5 pricing card designs.
Don’t:
- Invent custom layouts for every client request.
- Mix patterns inconsistently (e.g., 2 different card styles in same flow).
- Forget edge states (empty/error/overflow).
5. Example – SaaS Pricing Page Using Patterns
- Hero + CTA → “Pick a plan that fits your team.”
- Card Grid → 3 pricing tiers (Starter, Growth, Enterprise).
- Banner CTA → “Need a custom plan? Contact us.”
- FAQ Section → Accordions (collapsible info pattern).
6. Usage Notes
- Maintain pattern inventory in shared Figma library.
- Apply Pattern Audit quarterly → remove duplicates, update rules.
- Align with Component Design System (EPIC 4.5) → patterns = component assemblies.