Color

azucar is monochrome. The interface is black, white, and gray. Color appears only when it has a meaning. This page shows every color the system has. If a color is not on this page, it does not exist. azucar.css is the single source, and only Inacio edits it.

Each ramp has four steps. Step 1 is the lightest. Step 4 is the strongest. The values below come from the live tokens, not from this page.

Backgrounds

Surfaces step from white to gray. bg-1 is the page and the card face. Use bg-2 for code blocks and quiet fills. Use bg-3 and bg-4 for hover fills and separators.

bg-1

bg-2

bg-3

bg-4

The alpha ramp is black at low opacity. Use it on top of other surfaces. The surface below stays visible. The sidebar pill uses bg-a2.

bg-a1

bg-a2

bg-a3

bg-a4

Foregrounds

Text and icons use four grays. fg-4 is the main text color. Step down the ramp when text must recede: fg-3 for supporting copy, fg-2 for secondary labels, fg-1 for hints.

fg-1

fg-2

fg-3

fg-4

The alpha ramp does the same work on top of tinted surfaces.

fg-a1

fg-a2

fg-a3

fg-a4

foreground and muted-foreground are the interactive pair. Ghost buttons rest at muted-foreground and change to foreground on hover.

foreground

muted-foreground

Status ramps

Four ramps carry status. Green is good. Orange is a warning. Red is a problem. Blue is neutral information. Pair step 1 as the surface with step 4 as the signal. The delta chips in NumberedStat show the pattern.

green-1

green-2

green-3

green-4

orange-1

orange-2

orange-3

orange-4

blue-1

blue-2

blue-3

blue-4

red-1

red-2

red-3

red-4

Examples

Accuracy tiers

The reconciliation overview card reports verified accuracy with RadialStat. The ring reads its tier from two thresholds: below 60 is a problem, below 90 is a warning, 90 and up is good. Each tier pairs a step-4 indicator with a step-2 track from the same ramp. The number stays fg-4. Only the ring carries the signal.

Edit a value across a threshold and watch the ring change. The color is the state.

<div className="flex items-center gap-16">
<RadialStat value={42} postfix="%" thresholds={[60, 90]} />
<RadialStat value={74} postfix="%" thresholds={[60, 90]} />
<RadialStat value={97} postfix="%" thresholds={[60, 90]} />
</div>

Color is correct here because it means something. An operator reads the tier before the number: green needs no attention, red needs it now. Every use of color must pass that test: it helps someone understand faster than the words alone. Color that passes is information. Color that does not pass is decoration, and decoration is not in the system.

Aqua

Aqua is not a palette entry. It is one gradient surface for the one primary action in a view. The modifiers remap it when the action itself has a meaning: a destructive action turns red, a confirmed one green. aqua-white needs a dark label. White text does not read on it.

aqua

aqua-green

aqua-red

aqua-orange

aqua-gray

aqua-black

aqua-white

One color moment per screen is the budget. When a screen gets a second one, remove one.