Design system

Style Guide

Source of truth: Figma MONG_Design_Dev. Tokens live in src/assets/scss/_variables.scss ($text-styles). Mobile values apply at media-breakpoint-down(md) (≤ 991px).

Typography

Spec format: size / line-height / letter-spacing (px). "Now" is read live from the browser at the current viewport.

Display .display

Font Cormorant Garamond
Weight 700 / 700 (desktop / mobile)
Desktop 88 / 96 / -1.76
Mobile 48 / 56 / -0.96
Now …

Display heading

H1 .h1 / h1

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 56 / 64 / 0
Mobile 36 / 44 / 0
Now …

Heading level one

H2 .h2 / h2

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 40 / 48 / 0
Mobile 28 / 36 / 0
Now …

Heading level two

H3 .h3 / h3

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 28 / 36 / 0
Mobile 22 / 30 / 0
Now …

Heading level three

H4 .h4 / h4

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 24 / 36 / 0
Mobile 20 / 30 / 0
Now …

Heading level four

H5 .h5 / h5

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 20 / 36 / 0
Mobile 16 / 30 / 0
Now …

Heading level five

H6 .h6 / h6

Font Cormorant Garamond
Weight 700 / 600 (desktop / mobile)
Desktop 16 / 36 / 0
Mobile 14 / 30 / 0
Now …

Heading level six

Body Lead .body-lead

Font Lora
Weight 400 / 400 (desktop / mobile)
Desktop 18 / 28 / 0
Mobile 16 / 26 / 0
Now …

Body lead paragraph, used for introductory text below a heading.

Body .body

Font Lora
Weight 400 / 400 (desktop / mobile)
Desktop 16 / 26 / 0
Mobile 15 / 24 / 0
Now …

Body paragraph. The quick brown fox jumps over the lazy dog.

Label .label

Font Manrope
Weight 600 / 600 (desktop / mobile)
Desktop 13 / 18 / 1.04
Mobile 12 / 16 / 0.96
Now …

Label uppercase

Button Label .btn-label

Font Lora
Weight 400 / 400 (desktop / mobile)
Desktop 16 / 24 / 0
Mobile 15 / 22 / 0
Now …

Button label

Font families

Heading $font_heading

Cormorant Garamond — Aa Bb Cc 0123

Body / Button $font_body

Lora — Aa Bb Cc 0123

Label $font_label

Manrope — Aa Bb Cc 0123

Colors

Brand

Primary

#C1272D
$primary_color

Secondary

#E56A2A
$secondary_color

Accent

#E12F7C
$accent_color

Semantic

Success

#4F7A52
$success_color

Info

#4A6572
$info_color

Warning

#E56A2A
$warning_color

Danger

#B23A3A
$danger_color

BG Success

#D6D7C3
$bg_success_color

BG Info

#D5D3C9
$bg_info_color

BG Warning

#F1D4BC
$bg_warning_color

BG Danger

#E8CBBF
$bg_danger_color

Neutral

Placeholder

#D5D6D6
$placeholder_color

Border

#AC894E
$border_color

Hints

#C81F28
$hint_color

Paragraph

#1A1A1A
$paragraph_color

Heading

#3A0A0C
$heading_color

Sub heading

#C5A059
$subheading_color

Background

White

#FFFFFF
$background_color_0

Surface card

#F8F3EA
$background_surface_card

Page

#F4EBDC
$background_page

Greyscale

Grey 100

#E4DACC
$greyscale-100

Grey 200

#CCC0B4
$greyscale-200

Grey 300

#A3958B
$greyscale-300

Grey 500

#7B6B63
$greyscale-500

Grey 700

#52403A
$greyscale-700

Grey 900

#2A1512
$greyscale-900

Dark

Dark 1

#3A0A0C
$dark_color_1

Dark 2

#562C2B
$dark_color_2

Dark 3

#6E4946
$dark_color_3

Buttons

Text style: Button Label (Lora 16/24 desktop, 15/22 mobile).

Primary Secondary Outline Small Large

Layout

Figma variables layout-desktop / layout-mobile.

Token	Desktop (1440)	Mobile (375)
frame-width	1440	375
margin	80	20
content-width	1280	353
columns	12	4
gutter	30	20
section-gap	96	64
section-padding-y	96	48
block-padding	24	20
block-gap	16	12