Color Tokens
All colors are available as SCSS variables. Import them with:
scss
@use '@yellowcard/b2b-design-system/scss/colors' as *;Base Colors
White
$base-white#ffffffBlack
$base-black#000000Grey Scale
Grey 25
$grey-25#fdfdfdGrey 50
$grey-50#fafafaGrey 100
$grey-100#f5f5f5Grey 200
$grey-200#eeeeeeGrey 300
$grey-300#e0e0e0Grey 400
$grey-400#bdbdbdGrey 500
$grey-500#9e9e9eGrey 600
$grey-600#757575Grey 700
$grey-700#616161Grey 800
$grey-800#424242Grey 900
$grey-900#212121Purple
Purple 25
$purple-25#faf8fcPurple 50
$purple-50#f4f0f9Purple 100
$purple-100#e8e0f2Purple 200
$purple-200#d1c1e5Purple 300
$purple-300#b99fd7Purple 400
$purple-400#9370c4Purple 500
$purple-500#7b52b3Purple 600
$purple-600#6a3fa6Purple 700
$purple-700#5a3193Purple 800
$purple-800#492b7cPurple 900
$purple-900#3d2467Yellow
Yellow 25
$yellow-25#fffdf6Yellow 50
$yellow-50#fff9e6Yellow 100
$yellow-100#fff0c2Yellow 200
$yellow-200#ffe08aYellow 300
$yellow-300#ffcf4dYellow 400
$yellow-400#f5a623Yellow 500
$yellow-500#e09000Yellow 600
$yellow-600#c4840eYellow 700
$yellow-700#a06c0aYellow 800
$yellow-800#8a5e0aYellow 900
$yellow-900#704d0aRed (Error / Destructive)
Red 25
$red-25#fef8f7Red 50
$red-50#fdeeedRed 100
$red-100#fbd5d3Red 400
$red-400#e85650Red 600
$red-600#c4302aRed 800
$red-800#8b1f1aRed 900
$red-900#6e1916Green (Success)
Green 25
$green-25#f5fcf8Green 50
$green-50#e8f8efGreen 100
$green-100#c8eddaGreen 400
$green-400#3bb273Green 600
$green-600#238c52Green 800
$green-800#16613aGreen 900
$green-900#114d2eBlue (Information)
Blue 25
$blue-25#f6f9feBlue 50
$blue-50#ebf2fdBlue 100
$blue-100#cfe0faBlue 400
$blue-400#4a90d9Blue 600
$blue-600#2e6fb3Blue 800
$blue-800#1e4d7eBlue 900
$blue-900#183d64Orange (Warning)
Orange 25
$orange-25#fefaf6Orange 50
$orange-50#fdf3eaOrange 100
$orange-100#fae2caOrange 400
$orange-400#e8863eOrange 600
$orange-600#c46420Orange 800
$orange-800#8b4516Teal
Teal 25
$teal-25#f4fcfcTeal 50
$teal-50#e6f7f8Teal 400
$teal-400#35b0b5Teal 600
$teal-600#208a8fTeal 800
$teal-800#156063Semantic Aliases
Use semantic aliases for intent-driven styling:
scss
// Brand
$brand-primary: $purple-800;
$brand-primary-hover: $purple-700;
$brand-primary-active: $purple-900;
// Text hierarchy
$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;
// Borders
$color-border-default: $grey-200;
$color-border-strong: $grey-300;
$color-border-focus: $purple-400;