---
title: "Colors"
description: "Every color primitive and color-system role with its CSS variable, utility class and value per theme."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/reference/tokens/colors
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

## Color primitives

The raw palette. Each shade is a CSS variable and a Tailwind color, so it works with every color utility: `bg-theme-600`, `text-base-1000`, `border-theme-200`. Prefer the color-system roles below in components; they follow the theme.

### base

| Shade  | Value     | CSS variable        | Tailwind color |
| ------ | --------- | ------------------- | -------------- |
| `0`    | `#ffffff` | `--color-base-0`    | `base-0`       |
| `50`   | `#fafafa` | `--color-base-50`   | `base-50`      |
| `100`  | `#f5f5f5` | `--color-base-100`  | `base-100`     |
| `200`  | `#e5e5e5` | `--color-base-200`  | `base-200`     |
| `300`  | `#d4d4d4` | `--color-base-300`  | `base-300`     |
| `400`  | `#a3a3a3` | `--color-base-400`  | `base-400`     |
| `500`  | `#737373` | `--color-base-500`  | `base-500`     |
| `600`  | `#525252` | `--color-base-600`  | `base-600`     |
| `700`  | `#404040` | `--color-base-700`  | `base-700`     |
| `800`  | `#262626` | `--color-base-800`  | `base-800`     |
| `900`  | `#171717` | `--color-base-900`  | `base-900`     |
| `950`  | `#0a0a0a` | `--color-base-950`  | `base-950`     |
| `1000` | `#000000` | `--color-base-1000` | `base-1000`    |

### theme

| Shade | Value     | CSS variable        | Tailwind color |
| ----- | --------- | ------------------- | -------------- |
| `50`  | `#eff6ff` | `--color-theme-50`  | `theme-50`     |
| `100` | `#dbeafe` | `--color-theme-100` | `theme-100`    |
| `200` | `#bfdbfe` | `--color-theme-200` | `theme-200`    |
| `300` | `#93c5fd` | `--color-theme-300` | `theme-300`    |
| `400` | `#60a5fa` | `--color-theme-400` | `theme-400`    |
| `500` | `#3b82f6` | `--color-theme-500` | `theme-500`    |
| `600` | `#2563eb` | `--color-theme-600` | `theme-600`    |
| `700` | `#1d4ed8` | `--color-theme-700` | `theme-700`    |
| `800` | `#1e40af` | `--color-theme-800` | `theme-800`    |
| `900` | `#1e3a8a` | `--color-theme-900` | `theme-900`    |
| `950` | `#172554` | `--color-theme-950` | `theme-950`    |

## Color system

Semantic roles, one value per theme (`default`, `dark`). The first theme is the default; the others apply under `[data-theme="<name>"]`. Use a role through its CSS variable, for example `bg-(--color-foundations-surface-bg)` or `text-(--color-foundations-text)`. The `typography` and `layout.bg` roles also have their own classes.

### foundations

| Token                              | CSS variable                                           | Default     | Dark        |
| ---------------------------------- | ------------------------------------------------------ | ----------- | ----------- |
| `bg`                               | `--color-foundations-bg`                               | `#ffffff`   | `#0a0a0a`   |
| `text`                             | `--color-foundations-text`                             | `#000000`   | `#ffffff`   |
| `text-muted`                       | `--color-foundations-text-muted`                       | `#00000040` | `#ffffff40` |
| `decorative`                       | `--color-foundations-decorative`                       | `#2563eb`   | `#2563eb`   |
| `decorative-hover`                 | `--color-foundations-decorative-hover`                 | `#000000`   | `#ffffff`   |
| `primary-bg`                       | `--color-foundations-primary-bg`                       | `#2563eb`   | `#2563eb`   |
| `primary-text`                     | `--color-foundations-primary-text`                     | `#ffffff`   | `#ffffff`   |
| `primary-bg-hover`                 | `--color-foundations-primary-bg-hover`                 | `#0a0a0a`   | `#fafafa`   |
| `primary-text-hover`               | `--color-foundations-primary-text-hover`               | `#ffffff`   | `#000000`   |
| `surface-bg`                       | `--color-foundations-surface-bg`                       | `#fafafa`   | `#171717`   |
| `surface-bg-hover`                 | `--color-foundations-surface-bg-hover`                 | `#f5f5f5`   | `#171717`   |
| `surface-border`                   | `--color-foundations-surface-border`                   | `#e5e5e5`   | `#262626`   |
| `surface-border-hover`             | `--color-foundations-surface-border-hover`             | `#e5e5e5`   | `#262626`   |
| `surface-border-highlighted`       | `--color-foundations-surface-border-highlighted`       | `#2563eb`   | `#2563eb`   |
| `surface-border-highlighted-hover` | `--color-foundations-surface-border-highlighted-hover` | `#2563eb`   | `#2563eb`   |
| `surface-shadow-highlighted`       | `--color-foundations-surface-shadow-highlighted`       | `#2563eb40` | `#2563eb40` |
| `surface-shadow-highlighted-hover` | `--color-foundations-surface-shadow-highlighted-hover` | `#2563eb40` | `#2563eb40` |
| `surface-text`                     | `--color-foundations-surface-text`                     | `#000000`   | `#ffffff`   |
| `surface-text-hover`               | `--color-foundations-surface-text-hover`               | `#0a0a0a`   | `#fafafa`   |
| `overlay-bg`                       | `--color-foundations-overlay-bg`                       | `#00000080` | `#00000080` |
| `overlay-text`                     | `--color-foundations-overlay-text`                     | `#ffffff`   | `#ffffff`   |
| `line`                             | `--color-foundations-line`                             | `#1e40af`   | `#60a5fa`   |
| `line-muted`                       | `--color-foundations-line-muted`                       | `#1e40af40` | `#60a5fa40` |
| `destructive`                      | `--color-foundations-destructive`                      | `#dc2626`   | `#dc2626`   |

### typography

| Token     | CSS variable                 | Class           | Default   | Dark      |
| --------- | ---------------------------- | --------------- | --------- | --------- |
| `label`   | `--color-typography-label`   | `color-label`   | `#000000` | `#ffffff` |
| `heading` | `--color-typography-heading` | `color-heading` | `#000000` | `#ffffff` |
| `body`    | `--color-typography-body`    | `color-body`    | `#000000` | `#ffffff` |

### link

| Token              | CSS variable                     | Default   | Dark      |
| ------------------ | -------------------------------- | --------- | --------- |
| `textDefault`      | `--color-link-text-default`      | `#2563eb` | `#2563eb` |
| `underlineDefault` | `--color-link-underline-default` | `#2563eb` | `#2563eb` |
| `textHover`        | `--color-link-text-hover`        | `#000000` | `#ffffff` |
| `underlineHover`   | `--color-link-underline-hover`   | `#000000` | `#ffffff` |

### layout

| Token            | CSS variable                    | Class                   | Default   | Dark      |
| ---------------- | ------------------------------- | ----------------------- | --------- | --------- |
| `bg.main`        | `--color-layout-bg-main`        | `bg-layout-main`        | `#ffffff` | `#0a0a0a` |
| `bg.alternative` | `--color-layout-bg-alternative` | `bg-layout-alternative` | `#fafafa` | `#171717` |

### header

| Token                                     | CSS variable                                              | Default     | Dark        |
| ----------------------------------------- | --------------------------------------------------------- | ----------- | ----------- |
| `background`                              | `--color-header-background`                               | `#ffffff`   | `#0a0a0a`   |
| `shadow`                                  | `--color-header-shadow`                                   | `#0000001a` | `#00000040` |
| `logo.fill`                               | `--color-header-logo-fill`                                | `#000000`   | `#ffffff`   |
| `navigation.item.normal.text`             | `--color-header-navigation-item-normal-text`              | `#000000`   | `#ffffff`   |
| `navigation.item.normal.icon`             | `--color-header-navigation-item-normal-icon`              | `#000000`   | `#ffffff`   |
| `navigation.item.normal.background`       | `--color-header-navigation-item-normal-background`        | `#00000000` | `#00000000` |
| `navigation.item.normal.border`           | `--color-header-navigation-item-normal-border`            | `#00000000` | `#00000000` |
| `navigation.item.normal.shadow`           | `--color-header-navigation-item-normal-shadow`            | `#00000000` | `#00000000` |
| `navigation.item.hover.text`              | `--color-header-navigation-item-hover-text`               | `#0a0a0a`   | `#fafafa`   |
| `navigation.item.hover.icon`              | `--color-header-navigation-item-hover-icon`               | `#0a0a0a`   | `#fafafa`   |
| `navigation.item.hover.background`        | `--color-header-navigation-item-hover-background`         | `#f5f5f5`   | `#171717`   |
| `navigation.item.hover.border`            | `--color-header-navigation-item-hover-border`             | `#00000000` | `#00000000` |
| `navigation.item.hover.shadow`            | `--color-header-navigation-item-hover-shadow`             | `#00000000` | `#00000000` |
| `navigation.item.active.text`             | `--color-header-navigation-item-active-text`              | `#0a0a0a`   | `#fafafa`   |
| `navigation.item.active.icon`             | `--color-header-navigation-item-active-icon`              | `#0a0a0a`   | `#fafafa`   |
| `navigation.item.active.background`       | `--color-header-navigation-item-active-background`        | `#f5f5f5`   | `#171717`   |
| `navigation.item.active.border`           | `--color-header-navigation-item-active-border`            | `#00000000` | `#00000000` |
| `navigation.item.active.shadow`           | `--color-header-navigation-item-active-shadow`            | `#00000000` | `#00000000` |
| `navigation.menuToggle.normal.text`       | `--color-header-navigation-menu-toggle-normal-text`       | `#000000`   | `#ffffff`   |
| `navigation.menuToggle.normal.icon`       | `--color-header-navigation-menu-toggle-normal-icon`       | `#000000`   | `#ffffff`   |
| `navigation.menuToggle.normal.background` | `--color-header-navigation-menu-toggle-normal-background` | `#00000000` | `#00000000` |
| `navigation.menuToggle.normal.border`     | `--color-header-navigation-menu-toggle-normal-border`     | `#00000000` | `#00000000` |
| `navigation.menuToggle.normal.shadow`     | `--color-header-navigation-menu-toggle-normal-shadow`     | `#00000000` | `#00000000` |
| `navigation.menuToggle.hover.text`        | `--color-header-navigation-menu-toggle-hover-text`        | `#0a0a0a`   | `#fafafa`   |
| `navigation.menuToggle.hover.icon`        | `--color-header-navigation-menu-toggle-hover-icon`        | `#0a0a0a`   | `#fafafa`   |
| `navigation.menuToggle.hover.background`  | `--color-header-navigation-menu-toggle-hover-background`  | `#f5f5f5`   | `#171717`   |
| `navigation.menuToggle.hover.border`      | `--color-header-navigation-menu-toggle-hover-border`      | `#00000000` | `#00000000` |
| `navigation.menuToggle.hover.shadow`      | `--color-header-navigation-menu-toggle-hover-shadow`      | `#00000000` | `#00000000` |
| `navigation.menuToggle.active.text`       | `--color-header-navigation-menu-toggle-active-text`       | `#0a0a0a`   | `#fafafa`   |
| `navigation.menuToggle.active.icon`       | `--color-header-navigation-menu-toggle-active-icon`       | `#0a0a0a`   | `#fafafa`   |
| `navigation.menuToggle.active.background` | `--color-header-navigation-menu-toggle-active-background` | `#00000000` | `#00000000` |
| `navigation.menuToggle.active.border`     | `--color-header-navigation-menu-toggle-active-border`     | `#00000000` | `#00000000` |
| `navigation.menuToggle.active.shadow`     | `--color-header-navigation-menu-toggle-active-shadow`     | `#00000000` | `#00000000` |
| `subNavigation.background`                | `--color-header-sub-navigation-background`                | `#ffffff`   | `#0a0a0a`   |
| `subNavigation.border`                    | `--color-header-sub-navigation-border`                    | `#00000000` | `#00000000` |
| `subNavigation.shadow`                    | `--color-header-sub-navigation-shadow`                    | `#00000026` | `#00000026` |
| `menu.background`                         | `--color-header-menu-background`                          | `#ffffff`   | `#0a0a0a`   |
| `menu.backdropBackground`                 | `--color-header-menu-backdrop-background`                 | `#ffffff1a` | `#0000001a` |
| `menu.shadow`                             | `--color-header-menu-shadow`                              | `#00000040` | `#00000040` |

### footer

| Token               | CSS variable                       | Default     | Dark        |
| ------------------- | ---------------------------------- | ----------- | ----------- |
| `logo`              | `--color-footer-logo`              | `#000000`   | `#ffffff`   |
| `text`              | `--color-footer-text`              | `#000000`   | `#ffffff`   |
| `title`             | `--color-footer-title`             | `#000000`   | `#ffffff`   |
| `link`              | `--color-footer-link`              | `#00000040` | `#ffffff40` |
| `linkHover`         | `--color-footer-link-hover`        | `#000000`   | `#2563eb`   |
| `icon`              | `--color-footer-icon`              | `#2563eb`   | `#2563eb`   |
| `iconHover`         | `--color-footer-icon-hover`        | `#000000`   | `#ffffff`   |
| `main.background`   | `--color-footer-main-background`   | `#ffffff`   | `#0a0a0a`   |
| `bottom.background` | `--color-footer-bottom-background` | `#ffffff`   | `#0a0a0a`   |
| `simple.background` | `--color-footer-simple-background` | `#ffffff`   | `#0a0a0a`   |

### hero

| Token                   | CSS variable                          | Default     | Dark        |
| ----------------------- | ------------------------------------- | ----------- | ----------- |
| `simple.text`           | `--color-hero-simple-text`            | `#000000`   | `#ffffff`   |
| `simple.bg`             | `--color-hero-simple-bg`              | `#fafafa`   | `#171717`   |
| `background.text`       | `--color-hero-background-text`        | `#ffffff`   | `#ffffff`   |
| `background.overlay`    | `--color-hero-background-overlay`     | `#00000080` | `#00000080` |
| `background.bgFallback` | `--color-hero-background-bg-fallback` | `#000000`   | `#000000`   |
| `feature.text`          | `--color-hero-feature-text`           | `#000000`   | `#ffffff`   |
| `feature.bg`            | `--color-hero-feature-bg`             | `#fafafa`   | `#171717`   |

### gallery

| Token                                 | CSS variable                                          | Default     | Dark        |
| ------------------------------------- | ----------------------------------------------------- | ----------- | ----------- |
| `navigation.pagination.text`          | `--color-gallery-navigation-pagination-text`          | `#000000`   | `#ffffff`   |
| `navigation.button.normal.text`       | `--color-gallery-navigation-button-normal-text`       | `#000000`   | `#ffffff`   |
| `navigation.button.normal.icon`       | `--color-gallery-navigation-button-normal-icon`       | `#000000`   | `#ffffff`   |
| `navigation.button.normal.background` | `--color-gallery-navigation-button-normal-background` | `#00000000` | `#00000000` |
| `navigation.button.normal.border`     | `--color-gallery-navigation-button-normal-border`     | `#2563eb`   | `#2563eb`   |
| `navigation.button.normal.shadow`     | `--color-gallery-navigation-button-normal-shadow`     | `#00000000` | `#00000000` |
| `navigation.button.hover.text`        | `--color-gallery-navigation-button-hover-text`        | `#ffffff`   | `#000000`   |
| `navigation.button.hover.icon`        | `--color-gallery-navigation-button-hover-icon`        | `#ffffff`   | `#000000`   |
| `navigation.button.hover.background`  | `--color-gallery-navigation-button-hover-background`  | `#0a0a0a`   | `#fafafa`   |
| `navigation.button.hover.border`      | `--color-gallery-navigation-button-hover-border`      | `#0a0a0a`   | `#fafafa`   |
| `navigation.button.hover.shadow`      | `--color-gallery-navigation-button-hover-shadow`      | `#00000000` | `#00000000` |

### separator

| Token  | CSS variable             | Default     | Dark        |
| ------ | ------------------------ | ----------- | ----------- |
| `line` | `--color-separator-line` | `#1e40af40` | `#60a5fa40` |

### icon

| Token                        | CSS variable                                | Default     | Dark        |
| ---------------------------- | ------------------------------------------- | ----------- | ----------- |
| `normal.color`               | `--color-icon-normal-color`                 | `#2563eb`   | `#2563eb`   |
| `normal.hasBackgroundColor`  | `--color-icon-normal-has-background-color`  | `#2563eb`   | `#2563eb`   |
| `normal.hasBackgroundIcon`   | `--color-icon-normal-has-background-icon`   | `#ffffff`   | `#ffffff`   |
| `normal.hasBackgroundBorder` | `--color-icon-normal-has-background-border` | `#00000000` | `#00000000` |
| `normal.hasBackgroundShadow` | `--color-icon-normal-has-background-shadow` | `#00000000` | `#00000000` |
| `hover.color`                | `--color-icon-hover-color`                  | `#000000`   | `#ffffff`   |
| `hover.hasBackgroundColor`   | `--color-icon-hover-has-background-color`   | `#0a0a0a`   | `#fafafa`   |
| `hover.hasBackgroundIcon`    | `--color-icon-hover-has-background-icon`    | `#ffffff`   | `#000000`   |
| `hover.hasBackgroundBorder`  | `--color-icon-hover-has-background-border`  | `#00000000` | `#00000000` |
| `hover.hasBackgroundShadow`  | `--color-icon-hover-has-background-shadow`  | `#00000000` | `#00000000` |

### list

| Token    | CSS variable          | Default   | Dark      |
| -------- | --------------------- | --------- | --------- |
| `marker` | `--color-list-marker` | `#2563eb` | `#2563eb` |

### media

| Token     | CSS variable            | Default     | Dark        |
| --------- | ----------------------- | ----------- | ----------- |
| `border`  | `--color-media-border`  | `#00000000` | `#00000000` |
| `shadow`  | `--color-media-shadow`  | `#00000000` | `#00000000` |
| `overlay` | `--color-media-overlay` | `#00000080` | `#00000080` |
| `icon`    | `--color-media-icon`    | `#ffffff`   | `#ffffff`   |

### carousel

| Token                              | CSS variable                                        | Default     | Dark        |
| ---------------------------------- | --------------------------------------------------- | ----------- | ----------- |
| `wrapper.border`                   | `--color-carousel-wrapper-border`                   | `#00000000` | `#00000000` |
| `wrapper.pagination.fillDefault`   | `--color-carousel-wrapper-pagination-fill-default`  | `#80808080` | `#80808080` |
| `wrapper.pagination.fillActive`    | `--color-carousel-wrapper-pagination-fill-active`   | `#2563eb`   | `#2563eb`   |
| `wrapper.pagination.fillHover`     | `--color-carousel-wrapper-pagination-fill-hover`    | `#000000`   | `#ffffff`   |
| `wrapper.button.normal.fill`       | `--color-carousel-wrapper-button-normal-fill`       | `#2563eb`   | `#2563eb`   |
| `wrapper.button.normal.background` | `--color-carousel-wrapper-button-normal-background` | `#00000000` | `#00000000` |
| `wrapper.button.normal.border`     | `--color-carousel-wrapper-button-normal-border`     | `#00000000` | `#00000000` |
| `wrapper.button.normal.shadow`     | `--color-carousel-wrapper-button-normal-shadow`     | `#00000000` | `#00000000` |
| `wrapper.button.hover.fill`        | `--color-carousel-wrapper-button-hover-fill`        | `#000000`   | `#ffffff`   |
| `wrapper.button.hover.background`  | `--color-carousel-wrapper-button-hover-background`  | `#00000000` | `#00000000` |
| `wrapper.button.hover.border`      | `--color-carousel-wrapper-button-hover-border`      | `#00000000` | `#00000000` |
| `wrapper.button.hover.shadow`      | `--color-carousel-wrapper-button-hover-shadow`      | `#00000000` | `#00000000` |
| `thumbs.border`                    | `--color-carousel-thumbs-border`                    | `#00000000` | `#00000000` |
| `thumbs.defaultOpacity`            | `--color-carousel-thumbs-default-opacity`           | `50`        | `50`        |
| `thumbs.activeOpacity`             | `--color-carousel-thumbs-active-opacity`            | `100`       | `100`       |
| `bottom.pagination.text`           | `--color-carousel-bottom-pagination-text`           | `#000000`   | `#ffffff`   |
| `bottom.button.normal.text`        | `--color-carousel-bottom-button-normal-text`        | `#000000`   | `#ffffff`   |
| `bottom.button.normal.icon`        | `--color-carousel-bottom-button-normal-icon`        | `#000000`   | `#ffffff`   |
| `bottom.button.normal.background`  | `--color-carousel-bottom-button-normal-background`  | `#00000000` | `#00000000` |
| `bottom.button.normal.border`      | `--color-carousel-bottom-button-normal-border`      | `#2563eb`   | `#2563eb`   |
| `bottom.button.normal.shadow`      | `--color-carousel-bottom-button-normal-shadow`      | `#00000000` | `#00000000` |
| `bottom.button.hover.text`         | `--color-carousel-bottom-button-hover-text`         | `#ffffff`   | `#000000`   |
| `bottom.button.hover.icon`         | `--color-carousel-bottom-button-hover-icon`         | `#ffffff`   | `#000000`   |
| `bottom.button.hover.background`   | `--color-carousel-bottom-button-hover-background`   | `#0a0a0a`   | `#fafafa`   |
| `bottom.button.hover.border`       | `--color-carousel-bottom-button-hover-border`       | `#0a0a0a`   | `#fafafa`   |
| `bottom.button.hover.shadow`       | `--color-carousel-bottom-button-hover-shadow`       | `#00000000` | `#00000000` |

### avatar

| Token    | CSS variable            | Default     | Dark        |
| -------- | ----------------------- | ----------- | ----------- |
| `border` | `--color-avatar-border` | `#00000000` | `#00000000` |
| `shadow` | `--color-avatar-shadow` | `#00000000` | `#00000000` |

### button

| Token                         | CSS variable                                 | Default     | Dark        |
| ----------------------------- | -------------------------------------------- | ----------- | ----------- |
| `primary.normal.text`         | `--color-button-primary-normal-text`         | `#ffffff`   | `#ffffff`   |
| `primary.normal.icon`         | `--color-button-primary-normal-icon`         | `#ffffff`   | `#ffffff`   |
| `primary.normal.background`   | `--color-button-primary-normal-background`   | `#2563eb`   | `#2563eb`   |
| `primary.normal.border`       | `--color-button-primary-normal-border`       | `#2563eb`   | `#2563eb`   |
| `primary.normal.shadow`       | `--color-button-primary-normal-shadow`       | `#00000000` | `#00000000` |
| `primary.hover.text`          | `--color-button-primary-hover-text`          | `#ffffff`   | `#000000`   |
| `primary.hover.icon`          | `--color-button-primary-hover-icon`          | `#ffffff`   | `#000000`   |
| `primary.hover.background`    | `--color-button-primary-hover-background`    | `#0a0a0a`   | `#fafafa`   |
| `primary.hover.border`        | `--color-button-primary-hover-border`        | `#0a0a0a`   | `#fafafa`   |
| `primary.hover.shadow`        | `--color-button-primary-hover-shadow`        | `#00000000` | `#00000000` |
| `secondary.normal.text`       | `--color-button-secondary-normal-text`       | `#000000`   | `#ffffff`   |
| `secondary.normal.icon`       | `--color-button-secondary-normal-icon`       | `#000000`   | `#ffffff`   |
| `secondary.normal.background` | `--color-button-secondary-normal-background` | `#00000000` | `#00000000` |
| `secondary.normal.border`     | `--color-button-secondary-normal-border`     | `#2563eb`   | `#2563eb`   |
| `secondary.normal.shadow`     | `--color-button-secondary-normal-shadow`     | `#00000000` | `#00000000` |
| `secondary.hover.text`        | `--color-button-secondary-hover-text`        | `#ffffff`   | `#000000`   |
| `secondary.hover.icon`        | `--color-button-secondary-hover-icon`        | `#ffffff`   | `#000000`   |
| `secondary.hover.background`  | `--color-button-secondary-hover-background`  | `#0a0a0a`   | `#fafafa`   |
| `secondary.hover.border`      | `--color-button-secondary-hover-border`      | `#0a0a0a`   | `#fafafa`   |
| `secondary.hover.shadow`      | `--color-button-secondary-hover-shadow`      | `#00000000` | `#00000000` |

### chip

| Token               | CSS variable                     | Default     | Dark        |
| ------------------- | -------------------------------- | ----------- | ----------- |
| `normal.text`       | `--color-chip-normal-text`       | `#000000`   | `#ffffff`   |
| `normal.icon`       | `--color-chip-normal-icon`       | `#000000`   | `#ffffff`   |
| `normal.background` | `--color-chip-normal-background` | `#fafafa`   | `#171717`   |
| `normal.border`     | `--color-chip-normal-border`     | `#e5e5e5`   | `#262626`   |
| `normal.shadow`     | `--color-chip-normal-shadow`     | `#00000000` | `#00000000` |
| `hover.text`        | `--color-chip-hover-text`        | `#0a0a0a`   | `#fafafa`   |
| `hover.icon`        | `--color-chip-hover-icon`        | `#0a0a0a`   | `#fafafa`   |
| `hover.background`  | `--color-chip-hover-background`  | `#f5f5f5`   | `#171717`   |
| `hover.border`      | `--color-chip-hover-border`      | `#e5e5e5`   | `#262626`   |
| `hover.shadow`      | `--color-chip-hover-shadow`      | `#00000000` | `#00000000` |

### card

| Token                         | CSS variable                                | Default     | Dark        |
| ----------------------------- | ------------------------------------------- | ----------- | ----------- |
| `default.background`          | `--color-card-default-background`           | `#fafafa`   | `#171717`   |
| `default.border`              | `--color-card-default-border`               | `#e5e5e5`   | `#262626`   |
| `default.content`             | `--color-card-default-content`              | `#000000`   | `#ffffff`   |
| `default.shadow`              | `--color-card-default-shadow`               | `#00000000` | `#00000000` |
| `default.hoverBackground`     | `--color-card-default-hover-background`     | `#f5f5f5`   | `#171717`   |
| `default.hoverBorder`         | `--color-card-default-hover-border`         | `#e5e5e5`   | `#262626`   |
| `default.hoverContent`        | `--color-card-default-hover-content`        | `#0a0a0a`   | `#fafafa`   |
| `default.hoverShadow`         | `--color-card-default-hover-shadow`         | `#00000000` | `#00000000` |
| `highlighted.background`      | `--color-card-highlighted-background`       | `#fafafa`   | `#171717`   |
| `highlighted.border`          | `--color-card-highlighted-border`           | `#2563eb`   | `#2563eb`   |
| `highlighted.content`         | `--color-card-highlighted-content`          | `#000000`   | `#ffffff`   |
| `highlighted.shadow`          | `--color-card-highlighted-shadow`           | `#2563eb40` | `#2563eb40` |
| `highlighted.hoverBackground` | `--color-card-highlighted-hover-background` | `#f5f5f5`   | `#171717`   |
| `highlighted.hoverBorder`     | `--color-card-highlighted-hover-border`     | `#2563eb`   | `#2563eb`   |
| `highlighted.hoverContent`    | `--color-card-highlighted-hover-content`    | `#0a0a0a`   | `#fafafa`   |
| `highlighted.hoverShadow`     | `--color-card-highlighted-hover-shadow`     | `#2563eb40` | `#2563eb40` |

### accordion

| Token                     | CSS variable                                 | Default     | Dark        |
| ------------------------- | -------------------------------------------- | ----------- | ----------- |
| `default.background`      | `--color-accordion-default-background`       | `#fafafa`   | `#171717`   |
| `default.border`          | `--color-accordion-default-border`           | `#e5e5e5`   | `#262626`   |
| `default.title`           | `--color-accordion-default-title`            | `#000000`   | `#ffffff`   |
| `default.icon`            | `--color-accordion-default-icon`             | `#000000`   | `#ffffff`   |
| `default.content`         | `--color-accordion-default-content`          | `#000000`   | `#ffffff`   |
| `default.shadow`          | `--color-accordion-default-shadow`           | `#00000000` | `#00000000` |
| `default.hoverBackground` | `--color-accordion-default-hover-background` | `#f5f5f5`   | `#171717`   |
| `default.hoverBorder`     | `--color-accordion-default-hover-border`     | `#e5e5e5`   | `#262626`   |
| `default.hoverTitle`      | `--color-accordion-default-hover-title`      | `#0a0a0a`   | `#fafafa`   |
| `default.hoverIcon`       | `--color-accordion-default-hover-icon`       | `#0a0a0a`   | `#fafafa`   |
| `default.hoverContent`    | `--color-accordion-default-hover-content`    | `#0a0a0a`   | `#fafafa`   |
| `default.hoverShadow`     | `--color-accordion-default-hover-shadow`     | `#00000000` | `#00000000` |

### quote

| Token            | CSS variable                    | Default     | Dark        |
| ---------------- | ------------------------------- | ----------- | ----------- |
| `background`     | `--color-quote-background`      | `#00000000` | `#00000000` |
| `border`         | `--color-quote-border`          | `#2563eb`   | `#2563eb`   |
| `icon`           | `--color-quote-icon`            | `#2563eb`   | `#2563eb`   |
| `content`        | `--color-quote-content`         | `#000000`   | `#ffffff`   |
| `primaryLabel`   | `--color-quote-primary-label`   | `#000000`   | `#ffffff`   |
| `secondaryLabel` | `--color-quote-secondary-label` | `#000000`   | `#ffffff`   |

### form

| Token                            | CSS variable                                   | Default     | Dark        |
| -------------------------------- | ---------------------------------------------- | ----------- | ----------- |
| `label`                          | `--color-form-label`                           | `#000000`   | `#ffffff`   |
| `labelRequired`                  | `--color-form-label-required`                  | `#dc2626`   | `#dc2626`   |
| `description`                    | `--color-form-description`                     | `#000000`   | `#ffffff`   |
| `invalidMessage`                 | `--color-form-invalid-message`                 | `#dc2626`   | `#dc2626`   |
| `inputBlock.default.background`  | `--color-form-input-block-default-background`  | `#ffffff`   | `#0a0a0a`   |
| `inputBlock.default.border`      | `--color-form-input-block-default-border`      | `#1e40af40` | `#60a5fa40` |
| `inputBlock.default.text`        | `--color-form-input-block-default-text`        | `#000000`   | `#ffffff`   |
| `inputBlock.default.placeholder` | `--color-form-input-block-default-placeholder` | `#00000040` | `#ffffff40` |
| `inputBlock.default.icon`        | `--color-form-input-block-default-icon`        | `#000000`   | `#ffffff`   |
| `inputBlock.default.shadow`      | `--color-form-input-block-default-shadow`      | `#00000000` | `#00000000` |
| `inputBlock.focus.background`    | `--color-form-input-block-focus-background`    | `#ffffff`   | `#0a0a0a`   |
| `inputBlock.focus.border`        | `--color-form-input-block-focus-border`        | `#1e40af`   | `#60a5fa`   |
| `inputBlock.focus.text`          | `--color-form-input-block-focus-text`          | `#000000`   | `#ffffff`   |
| `inputBlock.focus.placeholder`   | `--color-form-input-block-focus-placeholder`   | `#00000040` | `#ffffff40` |
| `inputBlock.focus.icon`          | `--color-form-input-block-focus-icon`          | `#000000`   | `#ffffff`   |
| `inputBlock.focus.shadow`        | `--color-form-input-block-focus-shadow`        | `#00000000` | `#00000000` |
| `inputBlock.invalid.background`  | `--color-form-input-block-invalid-background`  | `#ffffff`   | `#0a0a0a`   |
| `inputBlock.invalid.border`      | `--color-form-input-block-invalid-border`      | `#dc2626`   | `#dc2626`   |
| `inputBlock.invalid.text`        | `--color-form-input-block-invalid-text`        | `#000000`   | `#ffffff`   |
| `inputBlock.invalid.placeholder` | `--color-form-input-block-invalid-placeholder` | `#00000040` | `#ffffff40` |
| `inputBlock.invalid.icon`        | `--color-form-input-block-invalid-icon`        | `#dc2626`   | `#dc2626`   |
| `inputBlock.invalid.shadow`      | `--color-form-input-block-invalid-shadow`      | `#00000000` | `#00000000` |
| `inputBlock.disabled.opacity`    | `--color-form-input-block-disabled-opacity`    | `35`        | `35`        |
| `inputInline.default.background` | `--color-form-input-inline-default-background` | `#ffffff`   | `#0a0a0a`   |
| `inputInline.default.border`     | `--color-form-input-inline-default-border`     | `#000000`   | `#ffffff`   |
| `inputInline.default.text`       | `--color-form-input-inline-default-text`       | `#000000`   | `#ffffff`   |
| `inputInline.default.check`      | `--color-form-input-inline-default-check`      | `#ffffff`   | `#0a0a0a`   |
| `inputInline.default.marker`     | `--color-form-input-inline-default-marker`     | `#ffffff`   | `#0a0a0a`   |
| `inputInline.checked.background` | `--color-form-input-inline-checked-background` | `#2563eb`   | `#2563eb`   |
| `inputInline.checked.border`     | `--color-form-input-inline-checked-border`     | `#2563eb`   | `#2563eb`   |
| `inputInline.checked.text`       | `--color-form-input-inline-checked-text`       | `#000000`   | `#ffffff`   |
| `inputInline.checked.check`      | `--color-form-input-inline-checked-check`      | `#ffffff`   | `#ffffff`   |
| `inputInline.checked.marker`     | `--color-form-input-inline-checked-marker`     | `#ffffff`   | `#ffffff`   |
| `inputInline.invalid.background` | `--color-form-input-inline-invalid-background` | `#ffffff`   | `#0a0a0a`   |
| `inputInline.invalid.border`     | `--color-form-input-inline-invalid-border`     | `#dc2626`   | `#dc2626`   |
| `inputInline.invalid.text`       | `--color-form-input-inline-invalid-text`       | `#000000`   | `#ffffff`   |
| `inputInline.invalid.check`      | `--color-form-input-inline-invalid-check`      | `#ffffff`   | `#0a0a0a`   |
| `inputInline.invalid.marker`     | `--color-form-input-inline-invalid-marker`     | `#ffffff`   | `#0a0a0a`   |
| `inputInline.disabled.opacity`   | `--color-form-input-inline-disabled-opacity`   | `35`        | `35`        |

### cookieConsent

| Token                                | CSS variable                                                | Default     | Dark        |
| ------------------------------------ | ----------------------------------------------------------- | ----------- | ----------- |
| `surface.background`                 | `--color-cookie-consent-surface-background`                 | `#fafafa`   | `#171717`   |
| `surface.border`                     | `--color-cookie-consent-surface-border`                     | `#e5e5e5`   | `#262626`   |
| `surface.content`                    | `--color-cookie-consent-surface-content`                    | `#000000`   | `#ffffff`   |
| `surface.contentMuted`               | `--color-cookie-consent-surface-content-muted`              | `#00000040` | `#ffffff40` |
| `surface.shadow`                     | `--color-cookie-consent-surface-shadow`                     | `#00000000` | `#00000000` |
| `title.text`                         | `--color-cookie-consent-title-text`                         | `#000000`   | `#ffffff`   |
| `footer.background`                  | `--color-cookie-consent-footer-background`                  | `#f5f5f5`   | `#171717`   |
| `footer.border`                      | `--color-cookie-consent-footer-border`                      | `#00000000` | `#00000000` |
| `footer.content`                     | `--color-cookie-consent-footer-content`                     | `#000000`   | `#ffffff`   |
| `separator.color`                    | `--color-cookie-consent-separator-color`                    | `#1e40af40` | `#60a5fa40` |
| `backdrop.background`                | `--color-cookie-consent-backdrop-background`                | `#ffffff1a` | `#0000001a` |
| `button.primary.normal.text`         | `--color-cookie-consent-button-primary-normal-text`         | `#ffffff`   | `#ffffff`   |
| `button.primary.normal.background`   | `--color-cookie-consent-button-primary-normal-background`   | `#2563eb`   | `#2563eb`   |
| `button.primary.normal.border`       | `--color-cookie-consent-button-primary-normal-border`       | `#2563eb`   | `#2563eb`   |
| `button.primary.hover.text`          | `--color-cookie-consent-button-primary-hover-text`          | `#ffffff`   | `#000000`   |
| `button.primary.hover.background`    | `--color-cookie-consent-button-primary-hover-background`    | `#0a0a0a`   | `#fafafa`   |
| `button.primary.hover.border`        | `--color-cookie-consent-button-primary-hover-border`        | `#0a0a0a`   | `#fafafa`   |
| `button.secondary.normal.text`       | `--color-cookie-consent-button-secondary-normal-text`       | `#000000`   | `#ffffff`   |
| `button.secondary.normal.background` | `--color-cookie-consent-button-secondary-normal-background` | `#00000000` | `#00000000` |
| `button.secondary.normal.border`     | `--color-cookie-consent-button-secondary-normal-border`     | `#2563eb`   | `#2563eb`   |
| `button.secondary.hover.text`        | `--color-cookie-consent-button-secondary-hover-text`        | `#ffffff`   | `#000000`   |
| `button.secondary.hover.background`  | `--color-cookie-consent-button-secondary-hover-background`  | `#0a0a0a`   | `#fafafa`   |
| `button.secondary.hover.border`      | `--color-cookie-consent-button-secondary-hover-border`      | `#0a0a0a`   | `#fafafa`   |
| `link.textDefault`                   | `--color-cookie-consent-link-text-default`                  | `#2563eb`   | `#2563eb`   |
| `link.underlineDefault`              | `--color-cookie-consent-link-underline-default`             | `#2563eb`   | `#2563eb`   |
| `link.textHover`                     | `--color-cookie-consent-link-text-hover`                    | `#000000`   | `#ffffff`   |
| `link.underlineHover`                | `--color-cookie-consent-link-underline-hover`               | `#000000`   | `#ffffff`   |
| `category.background`                | `--color-cookie-consent-category-background`                | `#fafafa`   | `#171717`   |
| `category.border`                    | `--color-cookie-consent-category-border`                    | `#e5e5e5`   | `#262626`   |
| `category.title`                     | `--color-cookie-consent-category-title`                     | `#000000`   | `#ffffff`   |
| `category.icon`                      | `--color-cookie-consent-category-icon`                      | `#000000`   | `#ffffff`   |
| `category.content`                   | `--color-cookie-consent-category-content`                   | `#000000`   | `#ffffff`   |
| `category.hoverBackground`           | `--color-cookie-consent-category-hover-background`          | `#f5f5f5`   | `#171717`   |
| `category.hoverBorder`               | `--color-cookie-consent-category-hover-border`              | `#e5e5e5`   | `#262626`   |
| `category.hoverTitle`                | `--color-cookie-consent-category-hover-title`               | `#0a0a0a`   | `#fafafa`   |
| `category.hoverIcon`                 | `--color-cookie-consent-category-hover-icon`                | `#0a0a0a`   | `#fafafa`   |
| `toggle.on.background`               | `--color-cookie-consent-toggle-on-background`               | `#2563eb`   | `#2563eb`   |
| `toggle.on.knob`                     | `--color-cookie-consent-toggle-on-knob`                     | `#ffffff`   | `#ffffff`   |
| `toggle.off.background`              | `--color-cookie-consent-toggle-off-background`              | `#1e40af`   | `#60a5fa`   |
| `toggle.off.knob`                    | `--color-cookie-consent-toggle-off-knob`                    | `#ffffff`   | `#0a0a0a`   |
| `toggle.readonly.background`         | `--color-cookie-consent-toggle-readonly-background`         | `#1e40af40` | `#60a5fa40` |
| `toggle.readonly.knob`               | `--color-cookie-consent-toggle-readonly-knob`               | `#ffffff`   | `#0a0a0a`   |
| `closeButton.color`                  | `--color-cookie-consent-close-button-color`                 | `#2563eb`   | `#2563eb`   |
| `closeButton.hoverColor`             | `--color-cookie-consent-close-button-hover-color`           | `#000000`   | `#ffffff`   |