Skip to content
Pando Docs

Color - neutral

A neutral palette for non-interactive elements and backgrounds.

Text colors

Use with all instances of non-interactive text

  • text-initial
  • Default baseline text style.
  • Use for: Body Copy, lists

  • Token Name: neutral.text.initial

  • text-100
  • Lowest emphasis text style
  • Use for: Input placeholders, footer text, supplemental descriptions

  • Token Name: neutral.text.100

  • text-200
  • More emphasis but not the highest
  • Use for: Examples, important supplemental or outstanding content

  • Token Name: neutral.text.200

  • text-300
  • Highest emphasis, to indicate a section heading, title, or form label
  • Use for: Headings, titles, form labels

  • Token Name: neutral.text.300

  • text-inverse
  • Use for: Button icons, Tooltips

  • Token Name: neutral.text.inverse

Border colors

All borders of non-interactive elements

  • border-initial
  • Default baseline border
  • Use for: most cases, e.g. card borders

  • Token Name: neutral.border.initial

  • border-100
  • Use for: Section breaks and horizontal rules

  • Token Name: neutral.border.100

  • border-200
  • Use for: Card border hover state

  • Token Name: neutral.border.200

Background colors

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

  • background
  • Backgrounds for non-interactive structural elements
  • Use for: content skeletons

  • Token Name: neutral.bg.initial

Surface colors

All color fills of non-interactive areas like pages, containers, or wrappers

  • surface-initial
  • Reserved for the "floor" of the page, or the lowest elevation surface
  • Use for: Page backgrounds

  • Token Name: neutral.surface.initial

  • surface-100
  • Used for navigation and "canvas" background colors
  • Use for: Top and side navigation, "canvas" containers for wrapping cards

  • Token Name: neutral.surface.100

  • surface-200
  • Section background colors
  • Use for: Page sections that require more emphasis

  • Token Name: neutral.surface.200

  • surface-300
  • Highest emphasis and contrast section background colors
  • Use for: Page section backgrounds

  • Token Name: neutral.surface.300

  • surface-inverse
  • Contrasting element background colors
  • Use for: Tooltip

  • Token Name: neutral.surface.inverse