Border Radius

MetrePay uses a rounded, friendly aesthetic — never sharp corners, never overly circular. The radius scale ranges from subtle (4px) to pill-shaped (9999px), with 8px as the primary default.

---

Radius Scale

4px
--mp-radius-sm

8px
--mp-radius-md

10px
--mp-radius-lg

16px
--mp-radius-xl

20px
--mp-radius-2xl

pill
--mp-radius-full

---

Token Reference

Token	Value	Usage
--mp-radius-sm	4px	Alerts, validation messages, small badges
--mp-radius-md	8px	Default — inputs, buttons, product cards, tags
--mp-radius-lg	10px	Checkout cards, form containers, login forms
--mp-radius-xl	16px	Split checkout container, large modals
--mp-radius-2xl	20px	Main form card (#formulario), chat bubbles
--mp-radius-full	9999px	Pill buttons, avatar circles, pill tags

---

Component Mapping

Component	Radius Token	Value
Input field	--mp-radius-md	8px
Button	--mp-radius-md	8px
Product card	--mp-radius-md	8px
Tag / Badge	--mp-radius-full	9999px
Alert	--mp-radius-sm	4px
Checkout card	--mp-radius-lg	10px
Form container	--mp-radius-lg	10px
Split checkout	--mp-radius-xl	16px
Main form card	--mp-radius-2xl	20px
Avatar / Logo circle	--mp-radius-full	9999px
Modal	--mp-radius-xl	16px

---

CSS Usage

/* Input */
.input {
  border-radius: var(--mp-radius-md);  /* 8px */
}

/* Button */
.button {
  border-radius: var(--mp-radius-md);  /* 8px */
}

/* Card */
.card {
  border-radius: var(--mp-radius-lg);  /* 10px */
}

/* Tag */
.tag {
  border-radius: var(--mp-radius-full);  /* pill */
}

/* Split checkout */
.split-checkout {
  border-radius: var(--mp-radius-xl);  /* 16px */
}

---

Rules

Border radius rules

• Use 8px (--mp-radius-md) as the default for most interactive elements
• Use 10px (--mp-radius-lg) for card containers and form wrappers
• Use 16px (--mp-radius-xl) for the most prominent containers (split checkout, modals)
• Use 9999px (--mp-radius-full) only for tags, pill buttons, and avatar circles
• Never use 0px — MetrePay always has rounded corners
• Never use values above 24px for rectangular elements — it looks cartoonish
• Avoid mixing radius values within the same component (e.g., don't use 8px on some corners and 16px on others)