Colour
Blue is the dominant brand colour — mark bars, primary UI, big colour fields. Orange is reserved for action: buttons, the tall logo bar, one highlight per moment. Roughly 85–90% of any page should stay white or near-white.
Brand blue
Blue 50Tint bg / hover
#EEF2FE
Blue 100Chip bg
#DCE6FD
Blue 300Hover borders
#8FADF7
Blue 600Primary
#2450E0
Blue 700Hover/pressed
#1B3EB8
Blue 800Reserved, minimal use
#10256B
Blue 900Reserved, minimal use
#0B1A4E
Blue 800/900 are part of the fixed brand palette but are deliberately not used for bands, hero or footer — those are brand blue 600 now. Brighter reads better than dark navy.
Hot orange — action only
Orange 50Tint bg
#FFF1EC
Orange 400Hover state
#FF7A45
Orange 500Action / buttons
#F2542D
Orange 700Text-on-tint only
#B23417
Ink & surface
Ink 900Body text
#16233A
Ink 700Secondary text
#3B4A63
Ink 500Tertiary text
#67748C
Ink 200Input borders
#CBD3DF
Ink 100Hairlines
#E4E8EF
Ink 50Sunken surface
#F7F9FC
WhitePage
#FFFFFF
Semantic — fresh, not the retired brand red
SuccessComplete / unchanged
#22C55E
WarningPending / action
#F59E0B
DangerTamper detected
#DC2626
Solid fills of success/warning pair with ink-900 text (they're too light for white); danger is dark enough to pair with white. Chip labels use a darker -700 shade of each for AA on their tint background.
Type
Montserrat carries the brand voice — headlines, stats, anything that should feel confident and a little designed. Inter runs the interface — body copy, controls, anything that should feel quiet and functional. Caveat only ever renders a signature.
display · Montserrat 600 · clamp(44–68px) · -0.02em
Sign it. Seal it. Prove it.
h1 · Montserrat 600 · clamp(34–48px) · -0.015em
Every agreement, provably yours.
h2 · Montserrat 600 · clamp(28–36px)
Built for documents that matter.
h3 · Montserrat 600 · 24px
Controlled Originals, explained.
h4 · Inter 600 · 20px
Field placement made simple
body-lg · Inter 400 · 18px
Every completed document gets a tamper-evident certification signature, a SHA-256 fingerprint, and an OpenTimestamps anchor — free to verify by anyone, any time.
body · Inter 400 · 16px
Tenant shall pay a security deposit equal to one month's rent prior to occupation, refundable subject to clause 14.2.
eyebrow · Inter 700 · 12px · uppercase · +0.08em
Made in South Africahand · Caveat 600 · signature moments only
Daniel Loubser
Spacing
4px base unit. Section padding is deliberately unequal — 48 / 64 / 80 / 96 / 128px — so importance is signalled through space, not just colour.
Radii & shadow
Cards separate with hairline borders and colour blocking, not elevation — shadow is reserved for things that genuinely float (the hero document, dropdowns, modals).
Buttons
Orange fill is the one action per screen. Blue outline is everything secondary. Same geometry throughout — only fill changes.
Chips & badges
Status pills used across the document list, signing experience and verification result.
Form controls
Hairline border at rest, blue focus ring, accessible error state.
The signature moment
Type a name — it becomes a live handwritten signature in Caveat. This exact component is what turns sign-up into the product's first "wow."
Exploring alternatives — pick a font, type anything, see it live. CDN fonts for comparison only, not final, not self-hosted yet.
All seven side by side, same name:
Daniel Loubser
Caveat 600 — current defaultDaniel Loubser
Caveat 700 — bolder, same fontDaniel Loubser
Kalam 700 — rounder, chunkierDaniel Loubser
Patrick Hand — neat printed handDaniel Loubser
Homemade Apple — genuine ballpoint feelDaniel Loubser
Dancing Script 700 — elegant calligraphicDaniel Loubser
Sacramento — fine, formal scriptDaniel Loubser
Satisfy — casual brush penMy read: Caveat or Homemade Apple read most like an actual signature — a little imperfect, which is what makes it believable. Dancing Script and Sacramento are prettier but start to look like wedding-invitation calligraphy rather than something a person actually wrote — for a document you're legally signing, that trade felt backwards to me. Kalam and Patrick Hand are legible but read more like "handwritten note" than "signature."
Icons
Round-cap strokes at a 24px grid — the same stroke language as the mark, so the icon set always reads as part of the same family.
Logo
The mark is HTML/SVG with the wordmark set in live Inter text — never a rasterised export — so it always inherits the page's real font. On a coloured surface, plain white is the default; .logo--accent brings back the true accent orange (#FF7A45, specified in the brand kit for blue/dark backgrounds) for the tall bar and "Doc" — logotype text and marks are exempt from WCAG's contrast minimums, so no glow or substitute colour needed.
Loading
The mark is already four strokes of different heights, so it does not need a spinner attached to it — the bars are the animation. Each stretches and settles in turn, 110 ms apart, which reads as a wave crossing left to right and returns to where it started, so a long wait looks like the same motion repeating rather than something stuck. Reduced motion holds the real heights and breathes the whole mark instead.
Mark only — 56px. For a panel filling in behind a page that is already drawn.
With a line. Say what is being waited for, not “Loading”.
On a coloured surface the bars go white, the same as the static mark.