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.

The base ramps have four steps. Status ramps add a darker fifth step for small text. The values below come from the live tokens.

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

Step 5 mixes each signal with fg-4. Event cards and timeline notes use it for readable values on light surfaces.

green-5

orange-5

blue-5

red-5

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.

Proportions

PieChart uses color to connect slices to their labels. Color identifies an item and does not indicate status. The chart uses existing blue, green, orange, and red tokens. A neutral striped fill identifies Others. Its component page shows the full palette and an expandable breakdown.

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.