Skip to main content
SaaSonic

Style guide

Extensive design guidelines encompassing color palettes, typography selections, and essential design components.

Colors Typography Buttons

Colors

Primary

#ff7659

Secondary

#020315

Paragraph

#384250

Neutral One

#029c78

Neutral Two

#fa6422

Neutral Three

#4d5761

Neutral Four

#e5e7eb

Neutral Five

#fbc43c

Background One

#fffdf6

Background Two

#ffe9dc

Background Three

#fff6d9

Background Four

#d9ede2

Background Five

#f9fafb

Background Six

#201F31

Typography

Heading 1

H1 — 70px /120% — 700 — DM Sans

Span

H1 Text Span — 70px /120% — 700 — DM Sans

Heading 2

H2 — 56px /130% — 700 — DM Sans

Heading 3

H3 — 32px /130% — 500 — DM Sans

Sub Title Text

Sub Title — 20px /120% — 700 — DM Sans

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph — 18px /150% — 400 — DM Sans

Text Link

Link — 18px /140% — 500 — DM Sans

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,

Block Quote — 20px /150% — 600 — DM Sans