Réquinte by Wellington — Brand & Web Design System
Design System
v 1.0
A unified visual language for all Réquinte by Wellington touchpoints — web, print, and physical. Built on the principle that refinement is not ornament, but restraint applied with intention.
v 1.0 Cape Town, 2026
01 — Colour
Parchment#EDE8E0
Linen#DDD4C6
Sand#C9B8A2
Camel#A0774E
Walnut#7B5235
Bark#4A2E1A
Espresso#1A1008
Background
White (#FAF8F5)
Cream (#F5F1EC)
Primary / Dark sections
Bark (#4A2E1A)
Espresso (#1A1008)
Body text / Muted
Muted (#8A7A6A)
Sand (#C9B8A2)
02 — Typography
Display — Cormorant Garamond, Italic 300
Spaces that feel like memory
Display Strong — Cormorant Garamond, Italic 500
The first thing you feel
H1 — Cormorant Garamond, Italic 300 · clamp(28px, 3.5vw, 44px)
We do not decorate spaces. We uncover the life they were meant to hold.
H2 — Cormorant Garamond, Italic 300 · clamp(22px, 2.5vw, 32px)
Material language & spatial intention
H3 — Cormorant Garamond, Italic 400 · 20px
The Amber House, Constantia
Body — Jost 300 · 14px / 1.85
We work slowly, deliberately, and in close partnership with the people who will live inside the spaces we create. The result is never a showroom. It is always a home.
Label / Nav — Jost 500 · 9–10px / tracking 0.28em / uppercase
Interior Design Studio · Cape Town
01 / 12 — Primary bedroom, dusk
displayAa
h1Aa
h2Aa
h3Aa
bodyRéquinte by Wellington — Interior Design
labelInterior Design Studio
captionCape Town · 2026
03 — Wordmark Usage
Réquinte
by Wellington
Interior Design · Cape Town
On White / Cream
Réquinte
by Wellington
Interior Design · Cape Town
On Parchment / Linen
Réquinte
by Wellington
Interior Design · Cape Town
On Bark
Réquinte
by Wellington
Interior Design · Cape Town
On Espresso
04 — Navigation
Réquinte by Wellington
Chapter Mark — Section Opener
05 — Buttons & Actions
Residential Full Renovation Cape Town 2026
06 — Form Fields
07 — Project Cards
Full Residence
The Amber House
Commercial
Studio Nour
Holiday Residence
Cape Retreat
08 — Spacing Scale
--s-1
4px
--s-2
8px
--s-3
12px
--s-4
20px
--s-6
28px
--s-8
40px
--s-12
60px
--s-16
80px
--s-24
120px
09 — Motion & Transitions
Scroll Reveal
0.9s cubic-bezier(.25,.46,.45,.94)
Used for all section entrances. Delayed by 0.12s increments for staggered reveals.
Hover Transitions
0.3s ease
Buttons, links, nav elements. Never faster than 0.2s, never slower than 0.4s.
Image Zoom (hover)
0.8s cubic-bezier(.25,.46,.45,.94)
Project images and hero blocks. Scale to 1.03–1.04 only. Never abrupt.
Scroll Reveal Delay
0, 0.12, 0.24, 0.36, 0.48s
Maximum stagger is 0.48s. Assign via .d1 / .d2 / .d3 / .d4 classes.
10 — CSS Token Reference
Token Value Use
--parchment#EDE8E0Hero backgrounds, light sections
--linen#DDD4C6Image placeholders, card backgrounds
--sand#C9B8A2Borders, dividers, muted tones
--camel#A0774EAccents, material swatches
--walnut#7B5235Link colour, secondary actions
--bark#4A2E1AHeadings, primary colour, CTA backgrounds
--espresso#1A1008Footer, process section, deep backgrounds
--cream#F5F1ECSecondary sections, split panels
--white#FAF8F5Primary page background
--muted#8A7A6ABody text, captions, secondary labels