Promise — Personalised Skin Therapy

Overview

Promise is a personalised skin-therapy practice whose site presents treatments as gentle, considered rituals rather than clinical procedures. The aesthetic sits closest to Editorial Warmth: a full-bleed, desaturated portrait photograph carries the hero, a high-contrast serif headline (Noto Serif SC, 64px, weight 500) sits centred over it, and the interface stays quiet in near-black and off-white with a single warm taupe accent. The emotional response is calm reassurance, the feeling of a quiet treatment room.

Voice is soft, personal and first-person plural ("we believe skin reflects the care, confidence, and softness that make you feel like yourself"). Vocabulary favours words like natural, gentle, balance, personal and comfort over clinical or promotional language. Sentences are medium-length and unhurried. Example sentence: "Gentle treatments that help preserve your natural beauty, one calm session at a time."

Colors

Primary (#c7a08b) is the signature warm taupe used on the primary CTA "Book session" and on the hero's filled button; it is the only chromatic colour in the system and should appear wherever a user is invited to act. Primary-container (#ba9682) is the deeper taupe used for hover and pressed states, deepening the fill by roughly 10% lightness. Secondary (#1d1d1d) is a charcoal supporting tone for dark UI chrome and secondary emphasis.

The surface stack is near-white (#fcfcfc background, #fafafa surface-container-low, #ffffff surface-container-lowest) for content sections and near-black (#0a0a0a text, #0b1419 inverse-surface) for the dark hero overlay and footer. Text on light surfaces uses #0a0a0a; secondary text uses #1f1f1fb3 (70% opacity). Use the taupe only as an accent, never as a lar

Typography

The type system pairs a classical serif display (Noto Serif SC) with a neutral grotesque for interface text (Instrument Sans, Host Grotesk as a secondary grotesque). The serif communicates heritage and care for display headings; the sans keeps body and UI legible at small sizes. Display sits at 64px with line-height 64px (1.0) and letter-spacing -0.04em, so the three-line hero locks up tightly. Headline sizes drop to 42px with 46.2px line-height and the same -0.04em tracking.

Apply letter-spacing 0.1em and uppercase to label-md (12px) on CTA text, matching the "BOOK SESSION" and "CONTACT US" buttons. Use weight 500 only for display; all other levels stay at 400 to preserve the airy tone. Hero body copy over photography should carry text-shadow 0 2px 4px rgba(0,0,0,0.15) for legibility.

Layout

The layout is a fixed-width centred container with a 1080px maximum width and a 12-column grid, with a 24px gutter. Sections use generous vertical rhythm: xl (64px) and 2xl (72px) separate major blocks, while lg (48px) groups related items inside a section. The hero is full-viewport with centred content and a large negative-space gap (roughly 64px) between headline and supporting copy. Interior padding uses md (32px) inside cards and xs (16px) inside buttons; the 8px base unit governs all increments.

Elevation & Depth

Depth is conveyed mostly by tonal surface change rather than shadow. Where elevation is needed, use the measured shadows: a hairline 0 1px 0 0 rgba(0,0,0,0.05) for dividers and raised rows, and 0 2px 4px 0 rgba(0,0,0,0.1) for floating elements such as sticky headers or cards on hover. A 1px inset ring of rgba(255,255,255,0.15) (0 0 0 1px) is used to frame buttons laid over the photograph, so glass-like secondary CTAs remain visible on dark imagery.

Shapes

The shape language is Soft-Technical: moderate rounding that feels approachable without becoming playful. Primary buttons use 24px radius (rounded.lg) to read as pill-adjacent warmth, secondary buttons use 8px (rounded.sm) to stay subordinate, cards use 16px (rounded.md), and inputs use 12px (rounded.DEFAULT). Full pills (9999px) are reserved for badges and tags only. The contrast between 24px primary and 8px secondary communicates hierarchy through shape as well as colour.

Components

Action Elements Primary buttons are filled with #c7a08b, carry 24px radius, 48px height and 16px 24px padding, with label-md text in uppercase at 0.1em tracking. On hover, transition background-color to #ba9682 over 200ms ease-out. Secondary buttons sit on the photograph with rgba(255,255,255,0.15) fill, an 8px radius and a 1px inset ring of rgba(255,255,255,0.15); hover raises the fill to surface-container-high over 200ms.

Containers & Surfaces Cards sit on surface-container-lowest (#ffffff) with 16px radius and 32px internal padding. Card hover swaps to surface-container-high (#f0f0f0) over 250ms ease, with no lift or scale. Use the hairline shadow only, never a heavy drop shadow.

Inputs & Interaction Input fields use surface-container-low (#fafafa) fill, 12px radius and 24

Do's and Don'ts

**Do**

• Use #c7a08b only on CTAs, links and focus rings so the taupe keeps its signal value.
• Set display headings in Noto Serif SC 500 with -0.04em tracking to match the hero's tight editorial lock-up.
• Keep secondary buttons on photography with the rgba(255,255,255,0.15) fill and 1px inset ring for legibility.
• Pair every serif headline with Instrument Sans body copy at 16–18px for a clear voice contrast.

**Don't**

• Don't use the taupe as a full-section background; it reads as sepia rather than clean.
• Don't apply heavy drop shadows; depth comes from surface tone and hairline shadows.
• Don't mix more than one accent colour into CTAs or badges.
• Don't set body text below 12px or use all-caps outside label-md CTA and badge contexts.