Tapsi Design System

Appearance

Color Tokens ​

The following tokens outline specific roles and usage guidelines for each color. From primary actions to background accents, they ensure optimal contrast, visual hierarchy, and accessibility throughout your interface.

JS UsageCSS TokenValue
tokens.color.brand--tapsi-color-brand
var(--tapsi-palette-orange-400)
tokens.color.gradient.brand--tapsi-color-gradient-brand
linear-gradient(91.39deg,#ff7733 0%,#ff5722 50.15%,#e64917 100%)
tokens.color.surface.black--tapsi-color-surface-black
var(--tapsi-palette-black)
tokens.color.surface.white--tapsi-color-surface-white
var(--tapsi-palette-white)
tokens.color.surface.primary--tapsi-color-surface-primary
var(--tapsi-palette-white)
tokens.color.surface.secondary--tapsi-color-surface-secondary
var(--tapsi-palette-gray-50)
tokens.color.surface.tertiary--tapsi-color-surface-tertiary
var(--tapsi-palette-gray-100)
tokens.color.surface.disabled--tapsi-color-surface-disabled
var(--tapsi-palette-gray-50)
tokens.color.surface.accent--tapsi-color-surface-accent
var(--tapsi-palette-blue-400)
tokens.color.surface["accent-light"]--tapsi-color-surface-accent-light
var(--tapsi-palette-blue-50)
tokens.color.surface.negative--tapsi-color-surface-negative
var(--tapsi-palette-red-400)
tokens.color.surface["negative-light"]--tapsi-color-surface-negative-light
var(--tapsi-palette-red-50)
tokens.color.surface.warning--tapsi-color-surface-warning
var(--tapsi-palette-yellow-400)
tokens.color.surface["warning-light"]--tapsi-color-surface-warning-light
var(--tapsi-palette-yellow-50)
tokens.color.surface.positive--tapsi-color-surface-positive
var(--tapsi-palette-green-400)
tokens.color.surface["positive-light"]--tapsi-color-surface-positive-light
var(--tapsi-palette-green-50)
tokens.color.surface["background-primary"]--tapsi-color-surface-background-primary
var(--tapsi-palette-gray-50)
tokens.color.surface["background-secondary"]--tapsi-color-surface-background-secondary
var(--tapsi-palette-gray-100)
tokens.color.surface["inverse-primary"]--tapsi-color-surface-inverse-primary
var(--tapsi-palette-black)
tokens.color.surface["inverse-secondary"]--tapsi-color-surface-inverse-secondary
var(--tapsi-palette-gray-700)
tokens.color.surface["overlay-dark"]--tapsi-color-surface-overlay-dark
#0000004d
tokens.color.surface["overlay-light"]--tapsi-color-surface-overlay-light
#0000001f
tokens.color.content.primary--tapsi-color-content-primary
var(--tapsi-palette-black)
tokens.color.content.secondary--tapsi-color-content-secondary
var(--tapsi-palette-gray-600)
tokens.color.content.tertiary--tapsi-color-content-tertiary
var(--tapsi-palette-gray-500)
tokens.color.content.disabled--tapsi-color-content-disabled
var(--tapsi-palette-gray-400)
tokens.color.content.accent--tapsi-color-content-accent
var(--tapsi-palette-blue-400)
tokens.color.content.negative--tapsi-color-content-negative
var(--tapsi-palette-red-400)
tokens.color.content.warning--tapsi-color-content-warning
var(--tapsi-palette-yellow-500)
tokens.color.content.positive--tapsi-color-content-positive
var(--tapsi-palette-green-400)
tokens.color.content["on-inverse"]--tapsi-color-content-on-inverse
var(--tapsi-palette-white)
tokens.color.content["on-brand"]--tapsi-color-content-on-brand
var(--tapsi-palette-white)
tokens.color.content["on-accent"]--tapsi-color-content-on-accent
var(--tapsi-palette-white)
tokens.color.content["on-negative"]--tapsi-color-content-on-negative
var(--tapsi-palette-white)
tokens.color.content["on-warning"]--tapsi-color-content-on-warning
var(--tapsi-palette-black)
tokens.color.content["on-positive"]--tapsi-color-content-on-positive
var(--tapsi-palette-white)
tokens.color.border.primary--tapsi-color-border-primary
var(--tapsi-palette-gray-200)
tokens.color.border.selected--tapsi-color-border-selected
var(--tapsi-palette-gray-700)
tokens.color.border.focus--tapsi-color-border-focus
var(--tapsi-palette-gray-700)
tokens.color.border.accent--tapsi-color-border-accent
var(--tapsi-palette-blue-200)
tokens.color.border.negative--tapsi-color-border-negative
var(--tapsi-palette-red-200)
tokens.color.border.positive--tapsi-color-border-positive
var(--tapsi-palette-green-200)
tokens.color.border.warning--tapsi-color-border-warning
var(--tapsi-palette-yellow-200)
tokens.color.border["inverse-primary"]--tapsi-color-border-inverse-primary
var(--tapsi-palette-gray-700)