Design token reference for the shared TapTidy visual system.

This page is auto-generated from the design token source and gives designers and engineers one place to inspect color, spacing, radius, and typography values without jumping into generated files.

Auto-generated reference Source: design-system/tokens.json Version 1.4.0

Color system

Color tokens

Auto-generated from design-system/tokens.json. Swatches are rendered inline for quick review.

Token	Value	Swatch
`light.primary`	`#10B981`
`light.primaryLight`	`#6EE7B7`
`light.primaryDark`	`#059669`
`light.primaryContrast`	`#022C22`
`light.accent`	`#F59E0B`
`light.accentLight`	`#FBBF24`
`light.accentDark`	`#D97706`
`light.accentContrast`	`#FFFFFF`
`light.surface`	`#FFFFFF`
`light.surfaceLight`	`#F9FAFB`
`light.surfaceDark`	`#F3F4F6`
`light.surfaceContrast`	`#1F2937`
`light.background`	`#FDFBF7`
`light.backgroundLight`	`#FFFFFF`
`light.backgroundDark`	`#F8F7F4`
`light.backgroundContrast`	`#111827`
`dark.primary`	`#10B981`
`dark.primaryLight`	`#6EE7B7`
`dark.primaryDark`	`#047857`
`dark.primaryContrast`	`#022C22`
`dark.accent`	`#F59E0B`
`dark.accentLight`	`#FBBF24`
`dark.accentDark`	`#D97706`
`dark.accentContrast`	`#000000`
`dark.surface`	`#1E293B`
`dark.surfaceLight`	`#334155`
`dark.surfaceDark`	`#0F172A`
`dark.surfaceContrast`	`#F1F5F9`
`dark.background`	`#0F172A`
`dark.backgroundLight`	`#1E293B`
`dark.backgroundDark`	`#020617`
`dark.backgroundContrast`	`#F8FAFC`
`priority.p1`	`#3B82F6`
`priority.p2`	`#FBBF24`
`priority.p3`	`#FB923C`
`priority.p4`	`#6B7280`
`semantic.surface.success`	`#ECFDF5`
`semantic.surface.warning`	`#FFFBEB`
`semantic.surface.danger`	`#FEF2F2`
`semantic.surface.info`	`#EFF6FF`
`semantic.text.muted`	`#64748B`
`semantic.text.subtle`	`#94A3B8`
`semantic.text.inverseMuted`	`#CBD5E1`
`semantic.border.strong`	`#334155`
`semantic.border.subtle`	`#CBD5E1`
`semantic.foreground.danger`	`#EF4444`
`semantic.foreground.dangerLight`	`#F87171`
`semantic.foreground.info`	`#60A5FA`
`semantic.foreground.infoLight`	`#93C5FD`
`semantic.foreground.roulette`	`#6366F1`
`semantic.sidebar.darkBg`	`#0D1A10`
`semantic.sidebar.activeText`	`#22C55E`
`semantic.ui.listDefault`	`#4F7EF8`
`semantic.ui.tagDefault`	`#22C55E`
`semantic.ui.shortcutInsights`	`#8B5CF6`
`v2.primary`	`#10B981`
`v2.primaryDark`	`#047857`
`v2.accent`	`#F59E0B`
`v2.danger`	`#EF4444`
`v2.info`	`#60A5FA`
`v2.borderSubtle`	`#CBD5E1`
`v2.borderSubtleDark`	`#334155`
`v2.surface.1`	`#F9FAFB`
`v2.surface.2`	`#F3F4F6`
`v2.surface.3`	`#FFFFFF`
`v2.surface.1Dark`	`#0F172A`
`v2.surface.2Dark`	`#1E293B`
`v2.surface.3Dark`	`#334155`
`v2.textMuted`	`#64748B`
`v2.textSubtle`	`#94A3B8`
`alpha.overlay`	`#00000080`
`alpha.overlaySoft`	`#00000066`
`alpha.overlayStrong`	`#00000099`
`alpha.scrimSurface`	`#0F172ACC`
`components.button.primaryBg`	`#10B981`
`components.button.primaryBgHover`	`#059669`
`components.button.primaryBgActive`	`#047857`
`components.button.primaryBgDisabled`	`#A7F3D0`
`components.button.primaryText`	`#FFFFFF`
`components.button.secondaryBg`	`#F3F4F6`
`components.button.secondaryBgHover`	`#E5E7EB`
`components.button.secondaryText`	`#1F2937`
`components.button.dangerBg`	`#EF4444`
`components.button.dangerBgHover`	`#DC2626`
`components.button.dangerText`	`#FFFFFF`
`components.input.bg`	`#FFFFFF`
`components.input.bgDisabled`	`#F3F4F6`
`components.input.border`	`#CBD5E1`
`components.input.borderFocus`	`#10B981`
`components.input.borderError`	`#EF4444`
`components.input.placeholder`	`#94A3B8`
`components.input.text`	`#1F2937`
`components.chip.bg`	`#F3F4F6`
`components.chip.bgSelected`	`#D1FAE5`
`components.chip.border`	`#E5E7EB`
`components.chip.text`	`#475569`
`components.chip.textSelected`	`#047857`
`componentsDark.button.primaryBg`	`#10B981`
`componentsDark.button.primaryBgHover`	`#34D399`
`componentsDark.button.primaryBgActive`	`#6EE7B7`
`componentsDark.button.primaryBgDisabled`	`#064E3B`
`componentsDark.button.primaryText`	`#022C22`
`componentsDark.button.secondaryBg`	`#334155`
`componentsDark.button.secondaryBgHover`	`#475569`
`componentsDark.button.secondaryText`	`#F1F5F9`
`componentsDark.button.dangerBg`	`#EF4444`
`componentsDark.button.dangerBgHover`	`#F87171`
`componentsDark.button.dangerText`	`#FFFFFF`
`componentsDark.input.bg`	`#1E293B`
`componentsDark.input.bgDisabled`	`#0F172A`
`componentsDark.input.border`	`#334155`
`componentsDark.input.borderFocus`	`#34D399`
`componentsDark.input.borderError`	`#F87171`
`componentsDark.input.placeholder`	`#64748B`
`componentsDark.input.text`	`#F1F5F9`
`componentsDark.chip.bg`	`#334155`
`componentsDark.chip.bgSelected`	`#064E3B`
`componentsDark.chip.border`	`#475569`
`componentsDark.chip.text`	`#CBD5E1`
`componentsDark.chip.textSelected`	`#6EE7B7`

Scale

Sizing and typography

These values are shared inputs for spacing, radii, and type hierarchy across TapTidy surfaces.

Token	Value
`xs`	`4px`
`sm`	`8px`
`md`	`16px`
`lg`	`24px`
`xl`	`32px`
`sm`	`0.375rem`
`md`	`0.5rem`
`lg`	`0.75rem`
`button`	`0.5rem`
`card`	`0.75rem`
`modal`	`1rem`
`displayLarge.fontSize`	`36px`
`displayLarge.fontWeight`	`700`
`displayLarge.lineHeight`	`44px`
`displayMedium.fontSize`	`30px`
`displayMedium.fontWeight`	`600`
`displayMedium.lineHeight`	`38px`
`displaySmall.fontSize`	`26px`
`displaySmall.fontWeight`	`600`
`displaySmall.lineHeight`	`34px`
`headlineLarge.fontSize`	`32px`
`headlineLarge.fontWeight`	`400`
`headlineLarge.lineHeight`	`40px`
`headlineMedium.fontSize`	`24px`
`headlineMedium.fontWeight`	`600`
`headlineMedium.lineHeight`	`32px`
`headlineSmall.fontSize`	`22px`
`headlineSmall.fontWeight`	`600`
`headlineSmall.lineHeight`	`30px`
`titleLarge.fontSize`	`20px`
`titleLarge.fontWeight`	`600`
`titleLarge.lineHeight`	`28px`
`titleMedium.fontSize`	`16px`
`titleMedium.fontWeight`	`500`
`titleMedium.lineHeight`	`24px`
`titleSmall.fontSize`	`14px`
`titleSmall.fontWeight`	`500`
`titleSmall.lineHeight`	`20px`
`bodyLarge.fontSize`	`18px`
`bodyLarge.fontWeight`	`400`
`bodyLarge.lineHeight`	`28px`
`body.fontSize`	`16px`
`body.fontWeight`	`400`
`body.lineHeight`	`24px`
`bodySmall.fontSize`	`14px`
`bodySmall.fontWeight`	`400`
`bodySmall.lineHeight`	`20px`
`labelLarge.fontSize`	`14px`
`labelLarge.fontWeight`	`500`
`labelLarge.lineHeight`	`20px`
`labelMedium.fontSize`	`12px`
`labelMedium.fontWeight`	`500`
`labelMedium.lineHeight`	`16px`
`labelSmall.fontSize`	`11px`
`labelSmall.fontWeight`	`500`
`labelSmall.lineHeight`	`16px`
`caption.fontSize`	`12px`
`caption.fontWeight`	`400`
`caption.lineHeight`	`16px`