Sass variables


Most interfaces can be created using css, but there are sass variables available for building custom elements or the framework itself.


Colors

// Primary Palette
$c-b700: #071c26; // midnight
$c-b300: #0073EC; // azure
$c-p300: #A644E5; // prince
$c-w100: #FFFFFF; // white

// Secondary Palette
$c-t300: #00CAAA; // turtle
$c-r300: #FF4A48; // coral
$c-o300: #F59D00; // tangerine
$c-y300: #FFDA00; // sunflower

// Grayscale
$c-g500: #434F58; // metal
$c-g400: #677983; // galactic
$c-g300: #AFBFC9; // cloudy
$c-g200: #E0E4E8; // smoke
$c-g100: #F4F6F9; // offwhite

//Extended Palette
$c-b500: #1176A5; // royalblue
$c-b100: #CCEFFF; // babyblue
$c-t500: #0D8288; // marina
$c-t100: #E5FEFF; // ice
$c-o500: #664200; // autumn
$c-o100: #FFE0A6; // peach
$c-y500: #6F5F1B; // leather
$c-y100: #FFF4B6; // magnolia
$c-r500: #4F0703; // rust
$c-r100: #FFCCCE; // rose

// Additional
$c-black: #000000; // black

Typography

Families

$body: 'Proxima Nova', sans-serif;
$heading: 'Ubuntu', sans-serif;

Sizes

$t-6: 2.5rem; // 40px
$t-5: 2.5rem; // 40px
$t-4: 2rem; // 32px
$t-3: 1.5rem; //24px
$t-2: 1.25rem; //20px
$t-1: 1rem; //16px
$t-0: 0.875rem; //14px

Line Height

$t-h-5: 3rem; // 48px;
$t-h-4: 2.5rem; // 40px;
$t-h-3: 2rem; // 32px
$t-h-2: 1.5rem; //24px
$t-h-1: 1rem; //16px
$t-h-single: 1; //Current font size
$t-h-double: 2; //Double current font size

Weights

$t-lighter: 100;
$t-light: 300;
$t-regular: 500;
$t-bold: 600;
$t-extrabold: 900;

Borders

$border-size-1: 1px;
$border-size-2: 2px;
$border-radius: 3px;

Z-Index

$z-0: -1;
$z-1: 1;
$z-2: 10;
$z-3: 100;
$z-4: 1000;
$z-5: 10000;

Breakpoints

$medium-breakpoint: 750px;
$large-breakpoint: 1050px;