Nuestro objetivo es sistematizar nuestros procesos entonces nuestro sistema tiene que ser un ente configurable. En este sentido, los tokens son configuraciones que afectan a todo nuestro sistema tales como:

• Colores
• Tipografía
• Reglas de espaciado
• Brakepoints

Folder Tokens

colors.scss

// Brand colors
$white_brand: #fff;
$green_brand: #98ca3d;

// Action colors
$primary_action: #abe542;
$seconday_action: #8f97a2;

// Boolean colors
$positive: #15ff93;
$negative: #f04f8d;

//Backgrounds
$background_blue: #233946;
//  Basic colors
$white_normal: #f9f9f9;
$black_normal: #1c1d21;

fonts.scss

@import url("<https://fonts.googleapis.com/css?family=Montserrat&display=swap>");

$font: "Montserrat", sans-serif;

// Typos
$p: 12px;
$small: 10px;
$h1: 50px;
$h2: 30px;
$h3: 20px;

// Typo Bolds
$black: 800;
$bolder: 600;
$medium: 600;
$normal: 500;
$light: 400;

spacing.scss

$space: 10px;

// Opcional:
// $space_half: 5px;
// $space_x2: 20px;
// $space_x3: 30px;

Folder Fundations