Anta design system
Colors
Background
These tokens define how surfaces are structured and layered across the interface. They help create visual hierarchy and guide the user’s attention.
bg-base is the main background color for the page. Use it for large surfaces and overall layouts.
bg-section is used for secondary areas, such as side navigation or grouped sections. It helps separate content without adding too much contrast.
bg-pane is used for blocks that need stronger emphasis, such as cards, panels, or highlighted content.
bg-block and bg-spot are darker background variations. Their use cases are still exploratory.
Illustration
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
These tokens define how borders 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-block and bg-spot.
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-base and bg-pane, providing a slightly stronger level of contrast.
border-5 is used on lighter surfaces. It works well between bg-base and bg-section, often appearing in spacing areas to subtly define boundaries.