Home Style Guide

Style Guide

Theme tokens and utilities are defined in tailwind.config.ts and src/styles/global.css.

01. Colors 02. Typography 03. Buttons 04. Icons

01 Colors

Primary Color #1

#7D30E2

Purple

Primary Color #2

#000000

Black

Text Color

#3B3B3B

Dark Gray

Section BG

#FAF8FC

Light Lavender

Secondary

#FE7D4E

Lime

#CCFB4D

Border

#E5DAF2

Hero Dark

#0D0616

White

#FFFFFF

02 Typography

Headings — Urbanist SemiBold

Heading 1

110px / 120% || SemiBold || Urbanist

Heading 2

80px / 115% || SemiBold || Urbanist

Heading 3

32px / 130% || SemiBold || Urbanist

Heading 4

26px / 140% || SemiBold || Urbanist

Body — Urbanist

Subtitle

20px / 130% / Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Paragraph

20px / 150% / Regular

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 Med.

18px / 150% / Regular

Special Styles

Display Title

Display

50px → 72px → 96px / SemiBold / −5% tracking

Eyebrow Label

Eyebrow Text Label

14px / Medium / Uppercase / +8% tracking

03 Buttons

Primary

Button Text

bg-primary / text-white / rounded-full / shadow-soft

Outline

Button Text

bg-transparent / border-border / text-heading

Light

Button Text

bg-white / text-heading — for dark backgrounds

Compact

Button Text

Smaller pill — used in floating nav bars

Nav Dark — for dark headers

Button Text

bg-white/5 / border-white/30 / backdrop-blur — floats over dark backgrounds

04 Icons

Phone

Message

Location Fill

Facebook

Twitter

Bed

Area Size

Bath

Double Arrow

Circ. Check

Check

Price Tag

Location

Arrow