Styleguide

Every colour, size and element the site is allowed to use. Sign off here before pages build on it.

Brand marks

Logo, blue
Logo, ink
Logo, white
Stacked logo with tagline
Emblem, blueEmblem, inkEmblem, white

Colour

Typography

Display: Fraunces · Body: Inter · Sizes are fluid: smallest on phones, largest on desktop.

--text-4xl

Where scrolls are revealed

--text-3xl

Where scrolls are revealed

--text-2xl

Where scrolls are revealed

--text-xl

Where scrolls are revealed

--text-lg

Lede / large body — The Sabartha preview is free to download.

--text-base

Body (17px, never below 16px) — The Sabartha preview is free to download.

--text-sm

Small — The Sabartha preview is free to download.

--text-xs

Extra small / labels — The Sabartha preview is free to download.

Spacing & radius

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10
--radius-sm
--radius-md
--radius-lg
--radius-pill

Buttons

Minimum height 48px (tap target ≥ 44px). Hover and focus: try with mouse and Tab key.

External link(opens in a new tab)

Email signup — all states

Idle

Submitting

Error

Success

Idle — on night

Not connected (what ships if the Kit form ID is missing)

Objects

Cover of the free preview of Sabartha d’Malkutha (The Hope of the Kingdom): Kataba Luqa chapter 2, showing the manger with a lamb and a lion
01

Card title

Cards use surface, a 1px line and the large radius.