> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Tokens

## Colors Primary

| Token                | Value   |
| -------------------- | ------- |
| --color-slate-50     | #f8fafc |
| --color-slate-100    | #f1f5f9 |
| --color-slate-200    | #e2e8f0 |
| --color-slate-300    | #cad5e2 |
| --color-slate-400    | #90a1b9 |
| --color-slate-500    | #62748e |
| --color-slate-600    | #45556c |
| --color-slate-700    | #314158 |
| --color-slate-800    | #1d293d |
| --color-slate-900    | #0f172b |
| --color-slate-950    | #020618 |
| --color-slate-975    | #010413 |
| --color-red-50       | #fef2f2 |
| --color-red-100      | #ffe2e2 |
| --color-red-200      | #ffc9c9 |
| --color-red-300      | #ffa2a2 |
| --color-red-400      | #ff6467 |
| --color-red-500      | #fb2c36 |
| --color-red-600      | #e7000b |
| --color-red-700      | #c10007 |
| --color-red-800      | #9f0712 |
| --color-red-900      | #82181a |
| --color-red-950      | #460809 |
| --color-w-orange-50  | #fff5ed |
| --color-w-orange-100 | #ffe1d0 |
| --color-w-orange-200 | #ffc8ac |
| --color-w-orange-300 | #ffa985 |
| --color-w-orange-400 | #ff8a52 |
| --color-w-orange-500 | #ff6633 |
| --color-w-orange-600 | #ff441c |
| --color-w-orange-700 | #e12f0c |
| --color-w-orange-800 | #b82005 |
| --color-w-orange-900 | #911908 |
| --color-w-orange-950 | #560e06 |
| --color-amber-50     | #fffbeb |
| --color-amber-100    | #fef3c6 |
| --color-amber-200    | #fee685 |
| --color-amber-300    | #ffd230 |
| --color-amber-400    | #ffb900 |
| --color-amber-500    | #fe9a00 |
| --color-amber-600    | #e17100 |
| --color-amber-700    | #bb4d00 |
| --color-amber-800    | #973c00 |
| --color-amber-900    | #7b3306 |
| --color-amber-950    | #461901 |
| --color-green-50     | #f0fdf4 |
| --color-green-100    | #dcfce7 |
| --color-green-200    | #b9f8cf |
| --color-green-300    | #7bf1a8 |
| --color-green-400    | #05df72 |
| --color-green-500    | #00c950 |
| --color-green-600    | #00a63e |
| --color-green-700    | #008236 |
| --color-green-800    | #016630 |
| --color-green-900    | #0d542b |
| --color-green-950    | #032e15 |
| --color-blue-50      | #eff6ff |
| --color-blue-100     | #dbeafe |
| --color-blue-200     | #bedbff |
| --color-blue-300     | #8ec5ff |
| --color-blue-400     | #51a2ff |
| --color-blue-500     | #2b7fff |
| --color-blue-600     | #155dfc |
| --color-blue-700     | #1447e6 |
| --color-blue-800     | #193cb8 |
| --color-blue-900     | #1c398e |
| --color-blue-950     | #162456 |
| --color-purple-50    | #faf5ff |
| --color-purple-100   | #f3e8ff |
| --color-purple-200   | #e9d4ff |
| --color-purple-300   | #dab2ff |
| --color-purple-400   | #c27aff |
| --color-purple-500   | #ad46ff |
| --color-purple-600   | #9810fa |
| --color-purple-700   | #8200db |
| --color-purple-800   | #6e11b0 |
| --color-purple-900   | #59168b |
| --color-purple-950   | #3c0366 |

## Colors Secondary

| Token               | Value   |
| ------------------- | ------- |
| --color-orange-50   | #fff7ed |
| --color-orange-100  | #ffedd4 |
| --color-orange-200  | #ffd6a8 |
| --color-orange-300  | #ffb86a |
| --color-orange-400  | #ff8904 |
| --color-orange-500  | #ff6900 |
| --color-orange-600  | #f54900 |
| --color-orange-700  | #ca3500 |
| --color-orange-800  | #9f2d00 |
| --color-orange-900  | #7e2a0c |
| --color-orange-950  | #441306 |
| --color-yellow-50   | #fefce8 |
| --color-yellow-100  | #fef9c2 |
| --color-yellow-200  | #fff085 |
| --color-yellow-300  | #ffdf20 |
| --color-yellow-400  | #fdc700 |
| --color-yellow-500  | #f0b100 |
| --color-yellow-600  | #d08700 |
| --color-yellow-700  | #a65f00 |
| --color-yellow-800  | #894b00 |
| --color-yellow-900  | #733e0a |
| --color-yellow-950  | #432004 |
| --color-lime-50     | #f7fee7 |
| --color-lime-100    | #ecfcca |
| --color-lime-200    | #d8f999 |
| --color-lime-300    | #bbf451 |
| --color-lime-400    | #9ae600 |
| --color-lime-500    | #7ccf00 |
| --color-lime-600    | #5ea500 |
| --color-lime-700    | #497d00 |
| --color-lime-800    | #3c6300 |
| --color-lime-900    | #35530e |
| --color-lime-950    | #192e03 |
| --color-emerald-50  | #ecfdf5 |
| --color-emerald-100 | #d0fae5 |
| --color-emerald-200 | #a4f4cf |
| --color-emerald-300 | #5ee9b5 |
| --color-emerald-400 | #00d492 |
| --color-emerald-500 | #00bc7d |
| --color-emerald-600 | #009966 |
| --color-emerald-700 | #007a55 |
| --color-emerald-800 | #006045 |
| --color-emerald-900 | #004f3b |
| --color-emerald-950 | #002c22 |
| --color-teal-50     | #f0fdfa |
| --color-teal-100    | #cbfbf1 |
| --color-teal-200    | #96f7e4 |
| --color-teal-300    | #46ecd5 |
| --color-teal-400    | #00d5be |
| --color-teal-500    | #00bba7 |
| --color-teal-600    | #009689 |
| --color-teal-700    | #00786f |
| --color-teal-800    | #005f5a |
| --color-teal-900    | #0b4f4a |
| --color-teal-950    | #022f2e |
| --color-cyan-50     | #ecfeff |
| --color-cyan-100    | #cefafe |
| --color-cyan-200    | #a2f4fd |
| --color-cyan-300    | #53eafd |
| --color-cyan-400    | #00d3f3 |
| --color-cyan-500    | #00b8db |
| --color-cyan-600    | #0092b8 |
| --color-cyan-700    | #007595 |
| --color-cyan-800    | #005f78 |
| --color-cyan-900    | #104e64 |
| --color-cyan-950    | #053345 |
| --color-sky-50      | #f0f9ff |
| --color-sky-100     | #dff2fe |
| --color-sky-200     | #b8e6fe |
| --color-sky-300     | #74d4ff |
| --color-sky-400     | #00bcff |
| --color-sky-500     | #00a6f4 |
| --color-sky-600     | #0084d1 |
| --color-sky-700     | #0069a8 |
| --color-sky-800     | #00598a |
| --color-sky-900     | #024a70 |
| --color-sky-950     | #052f4a |
| --color-indigo-50   | #eef2ff |
| --color-indigo-100  | #e0e7ff |
| --color-indigo-200  | #c6d2ff |
| --color-indigo-300  | #a3b3ff |
| --color-indigo-400  | #7c86ff |
| --color-indigo-500  | #615fff |
| --color-indigo-600  | #4f39f6 |
| --color-indigo-700  | #432dd7 |
| --color-indigo-800  | #372aac |
| --color-indigo-900  | #312c85 |
| --color-indigo-950  | #1e1a4d |
| --color-violet-50   | #f5f3ff |
| --color-violet-100  | #ede9fe |
| --color-violet-200  | #ddd6ff |
| --color-violet-300  | #c4b4ff |
| --color-violet-400  | #a684ff |
| --color-violet-500  | #8e51ff |
| --color-violet-600  | #7f22fe |
| --color-violet-700  | #7008e7 |
| --color-violet-800  | #5d0ec0 |
| --color-violet-900  | #4d179a |
| --color-violet-950  | #2f0d68 |
| --color-fuchsia-50  | #fdf4ff |
| --color-fuchsia-100 | #fae8ff |
| --color-fuchsia-200 | #f6cfff |
| --color-fuchsia-300 | #f4a8ff |
| --color-fuchsia-400 | #ed6aff |
| --color-fuchsia-500 | #e12afb |
| --color-fuchsia-600 | #c800de |
| --color-fuchsia-700 | #a800b7 |
| --color-fuchsia-800 | #8a0194 |
| --color-fuchsia-900 | #721378 |
| --color-fuchsia-950 | #4b004f |
| --color-pink-50     | #fdf2f8 |
| --color-pink-100    | #fce7f3 |
| --color-pink-200    | #fccee8 |
| --color-pink-300    | #fda5d5 |
| --color-pink-400    | #fb64b6 |
| --color-pink-500    | #f6339a |
| --color-pink-600    | #e60076 |
| --color-pink-700    | #c6005c |
| --color-pink-800    | #a3004c |
| --color-pink-900    | #861043 |
| --color-pink-950    | #510424 |
| --color-rose-50     | #fff1f2 |
| --color-rose-100    | #ffe4e6 |
| --color-rose-200    | #ffccd3 |
| --color-rose-300    | #ffa1ad |
| --color-rose-400    | #ff637e |
| --color-rose-500    | #ff2056 |
| --color-rose-600    | #ec003f |
| --color-rose-700    | #c70036 |
| --color-rose-800    | #a50036 |
| --color-rose-900    | #8b0836 |
| --color-rose-950    | #4d0218 |

## Colors Grayscale

| Token               | Value   |
| ------------------- | ------- |
| --color-gray-50     | #f9fafb |
| --color-gray-100    | #f3f4f6 |
| --color-gray-200    | #e5e7eb |
| --color-gray-300    | #d1d5dc |
| --color-gray-400    | #99a1af |
| --color-gray-500    | #6a7282 |
| --color-gray-600    | #4a5565 |
| --color-gray-700    | #364153 |
| --color-gray-800    | #1e2939 |
| --color-gray-900    | #101828 |
| --color-gray-950    | #030712 |
| --color-zinc-50     | #fafafa |
| --color-zinc-100    | #f4f4f5 |
| --color-zinc-200    | #e4e4e7 |
| --color-zinc-300    | #d4d4d8 |
| --color-zinc-400    | #9f9fa9 |
| --color-zinc-500    | #71717b |
| --color-zinc-600    | #52525c |
| --color-zinc-700    | #3f3f47 |
| --color-zinc-800    | #27272a |
| --color-zinc-900    | #18181b |
| --color-zinc-950    | #09090b |
| --color-neutral-50  | #fafafa |
| --color-neutral-100 | #f5f5f5 |
| --color-neutral-200 | #e5e5e5 |
| --color-neutral-300 | #d4d4d4 |
| --color-neutral-400 | #a1a1a1 |
| --color-neutral-500 | #737373 |
| --color-neutral-600 | #525252 |
| --color-neutral-700 | #404040 |
| --color-neutral-800 | #262626 |
| --color-neutral-900 | #171717 |
| --color-neutral-950 | #0a0a0a |
| --color-stone-50    | #fafaf9 |
| --color-stone-100   | #f5f5f4 |
| --color-stone-200   | #e7e5e4 |
| --color-stone-300   | #d6d3d1 |
| --color-stone-400   | #a6a09b |
| --color-stone-500   | #79716b |
| --color-stone-600   | #57534d |
| --color-stone-700   | #44403b |
| --color-stone-800   | #292524 |
| --color-stone-900   | #1c1917 |
| --color-stone-950   | #0c0a09 |

## Colors Other

| Token               | Value       |
| ------------------- | ----------- |
| --color-transparent | transparent |
| --color-black       | #000000     |
| --color-white       | #ffffff     |

## Spacing

| Token          | Value |
| -------------- | ----- |
| --spacing      | 1px   |
| --spacing-none | 0px   |
| --spacing-1    | 1px   |
| --spacing-2    | 2px   |
| --spacing-4    | 4px   |
| --spacing-6    | 6px   |
| --spacing-8    | 8px   |
| --spacing-12   | 12px  |
| --spacing-16   | 16px  |
| --spacing-20   | 20px  |
| --spacing-24   | 24px  |
| --spacing-28   | 28px  |
| --spacing-32   | 32px  |
| --spacing-36   | 36px  |
| --spacing-40   | 40px  |
| --spacing-44   | 44px  |
| --spacing-48   | 48px  |
| --spacing-56   | 56px  |
| --spacing-64   | 64px  |
| --spacing-80   | 80px  |
| --spacing-96   | 96px  |
| --spacing-112  | 112px |
| --spacing-128  | 128px |
| --spacing-144  | 144px |

## Typography

| Token                    | Value                                                                |
| ------------------------ | -------------------------------------------------------------------- |
| --font-pixel             | 'Geist Pixel', ui-sans-serif, system-ui, sans-serif                  |
| --font-serif             | 'Inter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif |
| --font-weight-thin       | 100                                                                  |
| --font-weight-extralight | 200                                                                  |
| --font-weight-light      | 300                                                                  |
| --font-weight-normal     | 400                                                                  |
| --font-weight-medium     | 450                                                                  |
| --font-weight-semibold   | 600                                                                  |
| --font-weight-bold       | 700                                                                  |
| --font-weight-extrablod  | 800                                                                  |
| --font-weight-black      | 900                                                                  |
| --text-2xs               | 10px                                                                 |
| --text-2xs--line-height  | 12px                                                                 |
| --text-xs                | 12px                                                                 |
| --text-xs--line-height   | 16px                                                                 |
| --text-sm                | 14px                                                                 |
| --text-sm--line-height   | 20px                                                                 |
| --text-base              | 16px                                                                 |
| --text-base--line-height | 24px                                                                 |
| --text-lg                | 18px                                                                 |
| --text-lg--line-height   | 24px                                                                 |
| --text-xl                | 20px                                                                 |
| --text-xl--line-height   | 28px                                                                 |
| --text-2xl               | 24px                                                                 |
| --text-2xl--line-height  | 32px                                                                 |
| --text-3xl               | 30px                                                                 |
| --text-3xl--line-height  | 36px                                                                 |
| --text-4xl               | 36px                                                                 |
| --text-4xl--line-height  | 40px                                                                 |
| --text-5xl               | 48px                                                                 |
| --text-5xl--line-height  | 48px                                                                 |
| --text-6xl               | 60px                                                                 |
| --text-6xl--line-height  | 60px                                                                 |
| --text-7xl               | 72px                                                                 |
| --text-7xl--line-height  | 72px                                                                 |
| --text-8xl               | 96px                                                                 |
| --text-8xl--line-height  | 96px                                                                 |
| --text-9xl               | 128px                                                                |
| --text-9xl--line-height  | 128px                                                                |
| --leading-2xs            | 12px                                                                 |
| --leading-xs             | 16px                                                                 |
| --leading-sm             | 20px                                                                 |
| --leading-base           | 24px                                                                 |
| --leading-lg             | 24px                                                                 |
| --leading-xl             | 28px                                                                 |
| --leading-2xl            | 32px                                                                 |
| --leading-3xl            | 36px                                                                 |
| --leading-4xl            | 40px                                                                 |
| --leading-5xl            | 48px                                                                 |
| --leading-6xl            | 60px                                                                 |
| --leading-7xl            | 72px                                                                 |
| --leading-8xl            | 96px                                                                 |
| --leading-9xl            | 128px                                                                |
| --tracking-xl            | -0.005em                                                             |
| --tracking-2xl           | -0.01em                                                              |
| --tracking-3xl           | -0.01em                                                              |
| --tracking-4xl           | -0.015em                                                             |
| --tracking-5xl           | -0.015em                                                             |
| --tracking-6xl           | -0.02em                                                              |
| --tracking-7xl           | -0.02em                                                              |

## Radius

| Token         | Value  |
| ------------- | ------ |
| --radius-2    | 2px    |
| --radius-4    | 4px    |
| --radius-6    | 6px    |
| --radius-8    | 8px    |
| --radius-10   | 10px   |
| --radius-12   | 12px   |
| --radius-16   | 16px   |
| --radius-24   | 24px   |
| --radius-32   | 32px   |
| --radius-full | 9999px |

## Shadow

| Token        | Value                                                                   |
| ------------ | ----------------------------------------------------------------------- |
| --shadow-2xs | 0 1px 0 0 rgba(0, 0, 0, 0.05)                                           |
| --shadow-xs  | 0 1px 2px 0 rgba(0, 0, 0, 0.05)                                         |
| --shadow-sm  | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)         |
| --shadow-md  | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1)    |
| --shadow-lg  | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)  |
| --shadow-xl  | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) |
| --shadow-2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25)                                   |

## Blur

| Token      | Value |
| ---------- | ----- |
| --blur-xs  | 4px   |
| --blur-sm  | 8px   |
| --blur-md  | 12px  |
| --blur-lg  | 16px  |
| --blur-xl  | 24px  |
| --blur-2xl | 40px  |
| --blur-3xl | 64px  |

## Focus

| Token                           | Value                                    |
| ------------------------------- | ---------------------------------------- |
| --color-focus-brand             | --alpha(var(--color-w-orange-600) / 30%) |
| --color-focus-primary           | --alpha(var(--color-slate-400) / 30%)    |
| --color-focus-destructive       | --alpha(var(--color-red-600) / 20%)      |
| --color-focus-destructive-hover | --alpha(var(--color-red-600) / 30%)      |

## Icon

| Token      | Value |
| ---------- | ----- |
| --icon-xs  | 10px  |
| --icon-sm  | 12px  |
| --icon-md  | 16px  |
| --icon-lg  | 20px  |
| --icon-xl  | 24px  |
| --icon-2xl | 32px  |

## Semantic

| Token                                           | Value                                    |
| ----------------------------------------------- | ---------------------------------------- |
| --color-text-primary                            | var(--color-slate-900)                   |
| --color-text-primary-alt                        | var(--color-white)                       |
| --color-text-primary-fixed                      | var(--color-slate-900)                   |
| --color-text-primary-alt-fixed                  | var(--color-white)                       |
| --color-text-secondary                          | var(--color-slate-600)                   |
| --color-text-secondary-alt                      | --alpha(var(--color-white) / 80%)        |
| --color-text-tertiary                           | var(--color-slate-300)                   |
| --color-text-tertiary-alt                       | --alpha(var(--color-white) / 70%)        |
| --color-text-hint                               | var(--color-slate-300)                   |
| --color-text-brand                              | var(--color-w-orange-600)                |
| --color-text-danger                             | var(--color-red-600)                     |
| --color-text-warning                            | var(--color-amber-700)                   |
| --color-text-success                            | var(--color-green-600)                   |
| --color-text-info                               | var(--color-blue-600)                    |
| --color-text-ai                                 | var(--color-purple-600)                  |
| --color-text-disable-primary                    | --alpha(var(--color-slate-900) / 40%)    |
| --color-text-disable-primary-alt                | --alpha(var(--color-white) / 40%)        |
| --color-text-disable-brand                      | var(--color-w-orange-200)                |
| --color-text-disable-danger                     | var(--color-red-200)                     |
| --color-text-disable-warning                    | var(--color-amber-300)                   |
| --color-text-disable-succes                     | var(--color-green-200)                   |
| --color-text-disable-info                       | var(--color-blue-200)                    |
| --color-text-disable-ai                         | var(--color-purple-200)                  |
| --color-text-link-default                       | var(--color-blue-600)                    |
| --color-text-link-hover                         | var(--color-blue-800)                    |
| --color-text-link-default-alt                   | var(--color-blue-300)                    |
| --color-text-link-hover-alt                     | var(--color-blue-200)                    |
| --color-icon-primary                            | var(--color-slate-900)                   |
| --color-icon-primary-alt                        | var(--color-white)                       |
| --color-icon-primary-fixed                      | var(--color-slate-900)                   |
| --color-icon-primary-alt-fixed                  | var(--color-white)                       |
| --color-icon-primary-disable                    | --alpha(var(--color-slate-900) / 40%)    |
| --color-icon-primary-alt-disable                | --alpha(var(--color-white) / 40%)        |
| --color-icon-secondary                          | var(--color-slate-600)                   |
| --color-icon-secondary-alt                      | --alpha(var(--color-white) / 80%)        |
| --color-icon-brand                              | var(--color-w-orange-600)                |
| --color-icon-danger                             | var(--color-red-600)                     |
| --color-icon-warning                            | var(--color-amber-600)                   |
| --color-icon-success                            | var(--color-green-600)                   |
| --color-icon-info                               | var(--color-blue-600)                    |
| --color-icon-ai                                 | var(--color-purple-600)                  |
| --color-bg-page-bg                              | var(--color-white)                       |
| --color-bg-surface-1                            | var(--color-white)                       |
| --color-bg-surface-2                            | var(--color-white)                       |
| --color-bg-surface-3                            | var(--color-white)                       |
| --color-bg-surface-4                            | var(--color-white)                       |
| --color-bg-surface-5                            | var(--color-slate-100)                   |
| --color-bg-primary                              | var(--color-slate-100)                   |
| --color-bg-light-primary                        | var(--color-slate-50)                    |
| --color-bg-strong-primary                       | var(--color-slate-300)                   |
| --color-bg-brand                                | var(--color-w-orange-100)                |
| --color-bg-light-brand                          | var(--color-w-orange-50)                 |
| --color-bg-strong-brand                         | var(--color-w-orange-300)                |
| --color-bg-danger                               | var(--color-red-100)                     |
| --color-bg-light-danger                         | var(--color-red-50)                      |
| --color-bg-strong-danger                        | var(--color-red-300)                     |
| --color-bg-warning                              | var(--color-amber-100)                   |
| --color-bg-light-warning                        | var(--color-amber-50)                    |
| --color-bg-strong-warning                       | var(--color-amber-100)                   |
| --color-bg-success                              | var(--color-green-100)                   |
| --color-bg-light-success                        | var(--color-green-50)                    |
| --color-bg-strong-success                       | var(--color-green-300)                   |
| --color-bg-info                                 | var(--color-blue-100)                    |
| --color-bg-light-info                           | var(--color-blue-50)                     |
| --color-bg-strong-info                          | var(--color-blue-300)                    |
| --color-bg-ai                                   | var(--color-purple-100)                  |
| --color-bg-light-ai                             | var(--color-purple-50)                   |
| --color-bg-strong-ai                            | var(--color-purple-300)                  |
| --color-bg-fill-brand                           | var(--color-w-orange-600)                |
| --color-bg-fill-danger                          | var(--color-red-600)                     |
| --color-bg-fill-warning                         | var(--color-amber-500)                   |
| --color-bg-fill-success                         | var(--color-green-600)                   |
| --color-bg-fill-info                            | var(--color-blue-600)                    |
| --color-bg-fill-ai                              | var(--color-purple-600)                  |
| --color-border-primary                          | var(--color-slate-300)                   |
| --color-border-primary-light                    | var(--color-slate-200)                   |
| --color-border-strong-primary                   | var(--color-slate-500)                   |
| --color-focus-ring-primary                      | --alpha(var(--color-slate-400) / 30%)    |
| --color-border-brand                            | var(--color-w-orange-300)                |
| --color-border-strong-brand                     | var(--color-w-orange-500)                |
| --color-border-danger                           | var(--color-red-300)                     |
| --color-border-strong-danger                    | var(--color-red-600)                     |
| --color-border-warning                          | var(--color-amber-300)                   |
| --color-border-strong-warning                   | var(--color-amber-500)                   |
| --color-border-success                          | var(--color-green-300)                   |
| --color-border-strong-success                   | var(--color-green-500)                   |
| --color-border-info                             | var(--color-blue-300)                    |
| --color-border-strong-info                      | var(--color-blue-500)                    |
| --color-border-ai                               | var(--color-purple-300)                  |
| --color-border-strong-ai                        | var(--color-purple-500)                  |
| --color-states-default-all                      | --alpha(var(--color-white) / 0%)         |
| --color-states-on-fill-hover                    | --alpha(var(--color-white) / 10%)        |
| --color-states-on-fill-pressed                  | --alpha(var(--color-white) / 40%)        |
| --color-states-on-fill-disabled                 | --alpha(var(--color-white) / 40%)        |
| --color-states-primary-default-alt              | --alpha(var(--color-slate-500) / 6%)     |
| --color-states-primary-hover                    | --alpha(var(--color-slate-500) / 8%)     |
| --color-states-primary-pressed                  | --alpha(var(--color-slate-500) / 16%)    |
| --color-states-primary-active                   | --alpha(var(--color-slate-500) / 10%)    |
| --color-states-primary-alt-default-alt          | --alpha(var(--color-white) / 6%)         |
| --color-states-primary-alt-hover                | --alpha(var(--color-white) / 8%)         |
| --color-states-primary-alt-pressed              | --alpha(var(--color-white) / 16%)        |
| --color-states-primary-alt-active               | --alpha(var(--color-white) / 12%)        |
| --color-states-brand-default-alt                | --alpha(var(--color-w-orange-500) / 6%)  |
| --color-states-brand-hover                      | --alpha(var(--color-w-orange-500) / 8%)  |
| --color-states-brand-pressed                    | --alpha(var(--color-w-orange-500) / 16%) |
| --color-states-brand-active                     | --alpha(var(--color-w-orange-500) / 12%) |
| --color-states-danger-default-alt               | --alpha(var(--color-red-500) / 6%)       |
| --color-states-danger-hover                     | --alpha(var(--color-red-500) / 8%)       |
| --color-states-danger-pressed                   | --alpha(var(--color-red-500) / 16%)      |
| --color-states-danger-active                    | --alpha(var(--color-red-500) / 12%)      |
| --color-states-warning-default-alt              | --alpha(var(--color-amber-500) / 6%)     |
| --color-states-warning-hover                    | --alpha(var(--color-amber-500) / 8%)     |
| --color-states-warning-pressed                  | --alpha(var(--color-amber-500) / 16%)    |
| --color-states-warning-active                   | --alpha(var(--color-amber-500) / 12%)    |
| --color-states-success-default-alt              | --alpha(var(--color-green-500) / 6%)     |
| --color-states-success-hover                    | --alpha(var(--color-green-500) / 8%)     |
| --color-states-success-pressed                  | --alpha(var(--color-green-500) / 16%)    |
| --color-states-success-active                   | --alpha(var(--color-green-500) / 12%)    |
| --color-states-info-default-alt                 | --alpha(var(--color-blue-500) / 6%)      |
| --color-states-info-hover                       | --alpha(var(--color-blue-500) / 8%)      |
| --color-states-info-pressed                     | --alpha(var(--color-blue-500) / 16%)     |
| --color-states-info-active                      | --alpha(var(--color-blue-500) / 12%)     |
| --color-states-ai-default-alt                   | --alpha(var(--color-purple-500) / 6%)    |
| --color-states-ai-hover                         | --alpha(var(--color-purple-500) / 8%)    |
| --color-states-ai-pressed                       | --alpha(var(--color-purple-500) / 16%)   |
| --color-states-ai-active                        | --alpha(var(--color-purple-500) / 12%)   |
| --color-component-outline-button-bg             | var(--color-white)                       |
| --color-component-input-bg                      | var(--color-white)                       |
| --color-component-switcher-bg                   | var(--color-slate-200)                   |
| --color-component-border-hotkey                 | var(--color-slate-200)                   |
| --color-component-border-input-hover            | var(--color-slate-400)                   |
| --color-component-overlay                       | --alpha(var(--color-slate-600) / 60%)    |
| --color-component-tooltip-bg                    | --alpha(var(--color-slate-950) / 80%)    |
| --color-component-logo-ic                       | var(--color-w-orange-600)                |
| --color-component-logo-wordmark                 | var(--color-slate-950)                   |
| --color-component-logo-wordmark-alt             | var(--color-white)                       |
| --color-component-kbi-tooltip-bg                | --alpha(var(--color-white) / 20%)        |
| --color-component-dialog-overlay                | --alpha(var(--color-white) / 60%)        |
| --color-component-avatar-overlay                | --alpha(var(--color-white) / 80%)        |
| --color-component-code-snippet-bg               | --alpha(var(--color-slate-500) / 6%)     |
| --color-component-toast-bg                      | var(--color-slate-800)                   |
| --color-component-toast-ic-destructive          | var(--color-red-400)                     |
| --color-component-toast-ic-warning              | var(--color-amber-400)                   |
| --color-component-toast-ic-success              | var(--color-green-400)                   |
| --color-component-toast-ic-info                 | var(--color-blue-400)                    |
| --color-component-app-shell-bg                  | var(--color-slate-100)                   |
| --color-component-app-shell-bg-branded          | var(--color-w-orange-50)                 |
| --color-component-app-shell-ambient-dot         | --alpha(var(--color-slate-500) / 28%)    |
| --color-component-empty-state-medallion-bg-from | var(--color-white)                       |
| --color-component-empty-state-medallion-bg-to   | --alpha(var(--color-slate-100) / 80%)    |
| --color-component-empty-state-medallion-border  | --alpha(var(--color-slate-300) / 70%)    |
| --color-syntax-no-syntax                        | var(--color-slate-900)                   |
| --color-syntax-keyword                          | var(--color-purple-600)                  |
| --color-syntax-function                         | var(--color-blue-600)                    |
| --color-syntax-string                           | var(--color-green-600)                   |
| --color-syntax-number-boolean                   | var(--color-amber-700)                   |
| --color-syntax-tag                              | var(--color-red-600)                     |
| --color-syntax-attribute                        | var(--color-amber-700)                   |
| --color-syntax-comment                          | var(--color-slate-400)                   |
| --color-syntax-type                             | var(--color-yellow-700)                  |
| --color-syntax-operator                         | var(--color-slate-700)                   |
| --color-syntax-variable                         | var(--color-red-600)                     |
| --color-syntax-number                           | var(--color-syntax-number-boolean)       |
| --color-syntax-boolean                          | var(--color-syntax-keyword)              |
| --color-syntax-constant                         | var(--color-syntax-keyword)              |
| --color-syntax-builtin                          | var(--color-syntax-keyword)              |
| --color-syntax-class-name                       | var(--color-syntax-type)                 |
| --color-syntax-property                         | var(--color-syntax-variable)             |
| --color-syntax-attr-name                        | var(--color-syntax-attribute)            |
| --color-syntax-attr-value                       | var(--color-syntax-string)               |
| --color-syntax-regex                            | var(--color-syntax-string)               |
| --color-syntax-punctuation                      | var(--color-syntax-operator)             |
| --color-syntax-highlight-neutral-code           | var(--color-slate-900)                   |
| --color-syntax-highlight-neutral-indicator      | var(--color-slate-600)                   |
| --color-syntax-highlight-neutral-highlight      | --alpha(var(--color-slate-500) / 6%)     |
| --color-syntax-highlight-selected-code          | var(--color-white)                       |
| --color-syntax-highlight-selected-highlight     | var(--color-slate-950)                   |
| --color-syntax-highlight-error-code             | var(--color-red-600)                     |
| --color-syntax-highlight-error-indicator        | var(--color-red-600)                     |
| --color-syntax-highlight-error-highlight        | --alpha(var(--color-red-500) / 6%)       |
| --color-syntax-highlight-warning-code           | var(--color-amber-700)                   |
| --color-syntax-highlight-warning-indicator      | var(--color-amber-600)                   |
| --color-syntax-highlight-warning-highlight      | --alpha(var(--color-amber-500) / 6%)     |
| --color-syntax-highlight-info-code              | var(--color-blue-600)                    |
| --color-syntax-highlight-info-indicator         | var(--color-blue-600)                    |
| --color-syntax-highlight-info-highlight         | --alpha(var(--color-blue-500) / 6%)      |
| --color-syntax-highlight-success-code           | var(--color-green-600)                   |
| --color-syntax-highlight-success-indicator      | var(--color-green-600)                   |
| --color-syntax-highlight-success-highlight      | --alpha(var(--color-green-500) / 6%)     |
| --color-syntax-highlight-brand-code             | var(--color-w-orange-600)                |
| --color-syntax-highlight-brand-indicator        | var(--color-w-orange-600)                |
| --color-syntax-highlight-brand-highlight        | --alpha(var(--color-w-orange-500) / 6%)  |
| --color-syntax-highlight-ai-code                | var(--color-purple-600)                  |
| --color-syntax-highlight-ai-indicator           | var(--color-purple-600)                  |
| --color-syntax-highlight-ai-highlight           | --alpha(var(--color-purple-500) / 6%)    |
| --color-badge-on-solid                          | --alpha(var(--color-white) / 95%)        |
| --color-badge-badge-bg                          | var(--color-white)                       |
| --color-badge-label-primary                     | var(--color-slate-700)                   |
| --color-badge-slate-light                       | var(--color-slate-100)                   |
| --color-badge-slate-strong                      | var(--color-slate-700)                   |
| --color-badge-slate-dark                        | var(--color-slate-700)                   |
| --color-badge-slate-dark-alt                    | var(--color-slate-500)                   |
| --color-badge-gray-light                        | var(--color-gray-100)                    |
| --color-badge-gray-strong                       | var(--color-gray-700)                    |
| --color-badge-gray-dark                         | var(--color-gray-700)                    |
| --color-badge-gray-dark-alt                     | var(--color-gray-500)                    |
| --color-badge-zinc-light                        | var(--color-zinc-100)                    |
| --color-badge-zinc-strong                       | var(--color-zinc-700)                    |
| --color-badge-zinc-dark                         | var(--color-zinc-700)                    |
| --color-badge-zinc-dark-alt                     | var(--color-zinc-500)                    |
| --color-badge-neutral-light                     | var(--color-neutral-100)                 |
| --color-badge-neutral-strong                    | var(--color-neutral-700)                 |
| --color-badge-neutral-dark                      | var(--color-neutral-700)                 |
| --color-badge-neutral-dark-alt                  | var(--color-neutral-500)                 |
| --color-badge-stone-light                       | var(--color-stone-100)                   |
| --color-badge-stone-strong                      | var(--color-stone-700)                   |
| --color-badge-stone-dark                        | var(--color-stone-700)                   |
| --color-badge-stone-dark-alt                    | var(--color-stone-500)                   |
| --color-badge-red-light                         | var(--color-red-100)                     |
| --color-badge-red-strong                        | var(--color-red-500)                     |
| --color-badge-red-dark                          | var(--color-red-800)                     |
| --color-badge-w-orange-light                    | var(--color-w-orange-100)                |
| --color-badge-w-orange-strong                   | var(--color-w-orange-500)                |
| --color-badge-w-orange-dark                     | var(--color-w-orange-800)                |
| --color-badge-amber-light                       | var(--color-amber-100)                   |
| --color-badge-amber-strong                      | var(--color-amber-500)                   |
| --color-badge-amber-dark                        | var(--color-amber-800)                   |
| --color-badge-yellow-light                      | var(--color-yellow-100)                  |
| --color-badge-yellow-strong                     | var(--color-yellow-500)                  |
| --color-badge-yellow-dark                       | var(--color-yellow-800)                  |
| --color-badge-lime-light                        | var(--color-lime-100)                    |
| --color-badge-lime-strong                       | var(--color-lime-500)                    |
| --color-badge-lime-dark                         | var(--color-lime-800)                    |
| --color-badge-green-light                       | var(--color-green-100)                   |
| --color-badge-green-strong                      | var(--color-green-500)                   |
| --color-badge-green-dark                        | var(--color-green-800)                   |
| --color-badge-emerald-light                     | var(--color-emerald-100)                 |
| --color-badge-emerald-strong                    | var(--color-emerald-500)                 |
| --color-badge-emerald-dark                      | var(--color-emerald-800)                 |
| --color-badge-teal-light                        | var(--color-teal-100)                    |
| --color-badge-teal-strong                       | var(--color-teal-500)                    |
| --color-badge-teal-dark                         | var(--color-teal-800)                    |
| --color-badge-cyan-light                        | var(--color-cyan-100)                    |
| --color-badge-cyan-strong                       | var(--color-cyan-500)                    |
| --color-badge-cyan-dark                         | var(--color-cyan-800)                    |
| --color-badge-sky-light                         | var(--color-sky-100)                     |
| --color-badge-sky-strong                        | var(--color-sky-500)                     |
| --color-badge-sky-dark                          | var(--color-sky-800)                     |
| --color-badge-blue-light                        | var(--color-blue-100)                    |
| --color-badge-blue-strong                       | var(--color-blue-500)                    |
| --color-badge-blue-dark                         | var(--color-blue-800)                    |
| --color-badge-indigo-light                      | var(--color-indigo-100)                  |
| --color-badge-indigo-strong                     | var(--color-indigo-500)                  |
| --color-badge-indigo-dark                       | var(--color-indigo-800)                  |
| --color-badge-violet-light                      | var(--color-violet-100)                  |
| --color-badge-violet-strong                     | var(--color-violet-500)                  |
| --color-badge-violet-dark                       | var(--color-violet-800)                  |
| --color-badge-purple-light                      | var(--color-purple-100)                  |
| --color-badge-purple-strong                     | var(--color-purple-500)                  |
| --color-badge-purple-dark                       | var(--color-purple-800)                  |
| --color-badge-fuchsia-light                     | var(--color-fuchsia-100)                 |
| --color-badge-fuchsia-strong                    | var(--color-fuchsia-500)                 |
| --color-badge-fuchsia-dark                      | var(--color-fuchsia-800)                 |
| --color-badge-pink-light                        | var(--color-pink-100)                    |
| --color-badge-pink-strong                       | var(--color-pink-500)                    |
| --color-badge-pink-dark                         | var(--color-pink-800)                    |
| --color-badge-rose-light                        | var(--color-rose-100)                    |
| --color-badge-rose-strong                       | var(--color-rose-500)                    |
| --color-badge-rose-dark                         | var(--color-rose-800)                    |
| --color-data-viz-1                              | #ffffff                                  |
| --temp-token                                    | #ffffff                                  |

## Semantic Dark

| Token                                           | Value                                    |
| ----------------------------------------------- | ---------------------------------------- |
| --color-text-primary                            | var(--color-slate-50)                    |
| --color-text-primary-alt                        | var(--color-slate-900)                   |
| --color-text-primary-fixed                      | var(--color-slate-900)                   |
| --color-text-primary-alt-fixed                  | var(--color-white)                       |
| --color-text-secondary                          | --alpha(var(--color-slate-50) / 80%)     |
| --color-text-secondary-alt                      | var(--color-slate-700)                   |
| --color-text-tertiary                           | --alpha(var(--color-slate-50) / 40%)     |
| --color-text-tertiary-alt                       | var(--color-slate-600)                   |
| --color-text-hint                               | --alpha(var(--color-slate-50) / 40%)     |
| --color-text-brand                              | var(--color-w-orange-300)                |
| --color-text-danger                             | var(--color-red-300)                     |
| --color-text-warning                            | var(--color-amber-300)                   |
| --color-text-success                            | var(--color-green-300)                   |
| --color-text-info                               | var(--color-blue-300)                    |
| --color-text-ai                                 | var(--color-purple-300)                  |
| --color-text-disable-primary                    | --alpha(var(--color-slate-50) / 40%)     |
| --color-text-disable-primary-alt                | --alpha(var(--color-slate-900) / 40%)    |
| --color-text-disable-brand                      | --alpha(var(--color-w-orange-300) / 60%) |
| --color-text-disable-danger                     | --alpha(var(--color-red-300) / 60%)      |
| --color-text-disable-warning                    | --alpha(var(--color-amber-300) / 60%)    |
| --color-text-disable-succes                     | --alpha(var(--color-green-300) / 60%)    |
| --color-text-disable-info                       | --alpha(var(--color-blue-300) / 60%)     |
| --color-text-disable-ai                         | --alpha(var(--color-purple-300) / 60%)   |
| --color-text-link-default                       | var(--color-blue-300)                    |
| --color-text-link-hover                         | var(--color-blue-200)                    |
| --color-text-link-default-alt                   | var(--color-blue-600)                    |
| --color-text-link-hover-alt                     | var(--color-blue-800)                    |
| --color-icon-primary                            | var(--color-slate-50)                    |
| --color-icon-primary-alt                        | var(--color-slate-900)                   |
| --color-icon-primary-alt-fixed                  | var(--color-white)                       |
| --color-icon-primary-disable                    | --alpha(var(--color-slate-50) / 40%)     |
| --color-icon-primary-alt-disable                | --alpha(var(--color-slate-900) / 40%)    |
| --color-icon-secondary                          | --alpha(var(--color-slate-50) / 80%)     |
| --color-icon-secondary-alt                      | var(--color-slate-500)                   |
| --color-icon-brand                              | var(--color-w-orange-300)                |
| --color-icon-danger                             | var(--color-red-300)                     |
| --color-icon-warning                            | var(--color-amber-300)                   |
| --color-icon-success                            | var(--color-green-300)                   |
| --color-icon-info                               | var(--color-blue-300)                    |
| --color-icon-ai                                 | var(--color-purple-300)                  |
| --color-bg-page-bg                              | var(--color-slate-950)                   |
| --color-bg-surface-1                            | #0d1123                                  |
| --color-bg-surface-2                            | #141829                                  |
| --color-bg-surface-3                            | #1b1f30                                  |
| --color-bg-surface-4                            | #1f2334                                  |
| --color-bg-surface-5                            | #262a3b                                  |
| --color-bg-primary                              | #262a3b                                  |
| --color-bg-light-primary                        | #1b1f30                                  |
| --color-bg-strong-primary                       | #333848                                  |
| --color-bg-brand                                | #25131c                                  |
| --color-bg-light-brand                          | #160e1a                                  |
| --color-bg-strong-brand                         | #3a1b1e                                  |
| --color-bg-danger                               | #220516                                  |
| --color-bg-light-danger                         | #140617                                  |
| --color-bg-strong-danger                        | #340515                                  |
| --color-bg-warning                              | #251b15                                  |
| --color-bg-light-warning                        | #161216                                  |
| --color-bg-strong-warning                       | #392713                                  |
| --color-bg-success                              | #022120                                  |
| --color-bg-light-success                        | #02161c                                  |
| --color-bg-strong-success                       | #023124                                  |
| --color-bg-info                                 | #081738                                  |
| --color-bg-light-info                           | #05102a                                  |
| --color-bg-strong-info                          | #0b214b                                  |
| --color-bg-ai                                   | #1a0f38                                  |
| --color-bg-light-ai                             | #100b2a                                  |
| --color-bg-strong-ai                            | #28144b                                  |
| --color-bg-fill-brand                           | var(--color-w-orange-400)                |
| --color-bg-fill-danger                          | var(--color-red-400)                     |
| --color-bg-fill-warning                         | var(--color-amber-400)                   |
| --color-bg-fill-success                         | var(--color-green-400)                   |
| --color-bg-fill-info                            | var(--color-blue-400)                    |
| --color-bg-fill-ai                              | var(--color-purple-400)                  |
| --color-border-primary                          | var(--color-slate-600)                   |
| --color-border-primary-light                    | var(--color-slate-700)                   |
| --color-border-strong-primary                   | var(--color-slate-400)                   |
| --color-focus-ring-primary                      | --alpha(var(--color-slate-400) / 30%)    |
| --color-border-brand                            | var(--color-w-orange-700)                |
| --color-border-strong-brand                     | var(--color-w-orange-600)                |
| --color-border-danger                           | var(--color-red-700)                     |
| --color-border-strong-danger                    | var(--color-red-500)                     |
| --color-border-warning                          | var(--color-amber-700)                   |
| --color-border-strong-warning                   | var(--color-amber-600)                   |
| --color-border-success                          | var(--color-green-700)                   |
| --color-border-strong-success                   | var(--color-green-500)                   |
| --color-border-info                             | var(--color-blue-700)                    |
| --color-border-strong-info                      | var(--color-blue-500)                    |
| --color-border-ai                               | var(--color-purple-700)                  |
| --color-border-strong-ai                        | var(--color-purple-500)                  |
| --color-states-default-all                      | --alpha(var(--color-slate-100) / 0%)     |
| --color-states-on-fill-hover                    | --alpha(var(--color-white) / 10%)        |
| --color-states-on-fill-pressed                  | --alpha(var(--color-white) / 40%)        |
| --color-states-on-fill-disabled                 | --alpha(var(--color-white) / 40%)        |
| --color-states-primary-default-alt              | --alpha(var(--color-slate-100) / 6%)     |
| --color-states-primary-hover                    | --alpha(var(--color-slate-100) / 8%)     |
| --color-states-primary-pressed                  | --alpha(var(--color-slate-100) / 16%)    |
| --color-states-primary-active                   | --alpha(var(--color-slate-100) / 12%)    |
| --color-states-primary-alt-default-alt          | --alpha(var(--color-slate-500) / 6%)     |
| --color-states-primary-alt-hover                | --alpha(var(--color-slate-500) / 8%)     |
| --color-states-primary-alt-pressed              | --alpha(var(--color-slate-500) / 16%)    |
| --color-states-primary-alt-active               | --alpha(var(--color-slate-500) / 12%)    |
| --color-states-brand-default-alt                | --alpha(var(--color-w-orange-300) / 6%)  |
| --color-states-brand-hover                      | --alpha(var(--color-w-orange-300) / 8%)  |
| --color-states-brand-pressed                    | --alpha(var(--color-w-orange-300) / 16%) |
| --color-states-brand-active                     | --alpha(var(--color-w-orange-300) / 12%) |
| --color-states-danger-default-alt               | --alpha(var(--color-red-300) / 6%)       |
| --color-states-danger-hover                     | --alpha(var(--color-red-300) / 8%)       |
| --color-states-danger-pressed                   | --alpha(var(--color-red-300) / 16%)      |
| --color-states-danger-active                    | --alpha(var(--color-red-300) / 12%)      |
| --color-states-warning-default-alt              | --alpha(var(--color-amber-300) / 6%)     |
| --color-states-warning-hover                    | --alpha(var(--color-amber-300) / 8%)     |
| --color-states-warning-pressed                  | --alpha(var(--color-amber-300) / 16%)    |
| --color-states-warning-active                   | --alpha(var(--color-amber-300) / 12%)    |
| --color-states-success-default-alt              | --alpha(var(--color-green-300) / 6%)     |
| --color-states-success-hover                    | --alpha(var(--color-green-300) / 8%)     |
| --color-states-success-pressed                  | --alpha(var(--color-green-300) / 16%)    |
| --color-states-success-active                   | --alpha(var(--color-green-300) / 12%)    |
| --color-states-info-default-alt                 | --alpha(var(--color-blue-300) / 6%)      |
| --color-states-info-hover                       | --alpha(var(--color-blue-300) / 8%)      |
| --color-states-info-pressed                     | --alpha(var(--color-blue-300) / 16%)     |
| --color-states-info-active                      | --alpha(var(--color-blue-300) / 12%)     |
| --color-states-ai-default-alt                   | --alpha(var(--color-purple-300) / 6%)    |
| --color-states-ai-hover                         | --alpha(var(--color-purple-300) / 8%)    |
| --color-states-ai-pressed                       | --alpha(var(--color-purple-300) / 16%)   |
| --color-states-ai-active                        | --alpha(var(--color-purple-300) / 12%)   |
| --color-component-outline-button-bg             | --alpha(var(--color-slate-200) / 5%)     |
| --color-component-input-bg                      | --alpha(var(--color-slate-200) / 5%)     |
| --color-component-switcher-bg                   | --alpha(var(--color-slate-50) / 30%)     |
| --color-component-border-hotkey                 | var(--color-slate-700)                   |
| --color-component-border-input-hover            | var(--color-slate-500)                   |
| --color-component-overlay                       | --alpha(var(--color-slate-950) / 60%)    |
| --color-component-tooltip-bg                    | --alpha(var(--color-slate-100) / 93%)    |
| --color-component-logo-ic                       | var(--color-w-orange-600)                |
| --color-component-logo-wordmark                 | var(--color-white)                       |
| --color-component-logo-wordmark-alt             | var(--color-slate-950)                   |
| --color-component-kbi-tooltip-bg                | --alpha(var(--color-slate-950) / 20%)    |
| --color-component-dialog-overlay                | --alpha(var(--color-slate-950) / 60%)    |
| --color-component-avatar-overlay                | --alpha(var(--color-slate-950) / 80%)    |
| --color-component-code-snippet-bg               | --alpha(var(--color-slate-300) / 12%)    |
| --color-component-toast-bg                      | var(--color-slate-100)                   |
| --color-component-toast-ic-destructive          | var(--color-red-600)                     |
| --color-component-toast-ic-warning              | var(--color-amber-600)                   |
| --color-component-toast-ic-success              | var(--color-green-600)                   |
| --color-component-toast-ic-info                 | var(--color-blue-600)                    |
| --color-component-app-shell-bg                  | var(--color-slate-975)                   |
| --color-component-app-shell-bg-branded          | #160e1a                                  |
| --color-component-app-shell-ambient-dot         | --alpha(var(--color-slate-50) / 15%)     |
| --color-component-empty-state-medallion-bg-from | --alpha(var(--color-white) / 7%)         |
| --color-component-empty-state-medallion-bg-to   | --alpha(var(--color-white) / 2%)         |
| --color-component-empty-state-medallion-border  | --alpha(var(--color-white) / 13%)        |
| --color-syntax-no-syntax                        | var(--color-slate-200)                   |
| --color-syntax-keyword                          | var(--color-purple-400)                  |
| --color-syntax-function                         | var(--color-blue-400)                    |
| --color-syntax-string                           | var(--color-green-300)                   |
| --color-syntax-number-boolean                   | var(--color-amber-300)                   |
| --color-syntax-tag                              | var(--color-red-400)                     |
| --color-syntax-attribute                        | var(--color-amber-300)                   |
| --color-syntax-comment                          | var(--color-slate-500)                   |
| --color-syntax-type                             | var(--color-yellow-300)                  |
| --color-syntax-operator                         | var(--color-slate-300)                   |
| --color-syntax-variable                         | var(--color-red-300)                     |
| --color-syntax-number                           | var(--color-syntax-number-boolean)       |
| --color-syntax-boolean                          | var(--color-syntax-keyword)              |
| --color-syntax-constant                         | var(--color-syntax-keyword)              |
| --color-syntax-builtin                          | var(--color-syntax-keyword)              |
| --color-syntax-class-name                       | var(--color-syntax-type)                 |
| --color-syntax-property                         | var(--color-syntax-variable)             |
| --color-syntax-attr-name                        | var(--color-syntax-attribute)            |
| --color-syntax-attr-value                       | var(--color-syntax-string)               |
| --color-syntax-regex                            | var(--color-syntax-string)               |
| --color-syntax-punctuation                      | var(--color-syntax-operator)             |
| --color-syntax-highlight-neutral-code           | var(--color-slate-200)                   |
| --color-syntax-highlight-neutral-indicator      | var(--color-slate-400)                   |
| --color-syntax-highlight-neutral-highlight      | --alpha(var(--color-slate-400) / 8%)     |
| --color-syntax-highlight-selected-code          | var(--color-slate-50)                    |
| --color-syntax-highlight-selected-highlight     | var(--color-slate-700)                   |
| --color-syntax-highlight-error-code             | var(--color-red-300)                     |
| --color-syntax-highlight-error-indicator        | var(--color-red-400)                     |
| --color-syntax-highlight-error-highlight        | --alpha(var(--color-red-400) / 8%)       |
| --color-syntax-highlight-warning-code           | var(--color-amber-300)                   |
| --color-syntax-highlight-warning-indicator      | var(--color-amber-400)                   |
| --color-syntax-highlight-warning-highlight      | var(--color-amber-400)                   |
| --color-syntax-highlight-info-code              | var(--color-blue-300)                    |
| --color-syntax-highlight-info-indicator         | var(--color-blue-400)                    |
| --color-syntax-highlight-info-highlight         | --alpha(var(--color-blue-400) / 8%)      |
| --color-syntax-highlight-success-code           | var(--color-green-300)                   |
| --color-syntax-highlight-success-indicator      | var(--color-green-400)                   |
| --color-syntax-highlight-success-highlight      | --alpha(var(--color-green-400) / 8%)     |
| --color-syntax-highlight-brand-code             | var(--color-w-orange-300)                |
| --color-syntax-highlight-brand-indicator        | var(--color-w-orange-400)                |
| --color-syntax-highlight-brand-highlight        | --alpha(var(--color-w-orange-400) / 8%)  |
| --color-syntax-highlight-ai-code                | var(--color-purple-300)                  |
| --color-syntax-highlight-ai-indicator           | var(--color-purple-400)                  |
| --color-syntax-highlight-ai-highlight           | --alpha(var(--color-purple-400) / 8%)    |
| --color-badge-on-solid                          | --alpha(var(--color-white) / 95%)        |
| --color-badge-badge-bg                          | var(--color-slate-900)                   |
| --color-badge-label-primary                     | var(--color-slate-200)                   |
| --color-badge-slate-light                       | var(--color-slate-800)                   |
| --color-badge-slate-strong                      | var(--color-slate-500)                   |
| --color-badge-slate-dark                        | var(--color-slate-300)                   |
| --color-badge-slate-dark-alt                    | var(--color-slate-400)                   |
| --color-badge-gray-light                        | var(--color-gray-900)                    |
| --color-badge-gray-strong                       | var(--color-gray-500)                    |
| --color-badge-gray-dark                         | var(--color-gray-300)                    |
| --color-badge-gray-dark-alt                     | var(--color-gray-400)                    |
| --color-badge-zinc-light                        | var(--color-zinc-900)                    |
| --color-badge-zinc-strong                       | var(--color-zinc-500)                    |
| --color-badge-zinc-dark                         | var(--color-zinc-300)                    |
| --color-badge-zinc-dark-alt                     | var(--color-zinc-400)                    |
| --color-badge-neutral-light                     | var(--color-neutral-900)                 |
| --color-badge-neutral-strong                    | var(--color-neutral-500)                 |
| --color-badge-neutral-dark                      | var(--color-neutral-300)                 |
| --color-badge-neutral-dark-alt                  | var(--color-neutral-400)                 |
| --color-badge-stone-light                       | var(--color-stone-900)                   |
| --color-badge-stone-strong                      | var(--color-stone-500)                   |
| --color-badge-stone-dark                        | var(--color-stone-300)                   |
| --color-badge-stone-dark-alt                    | var(--color-stone-400)                   |
| --color-badge-red-light                         | var(--color-red-950)                     |
| --color-badge-red-strong                        | var(--color-red-400)                     |
| --color-badge-red-dark                          | var(--color-red-300)                     |
| --color-badge-w-orange-light                    | var(--color-w-orange-950)                |
| --color-badge-w-orange-strong                   | var(--color-w-orange-400)                |
| --color-badge-w-orange-dark                     | var(--color-w-orange-300)                |
| --color-badge-amber-light                       | var(--color-amber-950)                   |
| --color-badge-amber-strong                      | var(--color-amber-400)                   |
| --color-badge-amber-dark                        | var(--color-amber-300)                   |
| --color-badge-yellow-light                      | var(--color-yellow-950)                  |
| --color-badge-yellow-strong                     | var(--color-yellow-400)                  |
| --color-badge-yellow-dark                       | var(--color-yellow-300)                  |
| --color-badge-lime-light                        | var(--color-lime-950)                    |
| --color-badge-lime-strong                       | var(--color-lime-400)                    |
| --color-badge-lime-dark                         | var(--color-lime-300)                    |
| --color-badge-green-light                       | var(--color-green-950)                   |
| --color-badge-green-strong                      | var(--color-green-400)                   |
| --color-badge-green-dark                        | var(--color-green-300)                   |
| --color-badge-emerald-light                     | var(--color-emerald-950)                 |
| --color-badge-emerald-strong                    | var(--color-emerald-400)                 |
| --color-badge-emerald-dark                      | var(--color-emerald-300)                 |
| --color-badge-teal-light                        | var(--color-teal-950)                    |
| --color-badge-teal-strong                       | var(--color-teal-400)                    |
| --color-badge-teal-dark                         | var(--color-teal-300)                    |
| --color-badge-cyan-light                        | var(--color-cyan-950)                    |
| --color-badge-cyan-strong                       | var(--color-cyan-400)                    |
| --color-badge-cyan-dark                         | var(--color-cyan-300)                    |
| --color-badge-sky-light                         | var(--color-sky-950)                     |
| --color-badge-sky-strong                        | var(--color-sky-400)                     |
| --color-badge-sky-dark                          | var(--color-sky-300)                     |
| --color-badge-blue-light                        | var(--color-blue-950)                    |
| --color-badge-blue-strong                       | var(--color-blue-400)                    |
| --color-badge-blue-dark                         | var(--color-blue-300)                    |
| --color-badge-indigo-light                      | var(--color-indigo-950)                  |
| --color-badge-indigo-strong                     | var(--color-indigo-400)                  |
| --color-badge-indigo-dark                       | var(--color-indigo-300)                  |
| --color-badge-violet-light                      | var(--color-violet-950)                  |
| --color-badge-violet-strong                     | var(--color-violet-400)                  |
| --color-badge-violet-dark                       | var(--color-violet-300)                  |
| --color-badge-purple-light                      | var(--color-purple-950)                  |
| --color-badge-purple-strong                     | var(--color-purple-400)                  |
| --color-badge-purple-dark                       | var(--color-purple-300)                  |
| --color-badge-fuchsia-light                     | var(--color-fuchsia-950)                 |
| --color-badge-fuchsia-strong                    | var(--color-fuchsia-400)                 |
| --color-badge-fuchsia-dark                      | var(--color-fuchsia-300)                 |
| --color-badge-pink-light                        | var(--color-pink-950)                    |
| --color-badge-pink-strong                       | var(--color-pink-400)                    |
| --color-badge-pink-dark                         | var(--color-pink-300)                    |
| --color-badge-rose-light                        | var(--color-rose-900)                    |
| --color-badge-rose-strong                       | var(--color-rose-400)                    |
| --color-badge-rose-dark                         | var(--color-rose-300)                    |
| --color-data-viz-1                              | #ffffff                                  |
| --temp-token                                    | #ffffff                                  |