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 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 the whole reason the text row below reads 300 → 500 rather than 300 → 400: on the light ground the 400 stop measures 3.97 for brand, 4.21 for success and 3.12 for warning, all under the 4.5 that normal text requires, so they step again. Danger reaches 4.86 at 400 and stops there. The row under it 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

Every color pair in this system meets WCAG 2.2 level AA, in both themes. The ratios are measured by a contrast script, not judged by eye, and contrast is the one thing here that overrules a design decision, including the family pivot above.

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.

The one named style

Everything in the system is a step plus a weight. There is exactly one exception, because it carries something the ramp deliberately does not: case. Uppercase is a decision a component makes, not a property of a size, so it lives here and nowhere else. It carries no color either, so ink stays a separate decision.

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.