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 | #09090b | |
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 | #09090b | |
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 |
Claude — 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 | #09090b | |
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 — 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 |