Design System
Colors
Typography
Buttons
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
Primary
#ffb803
Neutral Silver
#e4eaf2
Secondary Silver
#B4BBC4
White
#FFFFFF
Primary black
#2d2d2d
Typogrphy
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.
TEXT BLOCK H1-H6 (CLasses & No-spacing)
H1 / 64px/50px/40px
Lorem ips um dolor
H2 / 46px/36px/30px
Lorem ipsum dolor sit amet consec
H3 / 30px/26px/24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H4 / 26px/24px/20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
H5 / 22px/20px/18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
H6 /18px/18px/16px
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
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-14-b / 14px / 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-14 / 14px / 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-16-b / 16px / 1.4em
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-16 / 16px / 1.4em

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-18-b / 18px / 1.4em
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.
body-18 / 18px / 1.4em
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.
body-20-b / 20px / 1.45em
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.
body-20 / 20px / 1.45em
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.
body-24-b / 24px / 1.3em
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.
body-24 / 24px / 1.3em
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.
Buttons
Variety of button styles and sizes to drive user action. Each is designed for coherence and usability, ensuring a seamless user experience.
BUTTOnS - PRIMARY
Button textButton text
BUTTOnS - OUTLINE
Button text
BUTTOnS - OUTLINE LIGHT
Button text
BUTTOnS - FLAT
Button text
BUTTOnS - FLAT LIGHT
Button text
BUTTONs - DISABLED
Button textButton text
BUTTONs - SIZES
Button textButton text
BUTTONs - WITH ICONS
Button Text
Button Text
BUTTONs - OUTLINE WITH ICONS
Button Text
Button Text
BUTTONs - OUTLINE LIGHT WITH ICONS
Button Text
Button Text
BUTTONS - FLAT WITH ICONS
Button Text
Button Text
BUTTONS - FLAT LIGHT WITH ICONS
Button Text
Button Text