Color Tokens

Color tokens definitions used in Pallas UI design system

Pallas UI uses a semantic color system that provides consistent theming across the entire design system.

Color System

Our color system is organized into semantic categories that represent their usage in the UI. Each color has variations for different states and emphasis levels.

Usage

Use these color tokens in your components for consistent styling:

import { css } from '@styled-system/css'
 
function Example() {
  return (
    <div
      className={css({
        color: 'text',
        bg: 'surface.container',
        borderColor: 'border',
      })}
    >
      Content with consistent colors
    </div>
  )
}