Colors

This typographic system uses class-based styling to maintain clarity and readability. This section outlines the typographic standards, from fonts to weights, ensuring text consistency and seamless design integration through reusable classes.

PRIMARY

Green

#00FFBB

Yellow

#00FFBB

White

#FFFFFF

Black

#000000

BLACK - Shades

60%

#666666

30%

#B3B3B3

15%

#D9D9D9

GREEN - Shades

60%

#00ffd6

30%

#b3ffeb

15%

#d9fff5

YELLOW - Shades

60%

#FFF266

30%

#FFF9B3

15%

#FFFCD9

Typogrphy

DEFAULT H1-H6 (With spacing)

H1 / 64px

Lorem ipsum

H2 / 46px

Lorem ipsum dolor sit

H3 / 30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H4 / 26px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

H5 / 22px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

H6 /18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

TEXT BLOCK H1-H6 (CLasses & No-spacing)

H1 / 64px

Lorem ipsum

H2 / 46px

Lorem ipsum

H3 / 30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H4 / 26px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

H5 / 22px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

H6 /18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

TEXT BLOCK - BODY TEXT

body-12-b / 12px / 1.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

body-12 / 12px / 1.5em

body-14-b / 14px / 1.5em

body-14 / 14px / 1.5em

body-16-b / 16px / 1.4em

body-16 / 16px / 1.4em

body-18-b / 18px / 1.4em