Brand
SquareOne Styleguide
Colors, typography and logo variants that keep the whole site consistent.
01 — Colors
Palette
Ink
--primary
oklch(0.31 0.013 60)
Cream
--background
oklch(0.977 0.011 84)
Sand
--sand
oklch(0.955 0.021 82)
Clay
--clay
oklch(0.878 0.036 62)
Sky
--sky
oklch(0.812 0.055 240)
Sky Soft
--sky-soft
oklch(0.9 0.037 240)
Muted
--muted
oklch(0.947 0.014 85)
Border
--border
oklch(0.9 0.014 85)
02 — Typography
Fonts & hierarchy
Display — Marcellus
Aa
Health is happiness
H1–H4, big statements
Body — Jost
Aa
Body copy, navigation and buttons. Uppercase with tracking for small labels.
Eyebrow / 0.28em
Accent — Dancing Script
Aa
one
Accents in the logo and headlines only.
03 — Logo
Logo variants
Horizontal
Stacked
Mark
Wordmark
04 — Elements
Buttons & labels
PrimarySkyOutlineEyebrow chip
Radii: pills for actions, 1.5rem for cards. Spacing on a 4-step scale.