Style Guide

Style guide.

The design system behind Glowvi — palette, typography, and the components that hold every page together.

Palette

Colors

01
Primary
#322A2B
Secondary
#FAD1BA
BG Color
#F7EDE1
Text Color
#020202
Type

Typography

02
Marcellus01 — Display / Serif
Inter02 — Body / Sans-serif

Heading 1

H1 — 70px / 120% — 400 — Marcellus

Heading 2

H2 — 52px / 120% — 400 — Marcellus

Heading 3

H3 — 32px / 120% — 400 — Marcellus

Heading 4

H4 — 28px / 120% — 400 — Marcellus

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.

Paragraph Large — 20px / 150% — Inter

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.

Paragraph Small — 18px / 150% — Inter
Actions

Buttons

03
Primary Button
Primary — 16px / 150% — Inter
Secondary Button
Secondary — 16px / 150% — Inter
Accent Button
Accent — Clay
Marks

Icons

04
List icon
Checkmark icon
Decorative star icon
Quote comma icon