Design system

Sorael Global style guide

Direction A — Deep Midnight Blue. Every colour, type style and spacing value on this page is a Webflow variable or a global Client-First class, so the whole site changes from one place.

Colour

Midnight

#0F1B2D · primary, buttons, dark sections

Onyx

#111318 · footer

Ink

#16213A · body text

Ink muted

#5A6174 · secondary text

Alabaster

#F7F3EC · page background

Sand

#EBE3D3 · secondary surfaces

Sand deep

#DFD4BF · card hover

White

#FFFFFF · cards, text on dark

Gold

#A6844F · rules, numerals, the mark

Gold text

#785F38 · eyebrow labels (AA)

Champagne

#D9C79F · accent on dark

Typography

Heading H1 — Playfair Display 500

Heading H2 — Playfair Display 500

Heading H3 — Playfair Display 500

Heading H4 — Inter 600

Text large — Inter 400, 1.25rem. Strategic clarity for organisations that operate across markets.

Text medium — Inter 400, 1.125rem. Strategic clarity for organisations that operate across markets.

Text regular — Inter 400, 1rem. Strategic clarity for organisations that operate across markets.

Text small — Inter 400, 0.875rem. Strategic clarity for organisations that operate across markets.

Eyebrow label — Inter 600, uppercase

Buttons and links

Primary button Secondary button Text link

Light button Text link on dark

Eyebrow on dark

Muted text on dark

Radius, spacing and containers

Small · 6px

Medium · 8px

Large · 12px

Section padding: small 3rem, medium 5rem, large 7rem (5rem on tablet, 4rem on phones). Gutter: 5vw. Containers: large 80rem, medium 64rem, small 46rem. Breakpoints follow Webflow defaults — 991, 767 and 479 pixels, with a 1280px+ range for the largest type.

Geometric mark

Concentric line-drawn mark, 1px strokes. Gold on light surfaces, champagne on dark. Used at 52px inside feature cards and at 400px as an ambient element bleeding off dark sections.