Anta design system

Colors

NeutralBrandInfoSuccessCriticalWarning

Background

These tokens define how surfaces are structured and layered across the interface. They help create visual hierarchy and guide the user’s attention.

Light theme
bg-base-critical#fefbfb
bg-section#ffffff
bg-pane-critical#fdf2f2
bg-block-critical#fcebeb
bg-spot-critical#fae5e5
Dark theme
bg-base-critical#1f0506
bg-section#171519
bg-pane-critical#33090a
bg-block-critical#400d0e
bg-spot-critical#471011

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.

Light theme
Aa
text-1-critical#8f1014
Aa
text-2-critical#a01c1c
Aa
text-3-critical#a01c1ccc
Aa
text-4-critical#a01c1c99
Aa
text-5-critical#a01c1c66
Dark theme
Aa
text-1-critical#ffabac
Aa
text-2-critical#e78e90
Aa
text-3-critical#e78e90cc
Aa
text-4-critical#e78e9099
Aa
text-5-critical#e78e9066

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.

Light theme
border-1-critical#e56c6c
border-2-critical#efa4a4
border-3-critical#f4c2c2
border-4-critical#f7d4d4
border-5-critical#fae5e5
Dark theme
border-1-critical#de4545
border-2-critical#b02120
border-3-critical#a01c1c
border-4-critical#5d1819
border-5-critical#531314

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.