Style Guide
Every color, type style, spacing rule, and core component used across this template, in one reference page. Use this alongside the Documentation page when customizing your site.
Colors
Core
background-color
rgb(255, 255, 255)
background-2
rgb(250, 250, 250)
text-primary
rgb(17, 17, 17)
text-secondary
rgb(66, 66, 66)
text-tertiary
rgb(114, 114, 114)
inverse
rgb(255, 255, 255)
neutral
rgb(104, 104, 104)
high-contrast
rgb(48, 48, 48)
low-contrast
rgb(166, 166, 166)
Brand & Primary
brand
rgb(164, 138, 83)
brand-background
rgb(235, 222, 195)
primary
rgb(131, 148, 118)
primary-background
rgb(219, 227, 212)
primary-hover
rgb(98, 111, 88)
primary-border-extension
rgb(234, 235, 195)
primary-pressed
rgb(73, 83, 66)
Semantic
info
rgb(162, 164, 83)
info-background
rgb(244, 245, 225)
success
rgb(0, 124, 57)
success-background
rgb(230, 248, 234)
warn
rgb(145, 99, 0)
warn-background
rgb(255, 242, 225)
error
rgb(197, 54, 7)
error-background
rgb(255, 238, 230)
error-hover
rgb(165, 50, 13)
error-border-extension
rgb(255, 204, 180)
Disabled & Input
disabled-background
rgb(221, 221, 221)
disabled-border
rgb(176, 176, 176)
disabled-text
rgb(176, 176, 176)
secondary-border
rgb(145, 145, 145)
input-border
rgb(201, 201, 201)
input-background-selected
rgb(237, 241, 233)
input-background-disabled
rgb(241, 241, 241)
Typography
Every text style responds at three breakpoints: Desktop (≥1200px) / Tablet (≥810px) / Phone (<810px), shown below each sample.
Typography/Display 6XL
Desktop 64/72px · Tablet 52/58px · Phone 40/46px
Typography/Display 5XL
Desktop 56/64px · Tablet 46/54px · Phone 36/42px
Typography/Heading 4XL
Desktop 48/56px · Tablet 40/48px · Phone 32/38px
Typography/Heading 3XL
Desktop 40/48px · Tablet 34/42px · Phone 28/34px
Typography/Heading 2XL
Desktop 32/40px · Tablet 28/36px · Phone 24/30px
Typography/Heading XL
Desktop 24/32px · Tablet 22/30px · Phone 20/28px
Typography/Subtitle LG
Desktop 20/24px · Tablet 19/24px · Phone 18/24px
Typography/Body MD
Desktop 18/24px · Tablet 17/24px · Phone 16/24px
Typography/Body SM
Desktop 16/24px · Tablet 16/24px · Phone 15/22px
Typography/Label XS
Desktop 14/18px · Tablet 14/18px · Phone 14/18px
Typography/Caption XXS
Desktop 12/16px · Tablet 12/16px · Phone 12/16px
Typography/Micro XXXS
Desktop 10/14px · Tablet 10/14px · Phone 10/14px
Spacing & Breakpoints
Desktop breakpoint
≥ 1200px viewport width
Tablet breakpoint
810px – 1199px viewport width
Phone breakpoint
< 810px viewport width
Section vertical padding
40px (standard) · 160/120/100px top on page-title sections (desktop/tablet/phone)
Section horizontal padding
60px desktop/tablet · 24px phone
Content max-width
1440px outer section · 800px reading column on text-heavy pages
Card corner radius
8–10px
Standard content gap
16–48px depending on hierarchy (16 = related items, 32–48 = section blocks)
Buttons
Button and Underline Button are shared components used throughout the site. Edit them once in Assets → Components to restyle every instance at once.
Default
Secondary Default
Outline Regular / Default
Transparent / Default
Danger / Default
Underline Button