Coiffeur Andre — Styleguide

A compact, direct hair salon website for Coiffeur Andre in Zurich-Oerlikon: skilled, practical, local, and photo-led.

Brand DNA

• Atmosphere: precise, friendly, unfussy, local, trusted.
• Audience: mobile-first Zurich customers who want a clear haircut contact path, proof from real photos, and practical details before messaging.
• Inspirations: real Google Places salon photos, high Google rating, late weekday opening hours.
• Differentiators: strong 4.9 Google rating, Oerlikon location, English-speaking service mentioned in reviews, practical WhatsApp contact.
• Anti-references: not luxury perfume retail, not a generic wellness salon, not a pastel beauty template, not a startup-style landing page.

Voice

• Tone: confident, plain-spoken, warm, and practical.
• Do say: "Send a WhatsApp", "Cuts with care", "Bring a reference photo", "In Zurich-Oerlikon".
• Don't say: invented awards, inflated luxury claims, "transformational experience", current prices without source.
• Reading level: clear everyday language.

Color

• primary #1F1F1D: headers, dark bands, primary CTA.
• primary-ink #F8F3EA: text on dark surfaces.
• accent #B98A56: warm brass accent for small highlights.
• bg #F8F3EA: warm page background.
• surface #FFFFFF: content surfaces.
• ink #1F1F1D: body text.
• muted #6E665C: secondary text.
• line #DDD1C1: dividers and borders.

Contrast: dark-on-warm and warm-on-dark pass WCAG AA for normal text.

Typography

• Headings: Georgia stack, heavy editorial serif, no negative letter spacing.
• Body: Arial/Helvetica system sans for practical readability.
• Mono: system mono only for technical references if needed.

Spacing & layout

• Base unit: 4px.
• Container: 1180px max, 24px mobile gutter.
• Rhythm: compact service/contact sections; hero and gallery get larger, image-led spacing.

Shape & surface

• Radii: small, mostly squared-off corners; max 8px.
• Borders: thin warm dividers, visible but quiet.
• Shadows: used sparingly for the main contact panel only.
• Imagery: real salon photos, full color, crisp crops, not blurred background decoration.

Motion

• Subtle hover and focus feedback only.
• No parallax, scroll drama, or autoplay video.

Components

Button

Primary buttons use dark background, warm ink, 4px radius, bold sans text, and a brass hover state. Secondary buttons are transparent with a dark border.

Hero

Asymmetric editorial hero: large serif headline, practical rating and location facts, real salon photo, primary WhatsApp CTA.

Gallery

Curated grid of actual salon photos. Images are proof and should remain inspectable.

Contact

High-contrast band with WhatsApp, phone, directions, hours, and address in one scannable area.

Accessibility

• Minimum body size: 17px.
• Visible focus rings.
• No low-contrast text on photos.
• All gallery images have descriptive alt text.

Anti-patterns specific to this site

• Do not invent service prices.
• Do not hide contact behind a form.
• Do not use stock salon models.
• Do not use rounded, bubbly beauty-salon styling.