Colors
Background
These tokens help create visual hierarchy and guide the user’s attention.
The naming is intentionally unopinionated — it carries no role, just order and change of lightness suitable for backgrounds. If you want meaningful names in your own app, create semantic tokens and link them to Anta’s backgrounds in the way you prefer.
Text
These tokens define how text is presented across the interface. They help establish hierarchy, readability, and consistent contrast.
text-1 — Primary text, for headings and key content.
text-2 — Secondary text, for descriptions and supporting content.
text-3 — Subdued text, for labels, statuses and secondary data.
text-4 — Minor text, for timestamps, counters and metadata.
text-5 — Placeholder text, for hints and non-critical information.
Border
Border tokens are used to separate, group, and structure elements across the interface.
Border colors are used depending on how much separation is needed and the background they appear on.
border-1 and border-2 are used when a container needs to be clearly defined or when separating elements on stronger backgrounds such as bg-4 and bg-5.
border-3 sits in the middle. It provides a moderate level of contrast, useful when a boundary should be visible but not dominant.
border-4 is used to separate bg-2 and bg-3, providing a slightly stronger level of contrast.
border-5 is used on lighter surfaces. It works well between bg-2 and bg-1, often appearing in spacing areas to subtly define boundaries.