Andromeda Pro · Foundation

The primitives

Every Andromeda Pro component is built from the values on this page, read through three layers of tokens. This page is the what. The AI Brain teaches when and how to use each value.

Three layers

1. 100

   200

   300

   400

   500
   100

   200

   300

   400

   500

   Layer 1

   Primitives

   The neutral ladder and four hue families. A theme retunes these; a component never reads them.

3. status.info.textbrand 500
   status.info.textbrand 300

   Layer 2

   Semantic

   Named roles such as status.danger.text. Every component reads this layer and only this one.

5. Live
   Live

   Layer 3

   Component wires

   A --component-role variable in the one file that owns it, pointing at exactly one role. The wiring never leaves that file.

The neutral ladder

Thirteen grays, numbered by depth: 100 is the page ground, 1300 the strongest ink. Surfaces, borders and text are all roles pointing into this one ladder.

Four hue families

Five stops each, 100 through 500, plus two alphas and a guaranteed-contrast on ink. The ramp itself is the same in both themes; what flips is which stop a role points at, shown further down. Color is never the only channel: a tone always rides with a glyph, a position or a label.

Semantic roles

Components never read a primitive. They say what they mean, in eight role groups:

How a family crosses the themes

When the theme flips, a role’s stop mirrors around the middle of its family: 100 and 500 swap, 200 and 400 swap, and 300 is the pivot. Fills stop at 200 rather than 100, because 100 barely stands off the light page. The one thing that overrules the mirror is WCAG. Where the mirrored value misses its contrast minimum on the light page ground it steps toward the deep end until it clears. That is why brand and success text reads 300 → 500 rather than 300 → 400: on the light ground their 400 stop measures 3.97 and 4.21, under the 4.5 that normal text requires, so they step again. Danger reaches 4.86 at 400 and stops there. Warning’s 400 measures 3.12, and its 500 clears 4.5 but reads as brown, so its words take an authored deep ochre, marked ink below, the most saturated amber that clears 4.5 (4.88). The mark row lands on 400 everywhere because a mark is a non-text object and needs 3.0, not 4.5. Both columns are resolved from the same functions the site paints with, so they cannot drift from what you see.

Every color, both themes

The whole set, dark on the left of each pair and light on the right. Enumerated from the live token set rather than listed by hand, so a color added to the system shows up here on its own. A pair marked same is deliberately theme invariant: a scrim darkens what is behind it whatever the theme, and a solid fill that carries pale text has to stay deep in both.

Accessibility

Contrast is checked by a script in both themes, not judged by eye, and it is the one thing here that overrules a design decision, including the family pivot above. The rest is written into the system’s rules, so every component follows it the same way.

Typeface

One free, open-source face from Google Fonts carries every label, value and heading in the system.

The type ramp

A step names three values, not one: a size, its leading, and its tracking. Taking a step means taking all three. Tracking is a function of size here, open at the small end where letterforms crowd and pulled in at the display end where large type sets loose. Weight is the second axis and stays a component’s choice.

Spacing

A 4px grid with one half-step. Control heights ride their own three-rung ladder (28 / 32 / 40) so fields, buttons and toggles in a row always agree.