Design System
The Emerald brand.
Every colour on this page is sampled directly from the supplied logo artwork. The layout framework follows the structural approach used by COLLINS: a serif display voice, a neutral grotesk for interface text, an off-white ground, and a single saturated signal colour.
The mark
These are the client's real artwork, supplied as a logo package: a photoreal transparent PNG for featured placements and traced SVGs for small sizes. Never stretch the mark non-uniformly, never redraw it, and never recolour the gemstone. Keep clear space of at least half the symbol height on every side.
Colour
Emerald, from the gemstone facets
Emerald 900
#063D2F
Deep ground, footer, inverted sections
Emerald 800
#063F31
Theme colour, dark surfaces
Emerald 700
#07503D
Price text, dense small type
Emerald 600
#0A5A45
Primary action, logo dot, links
Emerald 500
#087452
Focus ring, selection, accents
Emerald 300
#75E0BA
Eyebrow text on dark ground
Rose gold, from the orbital rings
Gold 200
#FFE18A
Hover state on dark ground
Gold 300
#F2C35E
Rating stars
Gold 500
#C77B36
Small metallic detail
Gold 700
#7B3D20
Deepest ring shadow in the mark
Ground and ink
Ground
#F7F5F1
Page background
Ink
#07211A
All body text
Typography
Display: Radley
Restore Balance Glow
Used for every heading, set in the single 400 weight. Line height 0.92, letter spacing minus 0.022em. The open, warm forms carry the calm of the gemstone without decoration.
Interface: Poppins
Massages, facials, hydrotherapy, nails
Used for body copy, navigation, prices, and all interface text. Poppins’ geometric letterforms pair with the Radley display. Eyebrow labels run uppercase at 0.6875rem with 0.18em tracking.
Motion
- Purpose
- Motion signals reading order on first paint and on scroll entry. It never carries meaning on its own, so removing it costs nothing.
- Hierarchy
- Headings clip-reveal from a masked wrapper. Supporting content fades up 28px. Images scale to 1.03 on hover. Nothing else moves.
- Timing
- 0.28s for interface response, 0.6s for entrances, 0.7s for heading reveals. Nothing exceeds 0.9s. Stagger caps at 0.14s per item.
- Easing
- cubic-bezier(0.22, 1, 0.36, 1) for entrances
cubic-bezier(0.19, 1, 0.22, 1) for hover transforms - Frequency gate
- Every scroll entrance runs once and never replays on scroll-back. No autoplaying carousel, no looping decorative animation, no parallax.
- Reduced motion
- Under prefers-reduced-motion every element renders in its final state with no transform, and the global CSS collapses all durations to near zero.
Imagery
Only real photographs of Emerald Spa & Wellness Centre appear on this site. They are honest captures of the actual rooms rather than staged stock photography, so the layout gives them room and lets typography carry the polish. Every image ships as WebP with a JPEG fallback, with dimensions declared to prevent layout shift.
