Spacing

MetrePay uses an 8px-based spacing scale. All spacing values are multiples of 4px, with the primary unit being 8px. This creates visual rhythm and consistency across all products.

---

Spacing Scale

--mp-space-1

4px Micro gaps, icon padding

--mp-space-2

8px Tight spacing, inline gaps

--mp-space-3

12px Small gaps, tag padding

--mp-space-4

16px Default gap, field spacing

--mp-space-5

20px Form field margin, mobile padding

--mp-space-6

24px Card padding, section gap (mobile)

--mp-space-8

32px Section padding, card padding (desktop)

--mp-space-10

40px Large section gaps

--mp-space-12

48px Section padding (desktop)

--mp-space-16

64px Hero padding, page-level spacing

---

Token Reference

Token	Value	Primary Usage
--mp-space-1	4px	Icon margins, micro gaps
--mp-space-2	8px	Inline element gaps, tight lists
--mp-space-3	12px	Tag padding, small component gaps
--mp-space-4	16px	Default field gap, grid gap (mobile)
--mp-space-5	20px	Form field margin-bottom, mobile container padding
--mp-space-6	24px	Card padding, section gap, grid gap (tablet)
--mp-space-8	32px	Section padding, card padding (desktop), grid gap (desktop)
--mp-space-10	40px	Large section gaps, split checkout padding
--mp-space-12	48px	Desktop section padding (--catalog-gap-xlarge)
--mp-space-16	64px	Hero sections, page-level vertical rhythm

---

Contextual Usage

Container Padding (Responsive)

The catalog layout system defines responsive container padding:

/* Mobile */
padding-left: 20px;   /* --mp-space-5 */
padding-right: 20px;

/* Tablet (768px+) */
padding-left: 24px;   /* --mp-space-6 */
padding-right: 24px;

/* Desktop (1024px+) */
padding-left: 32px;   /* --mp-space-8 */
padding-right: 32px;

Card Padding

/* Mobile */
.card { padding: 24px; }   /* --mp-space-6 */

/* Desktop */
.card { padding: 32px; }   /* --mp-space-8 */

Form Field Spacing

.field {
  margin-bottom: 20px;   /* --mp-space-5 */
}

.label {
  margin-bottom: 6px;    /* between --mp-space-1 and --mp-space-2 */
}

Section Spacing

/* Mobile */
.section {
  padding-top: 32px;     /* --mp-space-8 */
  padding-bottom: 32px;
}

/* Desktop */
.section {
  padding-top: 48px;     /* --mp-space-12 */
  padding-bottom: 48px;
}

Grid Gaps

/* Mobile: 1 column */
.grid { gap: 16px; }   /* --mp-space-4 */

/* Tablet: 2 columns */
.grid { gap: 24px; }   /* --mp-space-6 */

/* Desktop: 3-4 columns */
.grid { gap: 32px; }   /* --mp-space-8 */

---

Bulma Spacing Utilities

Bulma uses a p-* / m-* utility system. The MetrePay mapping:

MetrePay Token	Value	Bulma Class
--mp-space-1	4px	p-1 / m-1
--mp-space-2	8px	p-2 / m-2
--mp-space-3	12px	p-3 / m-3
--mp-space-4	16px	p-4 / m-4
--mp-space-5	20px	p-5 / m-5
--mp-space-6	24px	p-6 / m-6

---

Tailwind Spacing

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '1':  '4px',
        '2':  '8px',
        '3':  '12px',
        '4':  '16px',
        '5':  '20px',
        '6':  '24px',
        '8':  '32px',
        '10': '40px',
        '12': '48px',
        '16': '64px',
      },
    },
  },
}

---

Rules

Spacing rules

• Always use tokens — never hardcode arbitrary pixel values
• Prefer 24px for card padding on mobile, 32px on desktop
• Prefer 16px as the default gap between form fields
• Use 48px for section-level vertical spacing on desktop
• Avoid spacing values not in the scale (e.g., 15px, 22px, 35px)