Border

Border variables control visual boundaries between components like buttons, cards, input fields, and other UI elements. These are divided into:

• Border Color — Defines the visible stroke color.
• Radius — Defines the border corner roundness (border-radius).

These values can be applied using variables or utility classes.
They may vary between projects depending on style preferences.

---

Border Color

Border color variables follow a naming pattern based on surface context or visual intent.

• Border Primary
• Border Secondary
• Border Inverse Primary
• Border Inverse Secondary
• Border Accent

These reference foundational colors like Neutral or Accent and may include opacity (e.g. Neutral Inverse A50). The exact mapping is managed in the Variables panel.

Border color variables are applied to style border or box shadow style of elements. For example dividers and input fields are using border styles. Buttons and cards components are using box shadow style.

---

Border Radius

Radius variables define how rounded the corners of elements should be. These values are used consistently across cards, buttons, input fields, etc.

Radius names use t-shirt sizing:

• SM Radius
• MD Radius
• LG Radius
• XL Radius
• Round

---