TapTidy design token reference.

A script automatically generates this page from the design-token source. Designers and engineers can examine the color, spacing, radius, and typography values here. They do not need to open the generated files.

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

Read the Design System guide for token hierarchy, generation, and update-flow guidance.

Color system

Color tokens

This table is automatically generated from design-system/tokens.json. The page shows a color swatch for each token for quick review.

Token	Value	Swatch
`light.primary`	`#16B57F`
`light.primaryLight`	`#6FD6B2`
`light.primaryDark`	`#0F5A3A`
`light.primaryContrast`	`#0D1B2A`
`light.accent`	`#F59E0B`
`light.accentLight`	`#FBBF24`
`light.accentDark`	`#D97706`
`light.accentContrast`	`#0D1B2A`
`light.surface`	`#F7FAF9`
`light.surfaceLight`	`#FFFFFF`
`light.surfaceDark`	`#E3E7E6`
`light.surfaceContrast`	`#0D1B2A`
`light.background`	`#F7FAF9`
`light.backgroundLight`	`#FFFFFF`
`light.backgroundDark`	`#E3E7E6`
`light.backgroundContrast`	`#0D1B2A`
`dark.primary`	`#6FD6B2`
`dark.primaryLight`	`#A7F3D0`
`dark.primaryDark`	`#16B57F`
`dark.primaryContrast`	`#0D1B2A`
`dark.accent`	`#38BDF8`
`dark.accentLight`	`#7DD3FC`
`dark.accentDark`	`#0284C7`
`dark.accentContrast`	`#082F49`
`dark.surface`	`#142638`
`dark.surfaceLight`	`#1B3145`
`dark.surfaceDark`	`#0D1B2A`
`dark.surfaceContrast`	`#F7FAF9`
`dark.background`	`#0D1B2A`
`dark.backgroundLight`	`#142638`
`dark.backgroundDark`	`#08111B`
`dark.backgroundContrast`	`#F7FAF9`
`priority.p1`	`#38BDF8`
`priority.p2`	`#F59E0B`
`priority.p3`	`#D97706`
`priority.p4`	`#FF6B6B`
`priorityDark.p1`	`#7DD3FC`
`priorityDark.p2`	`#FBBF24`
`priorityDark.p3`	`#F59E0B`
`priorityDark.p4`	`#FF8585`
`roles.light.card`	`#FFFFFF`
`roles.light.overlay`	`#FFFFFF`
`roles.light.cardBorder`	`#E3E7E6`
`roles.light.divider`	`#E3E7E6`
`roles.light.textPrimary`	`#0D1B2A`
`roles.light.textSecondary`	`#66747C`
`roles.light.textFaint`	`#6B7A83`
`roles.light.brand`	`#0F5A3A`
`roles.light.onBrand`	`#FFFFFF`
`roles.light.brandTint`	`#D9F7EC`
`roles.light.destructive`	`#C93A3A`
`roles.light.success`	`#16B57F`
`roles.dark.card`	`#142638`
`roles.dark.overlay`	`#1B3145`
`roles.dark.cardBorder`	`#3A474D`
`roles.dark.divider`	`#3A474D`
`roles.dark.textPrimary`	`#F7FAF9`
`roles.dark.textSecondary`	`#D2DBD9`
`roles.dark.textFaint`	`#9BA9B0`
`roles.dark.brand`	`#6FD6B2`
`roles.dark.onBrand`	`#0D1B2A`
`roles.dark.brandTint`	`#123D32`
`roles.dark.destructive`	`#FF8585`
`roles.dark.success`	`#6FD6B2`
`gradients.primary.from`	`#16B57F`
`gradients.primary.to`	`#6FD6B2`
`gradients.forest.from`	`#0F5A3A`
`gradients.forest.to`	`#16B57F`
`gradients.softMint.from`	`#D9F7EC`
`gradients.softMint.to`	`#16B57F`
`semantic.surface.success`	`#D9F7EC`
`semantic.surface.warning`	`#FFF4E5`
`semantic.surface.danger`	`#FFE4E4`
`semantic.surface.info`	`#E0F2FE`
`semantic.text.muted`	`#66747C`
`semantic.text.subtle`	`#6B7A83`
`semantic.text.inverseMuted`	`#D2DBD9`
`semantic.border.strong`	`#2E2E33`
`semantic.border.subtle`	`#E3E7E6`
`semantic.foreground.danger`	`#FF6B6B`
`semantic.foreground.dangerLight`	`#FF9A9A`
`semantic.foreground.info`	`#38BDF8`
`semantic.foreground.infoLight`	`#7DD3FC`
`semantic.foreground.roulette`	`#8B5CF6`
`semantic.sidebar.darkBg`	`#0D1B2A`
`semantic.sidebar.activeText`	`#6FD6B2`
`semantic.ui.listDefault`	`#38BDF8`
`semantic.ui.tagDefault`	`#16B57F`
`semantic.ui.shortcutInsights`	`#8B5CF6`
`v2.primary`	`#16B57F`
`v2.primaryDark`	`#0F5A3A`
`v2.accent`	`#F59E0B`
`v2.danger`	`#FF6B6B`
`v2.info`	`#38BDF8`
`v2.borderSubtle`	`#E3E7E6`
`v2.borderSubtleDark`	`#3A474D`
`v2.surface.1`	`#F7FAF9`
`v2.surface.2`	`#E3E7E6`
`v2.surface.3`	`#FFFFFF`
`v2.surface.1Dark`	`#0D1B2A`
`v2.surface.2Dark`	`#142638`
`v2.surface.3Dark`	`#1B3145`
`v2.textMuted`	`#66747C`
`v2.textSubtle`	`#6B7A83`
`alpha.overlay`	`#00000080`
`alpha.overlaySoft`	`#00000066`
`alpha.overlayStrong`	`#00000099`
`alpha.scrimSurface`	`#121214CC`
`components.button.primaryBg`	`#0F5A3A`
`components.button.primaryBgHover`	`#0C4A30`
`components.button.primaryBgActive`	`#0D1B2A`
`components.button.primaryBgDisabled`	`#9BA9B0`
`components.button.primaryText`	`#FFFFFF`
`components.button.secondaryBg`	`#E3E7E6`
`components.button.secondaryBgHover`	`#D1D5DB`
`components.button.secondaryText`	`#0D1B2A`
`components.button.dangerBg`	`#FF6B6B`
`components.button.dangerBgHover`	`#EA6161`
`components.button.dangerText`	`#FFFFFF`
`components.input.bg`	`#FFFFFF`
`components.input.bgDisabled`	`#E3E7E6`
`components.input.border`	`#D2DBD9`
`components.input.borderFocus`	`#0F5A3A`
`components.input.borderError`	`#FF6B6B`
`components.input.placeholder`	`#6B7A83`
`components.input.text`	`#0D1B2A`
`components.chip.bg`	`#F7FAF9`
`components.chip.bgSelected`	`#D9F7EC`
`components.chip.border`	`#D2DBD9`
`components.chip.text`	`#66747C`
`components.chip.textSelected`	`#0F5A3A`
`components.surface.bg`	`#FFFFFF`
`components.surface.bgRaised`	`#F7FAF9`
`components.surface.border`	`#E3E7E6`
`components.surface.text`	`#0D1B2A`
`components.surface.textMuted`	`#66747C`
`components.navigation.bg`	`#FFFFFF`
`components.navigation.border`	`#E3E7E6`
`components.navigation.text`	`#66747C`
`components.navigation.textActive`	`#0F5A3A`
`components.navigation.activeBg`	`#D9F7EC`
`components.navigation.badgeBg`	`#F59E0B`
`components.navigation.badgeText`	`#0D1B2A`
`components.feedback.successBg`	`#D9F7EC`
`components.feedback.successText`	`#0F5A3A`
`components.feedback.warningBg`	`#FFF4E5`
`components.feedback.warningText`	`#7C4A03`
`components.feedback.errorBg`	`#FFF0F0`
`components.feedback.errorText`	`#C93A3A`
`components.feedback.infoBg`	`#E0F2FE`
`components.feedback.infoText`	`#075985`
`components.feedback.offlineBg`	`#FFF4E5`
`components.feedback.offlineText`	`#7C4A03`
`components.feedback.conflictBg`	`#F3E8FF`
`components.feedback.conflictText`	`#6D28D9`
`components.progress.track`	`#E3E7E6`
`components.progress.fill`	`#16B57F`
`components.progress.complete`	`#0F5A3A`
`components.calendar.todayBg`	`#D9F7EC`
`components.calendar.todayText`	`#0F5A3A`
`components.calendar.eventBg`	`#D9F7EC`
`components.calendar.eventText`	`#0F5A3A`
`components.calendar.externalBg`	`#E0F2FE`
`components.calendar.externalText`	`#075985`
`components.calendar.unscheduledBg`	`#FFF4E5`
`components.calendar.currentTime`	`#FF6B6B`
`components.habit.completed`	`#16B57F`
`components.habit.scheduled`	`#6FD6B2`
`components.habit.missed`	`#FF6B6B`
`components.habit.streak`	`#F59E0B`
`components.household.adult`	`#16B57F`
`components.household.child`	`#38BDF8`
`components.household.guest`	`#8B5CF6`
`components.household.avatarOverflow`	`#6B7A83`
`componentsDark.button.primaryBg`	`#6FD6B2`
`componentsDark.button.primaryBgHover`	`#8BE1C3`
`componentsDark.button.primaryBgActive`	`#16B57F`
`componentsDark.button.primaryBgDisabled`	`#4E5B61`
`componentsDark.button.primaryText`	`#0D1B2A`
`componentsDark.button.secondaryBg`	`#1B3145`
`componentsDark.button.secondaryBgHover`	`#29445C`
`componentsDark.button.secondaryText`	`#F7FAF9`
`componentsDark.button.dangerBg`	`#FF6B6B`
`componentsDark.button.dangerBgHover`	`#FF8585`
`componentsDark.button.dangerText`	`#FFFFFF`
`componentsDark.input.bg`	`#142638`
`componentsDark.input.bgDisabled`	`#0D1B2A`
`componentsDark.input.border`	`#3A474D`
`componentsDark.input.borderFocus`	`#6FD6B2`
`componentsDark.input.borderError`	`#FF8585`
`componentsDark.input.placeholder`	`#9BA9B0`
`componentsDark.input.text`	`#F7FAF9`
`componentsDark.chip.bg`	`#142638`
`componentsDark.chip.bgSelected`	`#123D32`
`componentsDark.chip.border`	`#3A474D`
`componentsDark.chip.text`	`#D2DBD9`
`componentsDark.chip.textSelected`	`#A7F3D0`
`componentsDark.surface.bg`	`#142638`
`componentsDark.surface.bgRaised`	`#1B3145`
`componentsDark.surface.border`	`#3A474D`
`componentsDark.surface.text`	`#F7FAF9`
`componentsDark.surface.textMuted`	`#D2DBD9`
`componentsDark.navigation.bg`	`#0D1B2A`
`componentsDark.navigation.border`	`#3A474D`
`componentsDark.navigation.text`	`#D2DBD9`
`componentsDark.navigation.textActive`	`#A7F3D0`
`componentsDark.navigation.activeBg`	`#123D32`
`componentsDark.navigation.badgeBg`	`#FBBF24`
`componentsDark.navigation.badgeText`	`#0D1B2A`
`componentsDark.feedback.successBg`	`#123D32`
`componentsDark.feedback.successText`	`#A7F3D0`
`componentsDark.feedback.warningBg`	`#3D2D0E`
`componentsDark.feedback.warningText`	`#FBBF24`
`componentsDark.feedback.errorBg`	`#402020`
`componentsDark.feedback.errorText`	`#FF9A9A`
`componentsDark.feedback.infoBg`	`#0C3548`
`componentsDark.feedback.infoText`	`#7DD3FC`
`componentsDark.feedback.offlineBg`	`#3D2D0E`
`componentsDark.feedback.offlineText`	`#FBBF24`
`componentsDark.feedback.conflictBg`	`#322356`
`componentsDark.feedback.conflictText`	`#C4B5FD`
`componentsDark.progress.track`	`#3A474D`
`componentsDark.progress.fill`	`#6FD6B2`
`componentsDark.progress.complete`	`#A7F3D0`
`componentsDark.calendar.todayBg`	`#123D32`
`componentsDark.calendar.todayText`	`#A7F3D0`
`componentsDark.calendar.eventBg`	`#123D32`
`componentsDark.calendar.eventText`	`#A7F3D0`
`componentsDark.calendar.externalBg`	`#0C3548`
`componentsDark.calendar.externalText`	`#7DD3FC`
`componentsDark.calendar.unscheduledBg`	`#3D2D0E`
`componentsDark.calendar.currentTime`	`#FF8585`
`componentsDark.habit.completed`	`#6FD6B2`
`componentsDark.habit.scheduled`	`#16B57F`
`componentsDark.habit.missed`	`#FF8585`
`componentsDark.habit.streak`	`#FBBF24`
`componentsDark.household.adult`	`#6FD6B2`
`componentsDark.household.child`	`#7DD3FC`
`componentsDark.household.guest`	`#C4B5FD`
`componentsDark.household.avatarOverflow`	`#9BA9B0`

Scale

Sizing and typography

All TapTidy platforms use these values for spacing, corner radii, and the typography scale.

Token	Value
`xs`	`4px`
`sm`	`8px`
`md`	`16px`
`lg`	`24px`
`xl`	`32px`
`radius.sm`	`0.5rem`
`radius.md`	`0.75rem`
`radius.lg`	`1rem`
`radius.button`	`0.75rem`
`radius.card`	`1rem`
`radius.modal`	`1.5rem`
`displayLarge.fontSize`	`36px`
`displayLarge.fontWeight`	`700`
`displayLarge.lineHeight`	`44px`
`displayMedium.fontSize`	`30px`
`displayMedium.fontWeight`	`700`
`displayMedium.lineHeight`	`38px`
`displaySmall.fontSize`	`26px`
`displaySmall.fontWeight`	`700`
`displaySmall.lineHeight`	`34px`
`headlineLarge.fontSize`	`32px`
`headlineLarge.fontWeight`	`700`
`headlineLarge.lineHeight`	`40px`
`headlineMedium.fontSize`	`24px`
`headlineMedium.fontWeight`	`700`
`headlineMedium.lineHeight`	`32px`
`headlineSmall.fontSize`	`22px`
`headlineSmall.fontWeight`	`700`
`headlineSmall.lineHeight`	`30px`
`titleLarge.fontSize`	`20px`
`titleLarge.fontWeight`	`500`
`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`