Sizes

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6

<h1 class="size-1">Size 1</h1>
<h2 class="size-2">Size 2</h2>
<h3 class="size-3">Size 3</h3>
<h4 class="size-4">Size 4</h4>
<h5 class="size-5">Size 5</h5>
<h6 class="size-6">Size 6</h6>
            

Size5 is 1rem(16px)

Colors

Primary

Sakura

Beni

Orange

Cobalt

Danger

Warning

Purple

Info

Light

Dark

Black

Marker

CSS like a molecule

<p class="size-4">CSS like <span class="text-marker">a molecule</span></p>

Font style

Bold

Serif

Italic

<p class="size-4 text-bold">Bold</p>
<p class="size-4 text-serif">Serif</p>
<p class="size-4 text-italic">Italic</p>