Accessibility Preferences
Override individual color tokens for any theme and mode. Changes are saved in your browser and apply immediately.
Default — LightActive
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f4f4f5 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #e4e4e7 | |
Primary Text --color-text-primary | #09090b | |
Secondary Text --color-text-secondary | #52525b | |
Accent --color-accent | #18181b | |
Accent Hover --color-accent-hover | #09090b | |
Accent Subtle --color-accent-subtle | #e4e4e7 | |
--color-bg-nav | #f4f4f5 | |
Focus Ring --color-ring-focus | #18181b | |
Focus Ring Offset --color-ring-offset | #ffffff |
Default — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #09090b | |
Card Background --color-bg-card | #18181b | |
Card Border --color-border-card | #27272a | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #a1a1aa | |
Accent --color-accent | #e4e4e7 | |
Accent Hover --color-accent-hover | #fafafa | |
Accent Subtle --color-accent-subtle | #27272a | |
--color-bg-nav | #09090b | |
Focus Ring --color-ring-focus | #e4e4e7 | |
Focus Ring Offset --color-ring-offset | #09090b |
Rosé — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #fff1f2 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #fecdd3 | |
Primary Text --color-text-primary | #2a0a0f | |
Secondary Text --color-text-secondary | #9f1239 | |
Accent --color-accent | #be123c | |
Accent Hover --color-accent-hover | #be123c | |
Accent Subtle --color-accent-subtle | #ffe4e6 | |
--color-bg-nav | #fff1f2 | |
Focus Ring --color-ring-focus | #e11d48 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Rosé — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #1a0a10 | |
Card Background --color-bg-card | #2d1520 | |
Card Border --color-border-card | #4a1d30 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #fda4af | |
Accent --color-accent | #fb7185 | |
Accent Hover --color-accent-hover | #fda4af | |
Accent Subtle --color-accent-subtle | #3d1525 | |
--color-bg-nav | #1a0a10 | |
Focus Ring --color-ring-focus | #fb7185 | |
Focus Ring Offset --color-ring-offset | #1a0a10 |
Rebecca Purple — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f3eef8 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #d8c8ed | |
Primary Text --color-text-primary | #1a0a2e | |
Secondary Text --color-text-secondary | #553080 | |
Accent --color-accent | #663399 | |
Accent Hover --color-accent-hover | #7c4dba | |
Accent Subtle --color-accent-subtle | #e8ddf5 | |
--color-bg-nav | #f3eef8 | |
Focus Ring --color-ring-focus | #663399 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Rebecca Purple — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #110a1f | |
Card Background --color-bg-card | #1c1230 | |
Card Border --color-border-card | #33245a | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #c4a8e0 | |
Accent --color-accent | #b794d6 | |
Accent Hover --color-accent-hover | #d1b8ec | |
Accent Subtle --color-accent-subtle | #211640 | |
--color-bg-nav | #110a1f | |
Focus Ring --color-ring-focus | #b794d6 | |
Focus Ring Offset --color-ring-offset | #110a1f |
Lilac — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #fefbce | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #e5d4ea | |
Primary Text --color-text-primary | #2c1b3a | |
Secondary Text --color-text-secondary | #5a3f70 | |
Accent --color-accent | #7d5499 | |
Accent Hover --color-accent-hover | #5f3f7a | |
Accent Subtle --color-accent-subtle | #f0e1f4 | |
--color-bg-nav | #fefbce | |
Focus Ring --color-ring-focus | #7d5499 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Lilac — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #2a1b3a | |
Card Background --color-bg-card | #372544 | |
Card Border --color-border-card | #5a3f70 | |
Primary Text --color-text-primary | #fefbce | |
Secondary Text --color-text-secondary | #e5d4ea | |
Accent --color-accent | #c8a2c9 | |
Accent Hover --color-accent-hover | #d9bce0 | |
Accent Subtle --color-accent-subtle | #3d2750 | |
--color-bg-nav | #2a1b3a | |
Focus Ring --color-ring-focus | #c8a2c9 | |
Focus Ring Offset --color-ring-offset | #2a1b3a |
Morning Butter — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #fbf2d8 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #dcc57c | |
Primary Text --color-text-primary | #1a2942 | |
Secondary Text --color-text-secondary | #3f5f8e | |
Accent --color-accent | #3f5f8e | |
Accent Hover --color-accent-hover | #2d466f | |
Accent Subtle --color-accent-subtle | #e5eef8 | |
--color-bg-nav | #fbf2d8 | |
Focus Ring --color-ring-focus | #3f5f8e | |
Focus Ring Offset --color-ring-offset | #ffffff |
Morning Butter — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #1a2942 | |
Card Background --color-bg-card | #25344d | |
Card Border --color-border-card | #3f5f8e | |
Primary Text --color-text-primary | #f3d98f | |
Secondary Text --color-text-secondary | #e2d5b8 | |
Accent --color-accent | #7298c7 | |
Accent Hover --color-accent-hover | #95b4d8 | |
Accent Subtle --color-accent-subtle | #25344d | |
--color-bg-nav | #1a2942 | |
Focus Ring --color-ring-focus | #7298c7 | |
Focus Ring Offset --color-ring-offset | #1a2942 |
Claude — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f8f8f7 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #e2e2e0 | |
Primary Text --color-text-primary | #1a1a1a | |
Secondary Text --color-text-secondary | #6b6b6b | |
Accent --color-accent | #a07850 | |
Accent Hover --color-accent-hover | #8c6844 | |
Accent Subtle --color-accent-subtle | #f2ede8 | |
--color-bg-nav | #f8f8f7 | |
Focus Ring --color-ring-focus | #c4956b | |
Focus Ring Offset --color-ring-offset | #ffffff |
Claude — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #191919 | |
Card Background --color-bg-card | #262626 | |
Card Border --color-border-card | #333333 | |
Primary Text --color-text-primary | #e8e8e8 | |
Secondary Text --color-text-secondary | #8b8b8b | |
Accent --color-accent | #c4956b | |
Accent Hover --color-accent-hover | #d4a57b | |
Accent Subtle --color-accent-subtle | #231f1b | |
--color-bg-nav | #191919 | |
Focus Ring --color-ring-focus | #c4956b | |
Focus Ring Offset --color-ring-offset | #191919 |
Claude v1 — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f5f0eb | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #e0d5c8 | |
Primary Text --color-text-primary | #141413 | |
Secondary Text --color-text-secondary | #7c4a2d | |
Accent --color-accent | #a84f2a | |
Accent Hover --color-accent-hover | #9c4726 | |
Accent Subtle --color-accent-subtle | #f0e4d8 | |
--color-bg-nav | #f5f0eb | |
Focus Ring --color-ring-focus | #d97757 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Claude v1 — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #1a1915 | |
Card Background --color-bg-card | #2d2b28 | |
Card Border --color-border-card | #3d3a35 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #d4a88a | |
Accent --color-accent | #e8956d | |
Accent Hover --color-accent-hover | #f0b090 | |
Accent Subtle --color-accent-subtle | #2a2420 | |
--color-bg-nav | #1a1915 | |
Focus Ring --color-ring-focus | #e8956d | |
Focus Ring Offset --color-ring-offset | #1a1915 |
Avocado — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f5f3eb | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #8c8668 | |
Primary Text --color-text-primary | #1a1f0a | |
Secondary Text --color-text-secondary | #4a5a20 | |
Accent --color-accent | #3d5c0f | |
Accent Hover --color-accent-hover | #345010 | |
Accent Subtle --color-accent-subtle | #e8e6d0 | |
--color-bg-nav | #f5f3eb | |
Focus Ring --color-ring-focus | #c05a0e | |
Focus Ring Offset --color-ring-offset | #ffffff |
Avocado — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #332A32 | |
Card Background --color-bg-card | #443c48 | |
Card Border --color-border-card | #5a5060 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #b5c882 | |
Accent --color-accent | #95bc48 | |
Accent Hover --color-accent-hover | #a8d055 | |
Accent Subtle --color-accent-subtle | #2a3028 | |
--color-bg-nav | #332A32 | |
Focus Ring --color-ring-focus | #E66E11 | |
Focus Ring Offset --color-ring-offset | #332A32 |
Moroccan — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f5ede0 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #8a7050 | |
Primary Text --color-text-primary | #1f1408 | |
Secondary Text --color-text-secondary | #8b4513 | |
Accent --color-accent | #9b2335 | |
Accent Hover --color-accent-hover | #7a1c2a | |
Accent Subtle --color-accent-subtle | #f0e0c8 | |
--color-bg-nav | #f5ede0 | |
Focus Ring --color-ring-focus | #b8860b | |
Focus Ring Offset --color-ring-offset | #ffffff |
Moroccan — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #1c1410 | |
Card Background --color-bg-card | #2d2218 | |
Card Border --color-border-card | #907050 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #dba86a | |
Accent --color-accent | #e8a84c | |
Accent Hover --color-accent-hover | #f0c070 | |
Accent Subtle --color-accent-subtle | #302010 | |
--color-bg-nav | #1c1410 | |
Focus Ring --color-ring-focus | #e8a84c | |
Focus Ring Offset --color-ring-offset | #1c1410 |
Provençal — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f5f0e8 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #8a8468 | |
Primary Text --color-text-primary | #1a1028 | |
Secondary Text --color-text-secondary | #5c6838 | |
Accent --color-accent | #6b4c8a | |
Accent Hover --color-accent-hover | #573d78 | |
Accent Subtle --color-accent-subtle | #ece5d8 | |
--color-bg-nav | #f5f0e8 | |
Focus Ring --color-ring-focus | #6b4c8a | |
Focus Ring Offset --color-ring-offset | #ffffff |
Provençal — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #161418 | |
Card Background --color-bg-card | #241e28 | |
Card Border --color-border-card | #786888 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #c8b898 | |
Accent --color-accent | #c8a0d8 | |
Accent Hover --color-accent-hover | #d8b8e8 | |
Accent Subtle --color-accent-subtle | #221828 | |
--color-bg-nav | #161418 | |
Focus Ring --color-ring-focus | #c8a0d8 | |
Focus Ring Offset --color-ring-offset | #161418 |
Kaiseki — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f4f1ec | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #8a8070 | |
Primary Text --color-text-primary | #141418 | |
Secondary Text --color-text-secondary | #5a6848 | |
Accent --color-accent | #2d6040 | |
Accent Hover --color-accent-hover | #1e4830 | |
Accent Subtle --color-accent-subtle | #e8e4d8 | |
--color-bg-nav | #f4f1ec | |
Focus Ring --color-ring-focus | #c06030 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Kaiseki — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #141210 | |
Card Background --color-bg-card | #201e1a | |
Card Border --color-border-card | #786858 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #b8c098 | |
Accent --color-accent | #88c498 | |
Accent Hover --color-accent-hover | #a0d8b0 | |
Accent Subtle --color-accent-subtle | #1c1a18 | |
--color-bg-nav | #141210 | |
Focus Ring --color-ring-focus | #d08050 | |
Focus Ring Offset --color-ring-offset | #141210 |
Tuscany — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f5f0e0 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #8a7858 | |
Primary Text --color-text-primary | #1f1510 | |
Secondary Text --color-text-secondary | #5c6030 | |
Accent --color-accent | #8b4520 | |
Accent Hover --color-accent-hover | #703818 | |
Accent Subtle --color-accent-subtle | #ede5d0 | |
--color-bg-nav | #f5f0e0 | |
Focus Ring --color-ring-focus | #8b4520 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Tuscany — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #18150e | |
Card Background --color-bg-card | #282418 | |
Card Border --color-border-card | #787050 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #c8b888 | |
Accent --color-accent | #d8a070 | |
Accent Hover --color-accent-hover | #e8b888 | |
Accent Subtle --color-accent-subtle | #201c14 | |
--color-bg-nav | #18150e | |
Focus Ring --color-ring-focus | #d8a070 | |
Focus Ring Offset --color-ring-offset | #18150e |
Oaxacan — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f4f0e8 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #787898 | |
Primary Text --color-text-primary | #1a1008 | |
Secondary Text --color-text-secondary | #4a4878 | |
Accent --color-accent | #b84820 | |
Accent Hover --color-accent-hover | #a03c18 | |
Accent Subtle --color-accent-subtle | #e8e0d0 | |
--color-bg-nav | #f4f0e8 | |
Focus Ring --color-ring-focus | #2d5a40 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Oaxacan — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #141018 | |
Card Background --color-bg-card | #201828 | |
Card Border --color-border-card | #786890 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #d0a868 | |
Accent --color-accent | #e8a048 | |
Accent Hover --color-accent-hover | #f0b868 | |
Accent Subtle --color-accent-subtle | #1c1420 | |
--color-bg-nav | #141018 | |
Focus Ring --color-ring-focus | #58b878 | |
Focus Ring Offset --color-ring-offset | #141018 |
Pompeii — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f2ede4 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #887868 | |
Primary Text --color-text-primary | #1a1210 | |
Secondary Text --color-text-secondary | #6a5040 | |
Accent --color-accent | #983028 | |
Accent Hover --color-accent-hover | #7c2820 | |
Accent Subtle --color-accent-subtle | #eae0d0 | |
--color-bg-nav | #f2ede4 | |
Focus Ring --color-ring-focus | #983028 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Pompeii — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #161210 | |
Card Background --color-bg-card | #241e1a | |
Card Border --color-border-card | #786050 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #c8a888 | |
Accent --color-accent | #e08870 | |
Accent Hover --color-accent-hover | #e8a090 | |
Accent Subtle --color-accent-subtle | #1e1810 | |
--color-bg-nav | #161210 | |
Focus Ring --color-ring-focus | #e08870 | |
Focus Ring Offset --color-ring-offset | #161210 |
Nordic — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f0f2f4 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #808890 | |
Primary Text --color-text-primary | #101418 | |
Secondary Text --color-text-secondary | #506070 | |
Accent --color-accent | #385880 | |
Accent Hover --color-accent-hover | #2c4868 | |
Accent Subtle --color-accent-subtle | #e4e8ec | |
--color-bg-nav | #f0f2f4 | |
Focus Ring --color-ring-focus | #a83030 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Nordic — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #10141a | |
Card Background --color-bg-card | #1a2028 | |
Card Border --color-border-card | #607080 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #a0b0c0 | |
Accent --color-accent | #88b0d0 | |
Accent Hover --color-accent-hover | #a0c0e0 | |
Accent Subtle --color-accent-subtle | #141820 | |
--color-bg-nav | #10141a | |
Focus Ring --color-ring-focus | #d86060 | |
Focus Ring Offset --color-ring-offset | #10141a |
Ottoman — Light
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #f0ede8 | |
Card Background --color-bg-card | #ffffff | |
Card Border --color-border-card | #707880 | |
Primary Text --color-text-primary | #181210 | |
Secondary Text --color-text-secondary | #3a5858 | |
Accent --color-accent | #186858 | |
Accent Hover --color-accent-hover | #105048 | |
Accent Subtle --color-accent-subtle | #e0e8e0 | |
--color-bg-nav | #f0ede8 | |
Focus Ring --color-ring-focus | #a87820 | |
Focus Ring Offset --color-ring-offset | #ffffff |
Ottoman — Dark
| Token | Default | Override |
|---|---|---|
Body Background --color-bg-body | #0e1418 | |
Card Background --color-bg-card | #182028 | |
Card Border --color-border-card | #507870 | |
Primary Text --color-text-primary | #fafafa | |
Secondary Text --color-text-secondary | #c8b070 | |
Accent --color-accent | #d4a840 | |
Accent Hover --color-accent-hover | #e0c060 | |
Accent Subtle --color-accent-subtle | #141c20 | |
--color-bg-nav | #0e1418 | |
Focus Ring --color-ring-focus | #58b8a0 | |
Focus Ring Offset --color-ring-offset | #0e1418 |