On this page

Colors

Anta doesn’t offer a global color palette — there are no raw scales like blue-500 or gray-900 to pick from. Color ships only as a small set of role tokens, grouped by where they apply — background, text, and border — each with a neutral set plus five tones (brand, info, success, critical, warning) that already pair light and dark. You compose from these roles instead of arbitrary swatches; anything app-specific lives in component tokens or your own semantic aliases.

Neutral Brand Info Success Critical Warning

Background

These tokens help create visual hierarchy and guide the user’s attention.

Light theme

bg-1

bg-2

bg-3

bg-4

bg-5

Dark theme

bg-1

bg-2

bg-3

bg-4

bg-5

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.

Light theme

text-1

text-2

text-3

text-4

text-5

Dark theme

text-1

text-2

text-3

text-4

text-5

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.

Light theme

border-1

border-2

border-3

border-4

border-5

Dark theme

border-1

border-2

border-3

border-4

border-5

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.

Custom semantic tokens

Because the numeric tokens are role-free, the convenient pattern is to alias them to semantic tokens that describe how your app uses each surface. Define the names once, then reference those instead of the raw numbers. For example:

:root {
  --bg-canvas: var(--bg-1);
  --bg-base:   var(--bg-2);
  --bg-pane:   var(--bg-3);
  --bg-block:  var(--bg-4);
  --bg-spot:   var(--bg-5);

  /* tinted variants work the same way */
  --bg-spot-info: var(--bg-5-info);
}

This keeps your components readable (var(--bg-pane) says more than var(--bg-3)) and lets you re-map a role to a different step later in one place.

A semantic token doesn’t have to point at the same numeric step in both themes. A card sitting on bg-2 can use the recessed bg-1 in light, but in dark it often reads better a little lighter than the page — so the same --bg-card maps to bg-4 instead. The border follows suit: border-5 in light, border-4 in dark.

--bg-2

Card title

A surface that sits on the page background, with a hairline edge.

--bg-1

--bg-2

Card title

A surface that sits on the page background, with a hairline edge.

--bg-4

:root {
  background: var(--bg-2);          /* Anta's token */

  --bg-card:     var(--bg-1);       /* Custom token */
  --border-card: var(--border-5);   /* Custom token */
}
.dark {
  --bg-card:     var(--bg-4);
  --border-card: var(--border-4);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
}