Variables

Important

Always use variables in the codebase. If a color is missing from the variables, find an appropriate name and add it to _variable.scss before using it. Never use hex codes directly in SCSS files.

Import variables in your SCSS files:

@import "../helpers/index.scss";

---

Color Variables

Variable	Value	Usage
$brand-color	#6554e0	Primary brand color
$brand-hover-color	#e6e4fa	Brand hover state
$sidebar-bg-color	#252525	Sidebar background

Semantic Colors

Variable	Value	Usage
$informative-clr	#2f80ed	Info states
$error-clr	#f83636	Error states
$warning-clr	#ffc845	Warning states
$positive-clr	#30c39e	Success states
$disabled-clr	#9ca7ae	Disabled states

Color Scales

Each semantic color has three variants:

// Blue
$blue-regular-clr: #2f80ed;
$blue-light-clr: #cde1fb;
$blue-lightest-clr: #eef5fe;

// Red
$red-regular-clr: #f83636;
$red-light-clr: #fdcfcf;
$red-lightest-clr: #feefef;

// Yellow
$yellow-regular-clr: #ffc845;
$yellow-light-clr: #ffefc7;
$yellow-lightest-clr: #fff8e9;

// Green
$green-regular-clr: #30c39e;
$green-light-clr: #c1ede2;
$green-lightest-clr: #eefaf7;

// Grey
$grey-regular-clr: #c7ced5;
$grey-light-clr: #d9dee3;
$grey-lighter-clr: #f3f4f6;
$grey-lightest-clr: #f8f9fa;

Ink (Text) Colors

$ink-regular-clr: #1d2129; // Primary text
$ink-light-clr: #3b4352; // Secondary text
$ink-lighter-clr: #6b7586; // Muted text
$ink-lightest-clr: #9ca7ae; // Placeholder text
$primary-text-clr: #1d2129;

---

Typography Variables

// Font family
$primary-font: "Open Sans", sans-serif;

// Font sizes
$t1-text: 20px;
$t2-text: 18px;
$t3-text: 16px;
$t4-text: 14px;
$t5-text: 13px;
$t6-text: 12px;

// Font weights (use with font-weight() function)
$font-weight: (
  "regular": 400,
  "medium": 500,
  "bold": 600,
  "bolder": 900,
);

---

Border Radius Variables

$radius-0: 0;
$radius-1: 1px;
$radius-2: 2px;
$radius-3: 3px;
$radius-4: 4px;
$radius-5: 5px;
$radius-6: 6px;
$radius-8: 8px;
$circle: 50%;