Design Sys­tem

Colors

Bg main
Bg main trans­pa­rent
Bg Main Boxes
Bor­ders
Text 1
Text 2
Text 3
Text 4
Text 5
Bg accent
Bg accent boxes
Text Accent 1
Text Accent 2
Text Accent 3
Color 2 dark
Color 2 base
Color 2 light
Color 2 trans­pa­rent
Color 1 dark
Color 1 base
Color 1 light
Color 1 trans­pa­rent
Light
Light trans­pa­rent
https://icolorpalette.com/color/6938EF

Hea­dings

Title 1 – Lorem ipsum dolor 123

Title 2 – Lorem ipsum dolor 123

Title 3 – Lorem ipsum dolor 123

Title 4 – Lorem ipsum dolor 123

Title 5 – Lorem ipsum dolor 123

Title 6 – Lorem ipsum dolor 123

https://typescale.com/
https://type-scale.spencermortensen.com/

Para­graph

Text XL

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Text L

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Text M

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Text S

Fus­ce vitae enim et sapi­en fini­bus fau­ci­bus. Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Text XS

Fus­ce vitae enim et sapi­en fini­bus fau­ci­bus. Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Accent text (sub­tit­les, lists etc.)

Accent XL

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Accent L

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Accent M

Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Accent S

Fus­ce vitae enim et sapi­en fini­bus fau­ci­bus. Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

Accent XS

Fus­ce vitae enim et sapi­en fini­bus fau­ci­bus. Aene­an sit amet jus­to dui. Nunc nec velit ex. In ac sce­le­ris­que nisi, nec pla­ce­rat mi. Mae­ce­nas feu­gi­at ligu­la ele­mentum effi­ci­tur pel­len­tes­que.

But­ton styl­es

But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name
But­ton name

Form styl­es & sizes

Extra small
Small
Medi­um
Lar­ge
Extra Lar­ge
Icons & images
Phos­phor icons
SVG masks