Chérie Hair Salon

Overview

Chérie is a luxury hair salon brand system rooted in Editorial Minimalism—a design philosophy that prioritizes content clarity, typographic hierarchy, and restrained elegance. The aesthetic draws from high-fashion editorial design, where white space and serif typography create an atmosphere of refined sophistication. The brand serves discerning clients who view hair color as a personal statement and self-expression, not a commodity. The UI evokes a sense of calm professionalism: clean, uncluttered, and focused entirely on the client's journey from discovery to booking. The emotional response is one of quiet confidence—the salon knows its craft and doesn't need to shout about it.

Chérie's voice is precise, warm, and never condescending. The tone avoids marketing clichés; instead, it speaks directly to the client's desire for transformation and artistry. Vocabulary is sophisticated but accessible: 'color consultation,' 'bespoke service,' 'appointment,' never 'deal' or 'promo.' Example sentence in brand voice: 'Your consultation begins with understanding your vision—we listen first, create second.'

Colors

The color system is built on a high-contrast, editorial foundation: pure white (#ffffff) as the primary surface, pure black (#000000) as the dominant text and secondary accent, and a warm off-white (#f2eee9) as the tertiary surface for subtle depth. This monochromatic base is punctuated by a single tertiary accent—a soft purple (#af7dd1)—used sparingly for highlights, badges, and secondary UI elements to introduce a touch of brand personality without disrupting the minimalist aesthetic.

Primary (#ffffff) is deployed on all Call-To-Action buttons (Book Appointment, Contact) with black text and a 1px black border, creating a high-contrast, clickable focal point. Secondary (#000000) is used for body text, headings, and dark-mode buttons. The outline palette (#757575 for standard, #949494 for

Typography

The type system is a dual-font pairing: EB Garamond (serif, 100–900 weights) for display, headlines, and editorial content; Jost (sans-serif, 300–600 weights) for body, labels, and UI. This pairing creates visual tension that reinforces the brand's editorial heritage—the serif conveys timelessness and luxury, while the sans-serif ensures legibility and modernity. Display (60px, 400 weight, 78px line-height) is reserved for hero headlines and major page titles; Headline-lg (42px, 500 weight) for section headers; Body-lg (18px, 300 weight, 28px line-height) for long-form content and descriptions; Label-md (14px, 500 weight, 0.1em letter-spacing, uppercase) for buttons and interactive labels. All serif headings use 0.02em letter-spacing to enhance elegance; sans-serif body text uses 0em spaci

Layout

The layout system uses a 12-column fluid grid with a max-width of 900px, centered on the viewport. The grid is anchored by a gutter of 24px (md spacing) between columns and 40px (lg spacing) between major content sections. Hero sections span full-width with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Content cards use 24px internal padding (md spacing) and are separated by 40px vertical rhythm (lg spacing). The container max-width of 900px ensures that line lengths for body text remain between 50–75 characters, optimizing readability. Whitespace is intentional: margins between sections follow the spacing scale (sm: 12px for tight grouping, md: 24px for standard separation, lg: 40px for major breaks). Mobile breakpoints compress to

Elevation & Depth

Depth in Chérie is achieved through subtle layering and shadow rather than dramatic visual separation. The elevation system uses three levels: Level 1 (Base) has no shadow—flat surfaces on the white background; Level 2 (Cards, Inputs) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that lifts content 4–8px; Level 3 (Modals, Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), a deeper shadow suggesting 12–16px elevation. All shadows use a 0px horizontal offset and 0px blur spread to maintain a clean, editorial aesthetic—no directional or dramatic shadows.

Shapes

The shape philosophy is Architectural Precision—sharp, clean corners with minimal rounding that reflects the brand's editorial and professional character. Border-radius values are conservative: buttons and inputs use 4px (DEFAULT), creating a subtle softness without appearing playful or rounded. Cards use 4px for consistency with interactive elements. Modals and larger containers use 12px (lg) to provide slightly more breathing room at larger scales. Full-width dividers and badges use 9999px (full) for pill-shaped elements only when semantically appropriate (e.g., badge components). The ration

Components

Action Elements Buttons are the primary interactive component. The primary button (Book Appointment, Contact) uses a white background (#ffffff) with black text (#000000) and a 1px black border, 48px height, 16px vertical padding, 32px horizontal padding, and 4px border-radius. The label uses Jost 14px, 500 weight, 0.1em letter-spacing, uppercase. On hover, the button inverts: black background with white text, maintaining the 1px border. The transition occurs over 150ms (ease-in-out). Secondary buttons use a black background with white text, no border, and the same dimensions; on hover, the background shifts to #e0e0e0 (surface-container-high) with black text. Avoid button text longer than 3 words; use sentence case for longer labels.

Containers & Surfaces Cards are the primary con

Do's and Don'ts

**Do**

• Do use EB Garamond for all headlines and editorial content; reserve Jost exclusively for body, labels, and UI.
• Do maintain a 40px (lg spacing) vertical rhythm between major content sections to create visual breathing room.
• Do apply 0.02em letter-spacing to all serif headings and 0.1em to uppercase button labels for refined elegance.
• Do use white (#ffffff) as the primary CTA button background with black text and a 1px black border for maximum contrast and clarity.
• Do limit the tertiary accent (purple #af7dd1) to badges, highlights, and secondary UI; never use it for primary CTAs or body text.
• Do ensure all text overlaid on photographic backgrounds includes a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) for legibility.
• Do use 4px border-radius for buttons, inputs, and cards; reserve 12px for modals and larger containers only.

**Don't**

• Don't use rounded corners greater than 12px on any component; avoid the 16–40px range entirely as it creates visual ambiguity.
• Don't apply color to borders or backgrounds of input fields; maintain white backgrounds with subtle gray borders (#949494).
• Don't use more than two font families; Jost and EB Garamond are the only approved typefaces.
• Don't apply drop shadows greater than 0 8px 24px rgba(0, 0, 0, 0.2); avoid dramatic or directional shadows that conflict with the editorial aesthetic.
• Don't use the tertiary purple (#af7dd1) for primary interactive elements or body text; reserve it exclusively for secondary accents and badges.
• Don't reduce line-height below 1.5 for body text; maintain 26–28px line-height for optimal readability.
• Don't use system fonts or fallback sans-serifs; always load Jost and EB Garamond from Google Fonts to maintain brand consistency.