Every semantic color token from alligo-design-tokens, live from the CDN this site already loads. Each swatch is rendered with background: var(--color-name) directly -- if Supernova publishes a new value, this page updates itself, no rebuild needed. Sourced from .claude/skills/eco-tokens/tokens.json.
The primary color of the concept brand.
the color of the hamburger menu of each concept brand.
Used in combination with primary or standalone as for example raised surface color in table headings or highlited parts of the UI.
Used as text link color for the Brand accent color button.
Primary link color. Used as default text link color.
Used as hover link color for action primary when needed.
Primary link color on dark backgrounds. Used together with inverted text.
Used as hover link color for primary inverted link.
Secondary link color. Used together with text secondary.
Used as hover link color for action secondary.
Tertiary link color. Used together with text tertiary.
Used as hover link color for action secondary.
Default text color for error messages.
Used when text is illustrated as disabled.
Default text color for reenforced messages.
Price-customer is the color of price visible for logged in users.
Price-guest is used for highligting campaign related information such as campaignprices and campaignbadges for customers that´s not logged in.
Price-guest is used for highligting campaign related information such as campaigns with red text on black.
Highest Emphasis for dark text on light background. Primary text color. Used as the main text color throughout the UI on our sites. Provides good and legible...
Used when text sits on dark backgrounds, surfaces and images.
High Emphasis for dark text on light background. The secondary text color and is used for text that has to be presented in the interface but not need to be t...
Use when contrast is needed on dark backgrounds for text that don't need to be the primary focus.
Default text color for success messages.
Medium Emphasis and hint text for dark text on white background. Is used for text that has to be presented in the interface but not need to be the primary fo...
Use when contrast is needed on dark backgrounds for text with lesser focus.
Default application background color for Alligo E-com. Should be set to either html or body element.
Application background color for Alligo E-com. Default background color when on My Pages. Should be set to either html or body element.
Raised surface color for Alligo E-com. Use this when you need to use a solid background on a default surface as a separator instead of for example borders. U...
Raised surface color for Alligo E-com. Used for the neutral weak Basic badge state/color and the Product badge.
Used for Footer surface Used for Header color, Badge surface color, Link Tile Black, Tooltip.
Raised surface color for Alligo E-com. Use this when you need to use a lighter solid surface. Used for the neutral weak Basic badge state/color. Used for Ste...
Used for vertical scrollbar handle.
Raised surface color for Alligo E-com. Used for Stepper steps.
Default neutral color. Raised surface color for Alligo E-com. Use this when you need to use a lighter solid surface with strong emphasis. Used for the neutra...
Raised surface color for Alligo E-com. Used for Stepper steps.
Used for Footer trustmarks.
Used for Footer trustmarks.
Default action color. Used for the Primary button.
Secondary action color. Used for the Primary Inverted button. Used for the Tag component.
Default Danger status coloer: Red is mainly used for messages and in error states. Also to draw attention to important information that needs to be attended ...
Weak danger status color: Used to communicate problems that have to be resolved so that user can continue forward. Used mainly as background for short concis...
Danger - Light: Used to communicate problems that have to be resolved so that user can continue forward. Is mainly used for messages and in error states. Thi...
Default disabled surface color for Allego E-com. Used for horizontal scroll trackbar.
Default Info status color. Blue is used to reenforce a message when it needs to be sharp and clear and at the same time, making it bold and optimistic. Can b...
Weak info status color: Used mainly as background for short concise messages to emphasise medium level. For example to communicate medium emphasis in context...
Weaker info status color: used mostly as background for text and messages. Can be used to implicate authentication connectivity and/or progress or to convey ...
Default hover color for drawer navigation or component action (drawer-link).
Hover surface for Blank & Secondary button
Used for the Tag component.
Hover surface for Primary Inverted, System Enabled & System.
Used for Overlay on Cards.
Used for Overlay on Cards.
Surface 0 opacity color. Used for the buttons: Secondary, Secondary Inverted, Blank, Blank Inverted & System.
Hover surface for Primary button, System Enabled & System.
Default application surface color for Alligo E-com. Use this for e.g. card backgrounds.
Default raised surface color for Alligo E-com. Use this when you need to separate a specific layer from the surface color.
Default Success status color: Green indicates success. May be used together with form validation and positive feedback. For example, you might show a success...
Weak success status color: Indicates success, used mainly as background for short concise messages to emphasise medium level. For example to communicate medi...
Weaker success status color: Indicates success, used mostly as background for text and messages. For example together with form validation and positive feedb...
Default Warning status color: Used in order to display information that needs user's attention and may require further steps.
Weak warning status color: Indicates warning, used mainly as background for short concise messages to emphasise medium level. For example to communicate medi...
Weaker warning status color: Indicates a warning of some sort, used mostly as background for text and messages. For example to display information that needs...
Primary border action color.
Secondary border action color.
Border action color for system buttons.
Danger border color. Used for the strong danger notification 2px border style.
Danger border color. Used for the weak danger notification border style. Used for the danger badge border style.
Border color when borders are dark or placed on surface black but with no need for prominent presence. Used as borders and dividers in the collapsible compon...
Default border disabled color for the UI. Used where applicable. Used on form elements.
Dedicated for the focus state only.
Default border hover color for ADS. (Form items, Drawer size picker, Quantity picker, Boxed drawer link, Tile Link Brand White, System buttons.)
Info border color. Used for the strong info notification 2px border style.
Info border color. Used for the strong info notification border style. Used for the info badge border style.
Default border color for for input controls. Checkbox & radiobutton, toggles, input steppers, sliders, etc.
Default border color for for input components (text fields, select, date picker, search, auto-suggest, text area etc)
Default border color for Allego E-com.
Border color when the border must be less prominent but still needs a presence in the UI.
Border color for Items in the UI that uses a selected state. Used for selected Form items, Drawer size picker, Quantity picker, Boxed drawer link.
Border color for selected items in the UI that uses a selected state. Used for selected form control items.
Border color for the selected product card state and corresponding variant table on the PLP. Used on Stepper steps.
Success border color. Used for the strong success notification 2px border style.
Success border color. Used for the weak success notification border style. Used for the success badge border style.
Border color when elements needs to be separated by shorter/smaller borders. For example sizes and values placed horizontally.
Warning border color. Used for the strong warning notification 2px border style.
Warning border color. Used for the weak warning notification border style. Used for the warning badge border style.
Used as primary Icon color on dark surfaces.
Used as primary Icon color.