Shadows & Elevation¶

MetrePay uses soft, subtle shadows that convey elevation without being heavy or aggressive. Shadows are used to separate layers, indicate interactivity, and create depth in card-based layouts.

Shadow Tokens¶

--mp-shadow-card

0px 0px 6px 3px rgba(127, 146, 189, 0.1)

--mp-shadow-form

0px 10px 16px rgba(0, 14, 45, 0.1)

--mp-shadow-hover

0 8px 16px -4px rgba(10, 10, 10, 0.1)

--mp-shadow-btn

0px 3px 2px 0px rgba(221, 221, 221, 1)

Token Reference¶

Token	Value	Usage
`--mp-shadow-card`	`0px 0px 6px 3px rgba(127, 146, 189, 0.1)`	Default card, checkout form, login form
`--mp-shadow-form`	`0px 10px 16px rgba(0, 14, 45, 0.1)`	Main form containers, split checkout
`--mp-shadow-hover`	`0 8px 16px -4px rgba(10, 10, 10, 0.1)`	Card hover state, interactive elements
`--mp-shadow-btn`	`0px 3px 2px 0px rgba(221, 221, 221, 1)`	Mobile dashboard buttons

Elevation System¶

MetrePay uses a 4-level elevation system:

Level	Token	Usage
0 — Flat	No shadow	Default cards (`#FAFAFA` background), table rows
1 — Raised	`--mp-shadow-card`	White cards, form containers, modals
2 — Floating	`--mp-shadow-form`	Main checkout forms, split checkout, overlays
3 — Interactive	`--mp-shadow-hover`	Hover state on cards and interactive elements

Elevation in Practice¶

Page background (#F1F1F1)
  └── Flat card (#FAFAFA, no shadow)
        └── On hover → White card + --mp-shadow-hover
  └── Form container (white + --mp-shadow-card)
        └── Split checkout (white + --mp-shadow-form)
  └── Modal overlay (white + --mp-shadow-form)

Usage Examples¶

Default Card (Flat → Hover)¶

.product-card {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.3s ease;
}

.product-card:hover {
  background: #FFFFFF;
  box-shadow: var(--mp-shadow-hover);
  transform: translateY(-2px);
}

Form Container¶

.checkout-card {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: var(--mp-shadow-card);
}

.split-checkout {
  border-radius: 16px;
  box-shadow: var(--mp-shadow-form);
}

Rules¶

Shadow rules

Use --mp-shadow-card for static white cards and form containers
Use --mp-shadow-hover only on hover/active states — never as a default
Use --mp-shadow-form for the most prominent UI element on the page
Never use hard, opaque shadows (e.g., box-shadow: 2px 2px 0 black)
Never use colored shadows (e.g., box-shadow: 0 4px 12px rgba(110, 150, 255, 0.5))
Combine transform: translateY(-2px) with --mp-shadow-hover for card lift effect
Flat cards (#FAFAFA) should have no shadow — the background color provides the separation