Colors
Primitive palettes and the semantic colors components use. Values shown for light and dark mode.
Primitive palettes
Raw colors. Components never use these directly; they go through semantic tokens.
Blue
Gray
Amber
Green
Red
Pink
Purple
Indigo
Rose
Lime
Click a swatch to copy its CSS variable.
Content (text and icons)
| Token | Light | Dark | Alias |
|---|---|---|---|
--px-color-content-brand-default | #2563eb | #71717a | color-brand-500 |
--px-color-content-brand-hover | #1d4ed8 | #a1a1aa | color-brand-600 |
--px-color-content-brand-pressed | #1e40af | #d4d4d8 | color-brand-700 |
--px-color-content-neutral-primary | #101828 | #f4f4f5 | color-gray-900 |
--px-color-content-neutral-tertiary | #667085 | #8d8d94 | color-gray-500 |
--px-color-content-neutral-secondary | #475467 | #b4b4ba | color-gray-600 |
--px-color-content-neutral-placeholder | #667085 | #8d8d94 | color-gray-500 |
--px-color-content-danger-default | #b42318 | #fda29b | color-red-700 |
--px-color-content-danger-hover | #912018 | #fecdca | color-red-800 |
--px-color-content-danger-pressed | #7a271a | #fee4e2 | color-red-900 |
--px-color-content-success-default | #027a48 | #32d583 | color-green-700 |
--px-color-content-success-hover | #05603a | #6ce9a6 | color-green-800 |
--px-color-content-warning-default | #b54708 | #fdb022 | color-amber-700 |
--px-color-content-warning-hover | #93370d | #fec84b | color-amber-800 |
--px-color-content-info-default | #1d4ed8 | #93c5fd | color-blue-600 |
--px-color-content-info-hover | #1e40af | #bfdbfe | color-blue-700 |
--px-color-content-accent-blue | #1e40af | #93c5fd | color-blue-700 |
--px-color-content-accent-pink | #be195d | #f9a7d4 | color-pink-700 |
--px-color-content-accent-purple | #7e22ce | #d8b4fe | color-purple-700 |
--px-color-content-accent-indigo | #4338ca | #a5b4fd | color-indigo-700 |
--px-color-content-accent-rose | #be133c | #fda4af | color-rose-700 |
--px-color-content-accent-lime | #4d7c0f | #bef264 | color-lime-700 |
--px-color-content-accent-green | #027a48 | #6ce9a6 | color-green-700 |
--px-color-content-accent-red | #b42318 | #fda29b | color-red-700 |
--px-color-content-accent-amber | #b54708 | #fec84b | color-amber-700 |
--px-color-content-danger-disabled | #fda29b | #b42318 | color-red-300 |
--px-color-content-neutral-disabled | #98a2b3 | #4b4b51 | color-gray-400 |
--px-color-content-brand-disabled | #93c5fd | #18181b | color-brand-300 |
--px-color-content-static-black | #000000 | #000000 | color-black |
--px-color-content-on-color | #ffffff | #ffffff | color-white |
--px-color-content-on-warning | #101828 | #161618 | color-gray-900 |
--px-color-content-inverse | #ffffff | #161618 | color-white |
--px-color-content-static-white | #ffffff | #ffffff | color-white |
--px-color-content-link-default | #2563eb | #71717a | color-brand-500 |
--px-color-content-link-visited | #7e22ce | #d8b4fe | color-purple-700 |
--px-color-content-inverse-muted | #98a2b3 | #4b4b51 | color-gray-400 |
Background
| Token | Light | Dark | Alias |
|---|---|---|---|
--px-color-background-brand-default | #2563eb | #3f3f46 | color-brand-500 |
--px-color-background-brand-hover | #1d4ed8 | #27272a | color-brand-600 |
--px-color-background-brand-pressed | #1e40af | #18181b | color-brand-700 |
--px-color-background-brand-subtle | #eff6ff | #09090b | color-brand-50 |
--px-color-background-brand-subtle-hover | #dbeafe | #111113 | color-brand-100 |
--px-color-background-brand-subtle-pressed | #bfdbfe | #18181b | color-brand-200 |
--px-color-background-neutral-default | #f2f4f7 | #222225 | color-gray-100 |
--px-color-background-neutral-hover | #eaecf0 | #323236 | color-gray-200 |
--px-color-background-neutral-pressed | #d0d5dd | #4b4b51 | color-gray-300 |
--px-color-background-neutral-bold | #98a2b3 | #6b6b72 | color-gray-400 |
--px-color-background-neutral-bold-pressed | #667085 | #8d8d94 | color-gray-500 |
--px-color-background-danger-default | #d92d20 | #d92d20 | color-red-600 |
--px-color-background-danger-hover | #b42318 | #b42318 | color-red-700 |
--px-color-background-danger-pressed | #912018 | #912018 | color-red-800 |
--px-color-background-danger-subtle | #fef3f2 | #7a271a | color-red-50 |
--px-color-background-success-default | #027a48 | #027a48 | color-green-700 |
--px-color-background-success-hover | #05603a | #05603a | color-green-800 |
--px-color-background-success-pressed | #054f31 | #054f31 | color-green-900 |
--px-color-background-success-subtle | #ecfdf3 | #054f31 | color-green-50 |
--px-color-background-warning-default | #f79009 | #fdb022 | color-amber-500 |
--px-color-background-warning-hover | #fdb022 | #fec84b | color-amber-400 |
--px-color-background-warning-pressed | #dc6803 | #f79009 | color-amber-600 |
--px-color-background-warning-subtle | #fffaeb | #7a2e0e | color-amber-50 |
--px-color-background-info-default | #1d4ed8 | #2563eb | color-blue-600 |
--px-color-background-info-hover | #1e40af | #1d4ed8 | color-blue-700 |
--px-color-background-info-pressed | #1e3a8a | #1e40af | color-blue-800 |
--px-color-background-info-subtle | #eff6ff | #0f286f | color-blue-50 |
--px-color-background-accent-blue | #2563eb | #60a5fa | color-blue-500 |
--px-color-background-accent-pink | #ec4899 | #f471b7 | color-pink-500 |
--px-color-background-accent-purple | #a855f7 | #c084fc | color-purple-500 |
--px-color-background-accent-indigo | #6466f1 | #818cf8 | color-indigo-500 |
--px-color-background-accent-rose | #f43f5f | #fb7185 | color-rose-500 |
--px-color-background-accent-lime | #84cc16 | #a3e635 | color-lime-500 |
--px-color-background-accent-green | #12b76a | #32d583 | color-green-500 |
--px-color-background-accent-red | #f04438 | #f97066 | color-red-500 |
--px-color-background-accent-amber | #fdb022 | #fdb022 | color-amber-400 |
--px-color-background-danger-disabled | #fecdca | #912018 | color-red-200 |
--px-color-background-neutral-disabled | #eaecf0 | #222225 | color-gray-200 |
--px-color-background-brand-disabled | #bfdbfe | #111113 | color-brand-200 |
--px-color-background-scrim | #00000080 | #000000b3 | color-alpha-black-50 |
--px-color-background-static-black | #000000 | #000000 | color-black |
--px-color-background-static-white | #ffffff | #ffffff | color-white |
--px-color-background-gradient-brand-start | #f68b2e | #f68b2e | color-gradient-orange-100 |
--px-color-background-gradient-brand-end | #f6bb5c | #f6bb5c | color-gradient-orange-200 |
--px-color-background-gradient-accent-start | #fbd029 | #fbd029 | color-gradient-yellow-100 |
--px-color-background-gradient-accent-mid | #eacc81 | #eacc81 | color-gradient-yellow-200 |
--px-color-background-gradient-accent-end | #f0c966 | #f0c966 | color-gradient-yellow-300 |
--px-color-background-danger-subtle-hover | #fee4e2 | #912018 | color-red-100 |
--px-color-background-inverse-default | #101828 | #f4f4f5 | color-gray-900 |
--px-color-background-inverse-hover | #1d2939 | #d4d4d8 | color-gray-800 |
--px-color-background-inverse-pressed | #344054 | #b4b4ba | color-gray-700 |
--px-color-background-danger-subtle-pressed | #fecdca | #b42318 | color-red-200 |
Border
| Token | Light | Dark | Alias |
|---|---|---|---|
--px-color-border-brand-default | #2563eb | #71717a | color-brand-500 |
--px-color-border-brand-hover | #1d4ed8 | #a1a1aa | color-brand-600 |
--px-color-border-focus | #2563eb | #71717a | color-brand-500 |
--px-color-border-brand-pressed | #1e40af | #3f3f46 | color-brand-700 |
--px-color-border-brand-subtle | #bfdbfe | #111113 | color-brand-200 |
--px-color-border-neutral-default | #eaecf0 | #323236 | color-gray-200 |
--px-color-border-neutral-hover | #d0d5dd | #4b4b51 | color-gray-300 |
--px-color-border-neutral-subtle | #f2f4f7 | #222225 | color-gray-100 |
--px-color-border-neutral-strong | #667085 | #8d8d94 | color-gray-500 |
--px-color-border-neutral-bold | #344054 | #b4b4ba | color-gray-700 |
--px-color-border-danger-default | #f04438 | #f97066 | color-red-500 |
--px-color-border-danger-hover | #d92d20 | #fda29b | color-red-600 |
--px-color-border-danger-pressed | #b42318 | #f04438 | color-red-700 |
--px-color-border-danger-subtle | #fecdca | #912018 | color-red-200 |
--px-color-border-success-default | #12b76a | #32d583 | color-green-500 |
--px-color-border-success-hover | #039855 | #6ce9a6 | color-green-600 |
--px-color-border-success-pressed | #027a48 | #12b76a | color-green-700 |
--px-color-border-success-subtle | #a6f4c5 | #05603a | color-green-200 |
--px-color-border-warning-default | #f79009 | #fdb022 | color-amber-500 |
--px-color-border-warning-hover | #dc6803 | #fec84b | color-amber-600 |
--px-color-border-warning-pressed | #b54708 | #f79009 | color-amber-700 |
--px-color-border-warning-subtle | #fedf89 | #93370d | color-amber-200 |
--px-color-border-info-default | #2563eb | #60a5fa | color-blue-500 |
--px-color-border-info-hover | #1d4ed8 | #93c5fd | color-blue-600 |
--px-color-border-info-pressed | #1e40af | #2563eb | color-blue-700 |
--px-color-border-info-subtle | #bfdbfe | #1e3a8a | color-blue-200 |
--px-color-border-accent-blue | #2563eb | #60a5fa | color-blue-500 |
--px-color-border-accent-pink | #ec4899 | #f471b7 | color-pink-500 |
--px-color-border-accent-purple | #a855f7 | #c084fc | color-purple-500 |
--px-color-border-accent-indigo | #6466f1 | #818cf8 | color-indigo-500 |
--px-color-border-accent-rose | #f43f5f | #fb7185 | color-rose-500 |
--px-color-border-accent-lime | #84cc16 | #a3e635 | color-lime-500 |
--px-color-border-accent-green | #039855 | #32d583 | color-green-600 |
--px-color-border-danger-disabled | #fecdca | #7a271a | color-red-200 |
--px-color-border-neutral-disabled | #d0d5dd | #222225 | color-gray-300 |
--px-color-border-brand-disabled | #bfdbfe | #111113 | color-brand-200 |
--px-color-border-static-black | #000000 | #000000 | color-black |
--px-color-border-static-white | #ffffff | #ffffff | color-white |
--px-color-border-on-color-subtle | #ffffff4d | #ffffff4d | color-alpha-white-30 |
Surface
| Token | Light | Dark | Alias |
|---|---|---|---|
--px-color-surface-default | #ffffff | #111112 | color-white |
--px-color-surface-raised | #ffffff | #19191b | color-white |
--px-color-surface-sunken | #f9fafb | #0b0b0c | color-gray-50 |
--px-color-surface-overlay | #ffffff | #222225 | color-white |
--px-color-surface-inverse | #101828 | #f4f4f5 | color-gray-900 |
Shadow
| Token | Light | Dark | Alias |
|---|---|---|---|
--px-color-shadow-xs | #0000000a | #00000033 | color-alpha-black-4 |
--px-color-shadow-sm | #00000014 | #0000004d | color-alpha-black-8 |
--px-color-shadow-md | #0000001f | #00000066 | color-alpha-black-12 |
--px-color-shadow-lg | #00000029 | #00000080 | color-alpha-black-16 |
--px-color-shadow-xl | #00000033 | #00000099 | color-alpha-black-20 |
--px-color-shadow-2xl | #0000004d | #000000b3 | color-alpha-black-30 |