Patterns¶
Patterns are page-level compositions that combine multiple components into complete, reusable UI flows. They represent the most common MetrePay user journeys.
Pattern Library¶
| Pattern | Description |
|---|---|
| Payment Form | Single payment — centered form with blue hero |
| Recurrent Payment | Subscription/debit — centered form with purple hero |
| Split Checkout | Two-panel layout with summary + form |
| Catalog Layout | Product grid with hero header |
| Dashboard Layout | Portal with sidebar + stats + content |
| Onboarding Flow | Step-by-step merchant setup |
Pattern Philosophy¶
Patterns are not rigid templates — they are proven compositions that can be adapted. The key is maintaining the visual language (colors, spacing, typography) while adapting the content.
Every pattern follows these rules: - Centered layouts for payment flows - Gradient/solid hero at the top - White card container for forms - Consistent field spacing (20px between fields) - Full-width submit button - Clear step indicators for multi-step flows