Reference document

Three design systems, one brand.

Each concept has its own palette, typography pairing, and component language — but all three share the same brand color, the same warm sensibility, and the same conversion-focused structure. This page collects them in one place so you can compare them side by side.

Once you've picked a direction, the chosen design system becomes the foundation for every page on the site — from blog posts to email receipts.

Color palettes

All three concepts use the brand blush #D18D8D as an accent — the rest changes how each one feels. Concept 1 is creamier and quieter. Concept 2 brings in sage and soft pink-beige. Concept 3 leans into stone, gold, and deep charcoal for editorial contrast.

Atelier

Concept 01 · Elevated corrective

Background#FBF8F3

Cream surface#F2EBE0

Soft taupe#D6C8B8

Brand blush#D18D8D

Brand deep#A86E6E

Ink#1F1B17

Used forQuiet, magazine-like authority

Sanctuary

Concept 02 · Warm wellness

Background#F4EEE3

Soft pink-beige#E8D5CB

Sage#B8C5A6

Brand blush#D18D8D

Warm brown#5C4A3F

Ink#3D2F26

Used forSoft luxury, relationship-led

Studio

Concept 03 · Visual-first

Stone#F2EEE9

Soft gold#C9A876

Gold deep#A88656

Brand blush#D18D8D

Mid neutral#5C534B

Dark#1F1B17

Used forEditorial contrast, social-forward

How to read these

Background — the largest surface, fills most of the page.
Surface / accent — used for cards, sections that need to stand out from background.
Brand blush — limited to CTAs, accents, dividers. Never the dominant color (this was a specific brief).
Ink — primary text. Always warm-black, never pure #000.
Each palette is intentionally limited to ~6 colors so the brand feels cohesive across every page.

Typography pairings

Each concept pairs one serif with one sans. The serif carries personality (display headlines, italicized accents); the sans carries readability (body, UI, captions). All three are free Google Fonts — production-friendly with no licensing concerns.

Atelier

Cormorant Garamond + Inter

Eyebrow

FACE REALITY CERTIFIED

Headline (Cormorant Garamond 500)

Corrective skincare, truly personal.

Body (Inter Light 300)

A small studio for clients who want real results — guided by an esthetician who treats skin as a relationship, not a transaction.

Sanctuary

Fraunces + DM Sans

Eyebrow

— welcome to your skin sanctuary

Headline (Fraunces 400)

Soft, considered care.

Body (DM Sans Regular 400)

An intentionally small studio in Huntersville, where corrective skincare, brows & lashes, and relaxation facials are practiced slowly, and personally.

Studio

Instrument Serif + Inter

Eyebrow

FACE REALITY CERTIFIED

Headline (Instrument Serif 400)

Results worth following.

Body (Inter Regular 400)

A one-person, by-appointment skincare and brow/lash studio serving Huntersville, Cornelius, Charlotte and the greater Lake Norman area.

Type hierarchy rules

One H1 per page — always location-targeted on SEO landing pages (e.g. "Acne treatment in Huntersville, NC").
H2 for major sections, H3 for subsections. Never skip levels.
Italics carry personality — used sparingly to break up serif headlines and highlight key emotional beats.
Body text never goes below 15px on mobile, 16px on desktop. Accessibility-first.

Core components

A glimpse of the button system, card pattern, and primary CTA treatment for each concept. The same components scale across blog posts, service pages, booking flows, etc.

Atelier

01 — Corrective

Acne & Corrective

For active acne, post-acne marks, and barrier repair.

Sanctuary

Skin & Acne Care

Corrective treatments for clients who want lasting clearing.

Studio

01 · SKIN

Acne & Corrective

Face Reality. Hydrofacials. Peels. Real clearing in 90 days.

Cross-concept rules

Primary CTA on every page — "Book on Vagaro" or its variant. Always above the fold.
Sticky mobile CTA on every page — Call + Book buttons fixed to bottom of screen on mobile.
Three distinct button weights — primary (filled), secondary (outlined or filled lighter), tertiary (text link with arrow).
Cards always link to a detail page where one exists. Never dead-end content.

Spacing scale

Consistent spacing is what makes the design feel intentional rather than ad-hoc. All three concepts share an 8-step scale based on multiples of 4px.

How it's used

4–16px — gaps within a single component (button padding, icon-to-text).
24–32px — between elements inside a section (heading to body, card padding).
48–64px — between section internals on desktop (head to grid).
80–100px — between major sections on desktop. Halved (56–64px) on mobile.