@onclass-tech-learning/styleguide v1.2.0

Onclass token library

Spacing

  --spacing: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 40px;
  --spacing-9: 48px;
  --spacing-10: 64px;
  --spacing-11: 80px;
  --spacing-12: 96px;
  --spacing-13: 120px;
  --spacing-14: 144px;

Colors

  --color-primary-darkest: #006096;
  --color-primary-dark: #0C75AF;
  --color-primary-main: #66B7F1;
  --color-primary-medium: #B8E1FF;
  --color-primary-light: #EAF5FF;

  --color-neutral-darkest: #212134;
  --color-neutral-dark: #4A4A6A;
  --color-neutral-main: #8E8EA9;
  --color-neutral-medium: #A5A5BA;
  --color-neutral-light: #C0C0CF;
  --color-neutral-lighest: #DCDCE4;
  --color-neutral-white: #EAEAEF;

  --color-positive-dark: #2F6846;
  --color-positive-main: #5CB176;
  --color-positive-medium: #C6F0C2;
  --color-positive-light: #EAFBE7;

  --color-alert-dark: #BE5D01;
  --color-alert-main: #D9822F;
  --color-alert-medium: #F29D41;
  --color-alert-light: #FAE7B9;

  --color-negative-dark: #B72B1A;
  --color-negative-main: #D02B20;
  --color-negative-medium: #EE5E52;
  --color-negative-light: #F5C0B8;

Fonts

  --font-family: 'Inter', sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-medium: 500;

Tipografia

  --title-xs: 20px;
  --title-s: 24px;
  --title-m: 32px;
  --title-l: 40px;
  --title-xl: 48px;
  --body-xs: 12px;
  --body-s: 14px;
  --body: 16px;

License

All code are copyright onclass and may not be used or reproduced without explicit permission.