Color System

The color palette is extracted from Figma and maintained as SCSS variables. Every color has 11 shades (25–900) with the main variant at shade 400.

Brand Colors

Primary Purple

The brand primary color used for buttons, links, active states, and brand emphasis.

Purple 25$purple-25#faf8fc

Purple 50$purple-50#f4f0f9

Purple 100$purple-100#e8e0f2

Purple 200$purple-200#d1c1e5

Purple 300$purple-300#b99fd7

Purple 400$purple-400#9370c4

Purple 500$purple-500#7b52b3

Purple 600$purple-600#6a3fa6

Purple 700$purple-700#5a3193

Purple 800$purple-800#492b7c

Purple 900$purple-900#3d2467

Yellow (Secondary)

Accent color for highlights and callouts.

Yellow 400$yellow-400#f5a623

Yellow 600$yellow-600#c4840e

Yellow 800$yellow-800#8a5e0a

Functional Colors

Grey Scale

Used for text, borders, backgrounds, and neutral UI elements.

Grey 25$grey-25#fdfdfd

Grey 50$grey-50#fafafa

Grey 100$grey-100#f5f5f5

Grey 200$grey-200#eeeeee

Grey 300$grey-300#e0e0e0

Grey 400$grey-400#bdbdbd

Grey 500$grey-500#9e9e9e

Grey 600$grey-600#757575

Grey 700$grey-700#616161

Grey 800$grey-800#424242

Grey 900$grey-900#212121

Status Colors

Color	Usage	Variable
Red	Error, destructive actions	$red-400 to $red-900
Green	Success, positive states	$green-400 to $green-900
Blue	Information, links	$blue-400 to $blue-900
Orange	Warning, attention	$orange-400 to $orange-900

Semantic Aliases

For convenience, semantic aliases map colors to their intended use:

// Brand
$brand-primary: $purple-800;
$brand-primary-hover: $purple-700;
$brand-primary-focused: $purple-600;
$brand-primary-active: $purple-900;

// Text
$color-text-primary: $grey-900;
$color-text-secondary: $grey-600;
$color-text-disabled: $grey-400;

// Backgrounds
$color-bg-primary: $base-white;
$color-bg-secondary: $grey-50;
$color-bg-disabled: $grey-100;

Usage

@use '@yellowcard/b2b-design-system/scss/colors' as *;

.my-card {
  background: $grey-50;
  border: 1px solid $grey-200;
  color: $grey-900;

  &:hover {
    border-color: $purple-400;
  }
}

See SCSS Usage for full import instructions.