Skip to content
Pando Docs

Color - action

A palette representing actionable and interactive elements.

Text colors

Use with all instances of interactive element text

  • text-initial
  • Text color inside of interactive items
  • Use for: Buttons (filled, outline). Button icons

  • Token Name: action.text.initial

  • text-100
  • Inactive but actionable items and icons
  • Use for: Toggle (off). Tabs (inactive)

  • Token Name: action.text.100

  • text-200
  • Actionable text on its own
  • Use for: Buttons (text)

  • Token Name: action.text.200

  • text-inverse
  • Text on high-contrast interactive elements
  • Use for: Button icons (no-shape). Toggle (hover)

  • Token Name: action.text.inverse

Use with all instances of navigation text.

  • navigation-intial
  • Default link text color.
  • Use for: Any text link navigating to another page

  • Token Name: action.navigation.initial

  • navigation-hover
  • Text link hover state color
  • Use for: Hover state of navigation text links

  • Token Name: action.navigation.hover

  • navigation-visited
  • Text link visited state color
  • Use for: Visited state of navigation text links

  • Token Name: action.navigation.visited

Border colors

All borders of non-interactive interface items

  • border-initial
  • border color of interactive elements
  • Use for: Buttons (outline), Text/select fields, Radio/Checkbox, Toggle

  • Token Name: action.border.initial

  • border-focus
  • Outline border for focus state of elements
  • Use for: Focus outline of any element

  • Token Name: action.border.focus

Background colors

All color fills of interactive elements like avatar, skeleton, or progress

  • background-initial
  • Backgrounds for primary interactive elements
  • Use for: Hover state background for primary interactive elements

  • Token Name: action.bg.initial

  • background-hover
  • Hover state background for primary interactive elements
  • Use for: Buttons (hover)

  • Token Name: action.bg.hover

  • background-active
  • Backgrounds for primary interactive elements
  • Use for: Buttons (active)

  • Token Name: action.bg.active

  • background-100
  • Backgrounds for default interactive elements
  • Use for: Interactive card backgrounds, accordion backgrounds

  • Token Name: action.bg.100.initial

  • background-100-hover
  • Hover state background for default interactive elements
  • Use for: Interactive cards (hover), accordions (hover)

  • Token Name: action.bg.100.hover

  • background-100-active
  • Use for: Active state background for default interactive elements

  • Token Name: action.bg.100.active