Token reference
Every design decision in the system — 368 tokens, resolved across all four axis combinations. Switch axes to see how values change between light, dark, default, and bold.
TokenTypeReferenceValueUsed by
--color-neutral-50color
{color.warm-50}#FAFAF9
--color-neutral-100color
{color.warm-100}#F4F0EB
--color-neutral-200color
{color.warm-200}#E2DDD9
--color-neutral-300color
{color.warm-300}#C8C3BE
--color-neutral-400color
{color.warm-400}#A8A29E
--color-neutral-500color
{color.warm-500}#78716C
--color-neutral-600color
{color.warm-600}#57534E
--color-neutral-700color
{color.warm-700}#44403C
--color-neutral-800color
{color.warm-800}#292524
--color-neutral-900color
{color.warm-900}#1C1917
--color-surface-primarycolor
{color-neutral-50}#FAFAF9
CardDialogDrawerToast+6
--color-surface-secondarycolor
{color-neutral-100}#F4F0EB
CardAccordionPaginationTable+10
--color-surface-tertiarycolor
{color-neutral-200}#E2DDD9
DialogDrawerTableSwitch
--color-surface-inversecolor
{color-neutral-900}#1C1917
Tooltip
--color-text-primarycolor
{color.black}#0A0A0A
DialogDrawerToastAccordion+14
--color-text-secondarycolor
{color-neutral-600}#57534E
CardDialogDrawerToast+18
--color-text-inversecolor
{color-neutral-50}#FAFAF9
Tooltip
--color-accent-defaultcolor
{color-neutral-800}#292524
CardPaginationTableTabs+5
--color-accent-hovercolor
{color-neutral-900}#1C1917
Button
--color-accent-foregroundcolor
{color.white}#FFFFFF
PaginationButtonCheckboxSwitch+1
--color-border-defaultcolor
{color-neutral-200}#E2DDD9
CardDialogDrawerToast+10
--color-border-strongcolor
{color-neutral-400}#A8A29E
CardCheckboxInputRadio+3
--color-border-focuscolor
{color.black}#0A0A0A
AlertCardDialogDrawer+15
--color-curtaincolor
{color-neutral-300}#C8C3BE
--color-feedback-errorcolor
{feedback.error-500}#c0392b
InputLabelTextarea
--color-feedback-error-backgroundcolor
{feedback.error-50}#FEF2F2
AlertBadge
--color-feedback-error-foregroundcolor
{feedback.error-600}#a93226
AlertToastBadge
--color-feedback-error-bordercolor
{feedback.error-500}#c0392b
AlertToastBadge
--color-feedback-success-backgroundcolor
{feedback.success.50}#F0FDF4
AlertBadge
--color-feedback-success-foregroundcolor
{feedback.success.600}#15803D
AlertToastBadge
--color-feedback-success-bordercolor
{feedback.success.500}#16A34A
AlertToastBadge
--color-feedback-warning-backgroundcolor
{feedback.warning.50}#FFFBEB
AlertBadge
--color-feedback-warning-foregroundcolor
{feedback.warning.600}#B45309
AlertToastBadge
--color-feedback-warning-bordercolor
{feedback.warning.500}#D97706
AlertToastBadge
--color-feedback-info-backgroundcolor
{feedback.info.50}#EFF6FF
AlertBadge
--color-feedback-info-foregroundcolor
{feedback.info.600}#1D4ED8
AlertToastBadge
--color-feedback-info-bordercolor
{feedback.info.500}#2563EB
AlertToastBadge
--color-skeleton-basecolor
{color-neutral-200}#E2DDD9
Skeleton
--color-skeleton-highlightcolor
{color-neutral-100}#F4F0EB
Skeleton
--color-surface-spotlightcolor
{color-neutral-900}#1C1917
--color-text-frozen-primarycolor
{color.warm-900}#1C1917
--color-text-frozen-secondarycolor
{color.warm-600}#57534E
--color-accent-glowcolor
{color.teal-500-glow}#15616D33