MetrePay Design System¶

Design System v0.1

Official visual reference and frontend consistency guide

The MetrePay Design System is the single source of truth for visual identity, UI patterns, and frontend conventions across all MetrePay products.

What's inside¶

🎨 Foundations
Colors, typography, spacing, shadows, layout, and motion tokens.

🧩 Components
Buttons, forms, cards, hero sections, tags, alerts, and more.

📐 Patterns
Payment forms, checkout flows, catalog layouts, dashboards.

🔧 Tokens
CSS variables, Tailwind config, and Bulma overrides.

🤖 AI Guidelines
Rules and prompts for AI-assisted MetrePay UI generation.

💡 Examples
Full HTML/CSS examples ready to copy and adapt.

MetrePay's visual identity is built on three pillars:

Two primary brand colors define the payment context:

Blue #6E96FF — Single Payments Purple #5C0390 — Recurrent Payments

Cabin is the primary font across all MetrePay products — clean, readable, and fintech-appropriate.

The signature MetrePay gradient: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%)

Simplicity over complexity

Prefer clean whitespace and clear hierarchy over visual density. Every element should earn its place.

Trust through consistency

Payment interfaces must feel trustworthy. Consistent spacing, typography, and color usage builds confidence.

Framework-agnostic

The design system defines the visual language. Bulma and Tailwind are implementation details.

AI-ready

Every pattern is documented with enough specificity that AI tools can generate consistent MetrePay UI.

Framework	Products
Bulma CSS	Catalog, payment forms, checkout
Tailwind CSS	Next.js projects, new implementations
Vanilla CSS	Portal admin, legacy systems
PHP Symfony	Backend-rendered pages

Start with Foundations → Colors to understand the color system, then move to Foundations → Typography for font usage rules.

For AI-assisted development, go directly to AI Guidelines.

For copy-paste examples, see the Examples section.