Color in ECO is semantic. A token says what a color is for, not what it looks like, so text, surfaces, borders and status each have their own family and a component never needs a raw hex value.
Swatches on this page use var(--color-…) directly. When the token package is updated, this page updates with it.
Every semantic color token from alligo-design-tokens, live from the CDN this site already loads. Sourced from .claude/skills/eco-tokens/tokens.json.
Black, white and a ladder of greys carry most of the interface. Swedol is monochrome by design, which keeps the brand accent scarce and meaningful. Numbers follow the share of black: surface-100 is black, surface-02 is almost white.
Every page sits on background-primary. Full-width sections alternate between surface-raised-primary and surface-raised-secondary, if nothing else is stated, and a card takes the opposite surface of the section it sits in, so it always reads as raised. Never pick a grey by hand.
The Swedol lime. Use it for emphasis and brand moments, not for decoration and not for text on white: its contrast is too low. Light accent works as a highlight surface, for example in table headings.
Tools has its own accent. These are primitive tokens from the package (--color-primitive-color-brand-tools-accent-*), so they are not in tokens.json; the Swedol accent-* tokens above are what the components use.
Choose the text token by role: primary for content, secondary and tertiary for support, action for links and buttons. The badge on each swatch is the WCAG contrast on the intended surface: white, or black for inverted and on-black tokens.
Borders separate and outline. Default structure uses primary to tertiary; interactive states (hover, focus, selected) have their own tokens so the change is always the same across components.
Information, success, warning and danger each come as a matched set. default is the strong version, weak and weaker tone it down for backgrounds. Use them for status only, never for branding.
Fills for buttons, navigation and disabled controls.
Transparent black and white for hover fills, scrims and layers. The checkerboard shows the transparency.
var(--color-…). Look the name up in tokens.json.