Foundations¶
The foundations define the core visual language of MetrePay — the building blocks that every component and pattern is built upon.
Sections¶
| Section | Description |
|---|---|
| Colors | Brand colors, gradients, neutrals, and semantic colors |
| Typography | Cabin type scale, font weights, and usage rules |
| Spacing | 8px-based spacing scale |
| Shadows & Elevation | Shadow tokens and elevation system |
| Border Radius | Radius scale from subtle to pill |
| Layout & Grid | Containers, grid system, and breakpoints |
| Motion | Transition tokens and animation philosophy |
Philosophy¶
MetrePay foundations are extracted from real production code and refined with inspiration from Stripe and Clerk. They are:
- Pragmatic — based on what's actually used in production
- Consistent — the same values used everywhere
- Documented — every token has a name, value, and usage context
- Framework-agnostic — expressed as CSS variables, adaptable to any framework