Tokens

The colour tokens, in Light and Dark, straight from tokens.json.

Background

Token	Light	Dark
`--bg-canvas`	#FAFAFA	#09090B
`--bg-card`	#FFFFFF	#121215
`--bg-field`	#FFFFFF	#1A1A1D
`--bg-popover`	#FFFFFF	#222225
`--bg-muted`	#F4F4F5	#27272A
`--bg-hover`	#F4F4F5	#27272A
`--bg-selected`	#E4E4E7	#343436
`--bg-card-fade`	#FFFFFF00	#12121500

Text

Token	Light	Dark
`--text-default`	#18181B	#FAFAFA
`--text-muted`	#71717A	#A1A1AA
`--text-subtle`	#A1A1AA	#71717A
`--text-placeholder`	#D4D4D8	#52525B
`--text-on-solid`	#FFFFFF	#FFFFFF
`--text-on-inverse`	#FAFAFA	#09090B

Border

Token	Light	Dark
`--border-default`	#E4E4E7	#2F2F32
`--border-subtle`	#F0F0F2	#262629
`--border-strong`	#D4D4D8	#3D3D3F
`--border-input`	#E4E4E7	#3D3D3F
`--border-focus`	#4633D7	#554FE7

Action

Token	Light	Dark
`--action-primary-bg`	#4633D7	#493DD6
`--action-primary-bg-hover`	#5146E9	#554FE7
`--action-primary-bg-pressed`	#3923B9	#3E2AC5
`--action-primary-border`	#9085E7	#928BE6
`--action-primary-glow`	#FFFFFF3D	#FFFFFF3D
`--action-primary-shadow`	#00000033	#00000066
`--action-secondary-bg`	#F4F4F5	#27272A
`--action-secondary-bg-hover`	#F4F4F5	#2B2B2D
`--action-secondary-bg-pressed`	#E4E4E7	#343436
`--action-destructive-bg`	#DC2626	#EF4444
`--action-destructive-bg-hover`	#EF4444	#F87171
`--action-destructive-bg-pressed`	#B91C1C	#DC2626
`--action-destructive-border`	#F87171	#FCA5A5
`--action-destructive-glow`	#FFFFFF3D	#FFFFFF3D
`--action-inverse-bg-hover`	#27272A	#E4E4E7
`--action-inverse-bg-pressed`	#09090B	#D4D4D8
`--action-inverse-border`	#71717A	#E4E4E7
`--action-inverse-glow`	#FFFFFF3D	#FFFFFF3D
`--action-inverse-bg`	#18181B	#FAFAFA
`--action-focus-ring`	#4633D733	#493DD633

Status

Token	Light	Dark
`--status-neutral-bg`	#F4F4F5	#27272A
`--status-neutral-border`	#E4E4E7	#2F2F32
`--status-neutral-fg`	#52525B	#D4D4D8
`--status-brand-bg`	#F3F5FF	#1F2132
`--status-brand-border`	#D9DEFB	#30344F
`--status-brand-fg`	#5158A0	#BEC7FC
`--status-sky-bg`	#EEF7FF	#152531
`--status-sky-border`	#CAE4F9	#1F394D
`--status-sky-fg`	#08669C	#A0D1F8
`--status-green-bg`	#EFF9F0	#17271B
`--status-green-border`	#CEE8D2	#243E29
`--status-green-fg`	#22723B	#A8D9B1
`--status-amber-bg`	#FFF3ED	#301E15
`--status-amber-border`	#F7D9C9	#4B2F20
`--status-amber-fg`	#93491A	#F4BDA0
`--status-red-bg`	#FFF3F1	#311D1A
`--status-red-border`	#F9D6D1	#4D2D29
`--status-red-fg`	#97433B	#F8B8B0
`--status-fuchsia-bg`	#FBF2FC	#2B1E2C
`--status-fuchsia-border`	#EED7EF	#432E45
`--status-fuchsia-fg`	#804785	#E3BAE7
`--status-plum-bg`	#FFF2F5	#301C21
`--status-plum-border`	#F8D5DC	#4C2C34
`--status-plum-fg`	#944059	#F6B7C5

Chart

Token	Light	Dark
`--chart-1`	#0D9488	#2DD4BF
`--chart-2`	#06B6D4	#22D3EE
`--chart-3`	#0284C7	#38BDF8
`--chart-4`	#6366F1	#818CF8
`--chart-5`	#8B5CF6	#A78BFA

Component

Token	Light	Dark
`--component-table-zebra`	#FAFAFA	#1A1A1D
`--component-table-header`	#FAFAFA	#121215
`--component-segmented-selected`	#E4E4E7	#343436
`--component-segmented-pressed`	#0000000D	#FFFFFF0F
`--component-rail-center`	#F0F0F2	#FFFFFF1A
`--component-rail-edge`	#F0F0F240	#FFFFFF08
`--component-highlight-hover-from`	#F0FDFA33	#042F2E33
`--component-highlight-hover-to`	#99F6E48C	#14B8A68C
`--component-highlight-surface-from`	#F0FDFA33	#042F2E33
`--component-highlight-surface-to`	#F0FDFA	#042F2E

Effect

Token	Light	Dark
`--effect-shadow-ambient`	#0000000F	#0000001F
`--effect-shadow-xs`	#0000000D	#0000001A
`--effect-shadow-sm`	#00000014	#00000029
`--effect-shadow-md`	#00000024	#00000047
`--effect-shadow-lg`	#0000002E	#0000005C
`--effect-highlight-top`	#FFFFFF00	#FFFFFF0F