Bojana Hair Studio — Styleguide

A one-chair hair studio on Berninastrasse in Zürich-Unterstrass, run alone by Bojana — a colourist
her former studio publicly calls "a fabulous blonde specialist". Quiet, bright room; the hair is
the loud thing.

Brand DNA

choosing a colourist rather than a salon — booking on a phone, judging by the gallery first.

Reviews are split German/English, so the audience is both local and international.

repeated three times, one big window with the same script in vinyl, planters on the step, and

behind the glass a blush-walled room with black chairs and daylight. Photographic references in

content/assets/places-photos/, keyed in content/operator-notes.md.

specialism and it is third-party endorsed, not self-claimed. She is newly independent — the site's

job is to make a name findable that currently exists only inside a Google listing.

daylit and pale; a moody build would be a lie about the space.

metallics at all — it is white on graphite, full stop.

as a wall, a rule, a band — never as a whole page.

left-text-photo-right hero (used four times).

Voice

Zürich; Sie is the safe default and can be switched to du in one copy-deck pass if she prefers.

Language variant de-CH — no ß anywhere (Strasse, grösste, heissen).

first thing a client notices as false. Warm but economical. She talks about hair, not about

journeys.

· "Beratung zuerst, Farbe danach." · "Rufen Sie an, ich melde mich zwischen zwei Terminen zurück."

certificate for, "beste Coiffeuse in Zürich" as a headline (it is a *client's* sentence and only

ever appears as an attributed quote).

von …", "entdecken Sie", "einzigartig" as filler, "elevate", "unlock", rule-of-three adjective

chains, exclamation marks. Concrete beats evocative: name the service, the duration, the street.

Ihnen durch — inklusive was Ihr Haar realistisch mitmacht."

Where each colour comes from

This section is the audit trail — it exists so nobody later mistakes these for taste.

| Token | Hex | Eyedropped from |

|---|---|---|

| primary | #2E3036 | The shopfront awning, photo 02. sample-colors.mjs returns #2C2E32 at 9.4 % of the image, with point samples #272731, #353541, #3D3C4A. A blue-leaning graphite, not black. |

| accent | #4F6579 | The shopfront itself, photo 02: the glazing, the aluminium window frames and the building's cool render, which the palette returns as #ADB8C6 (7.6 %) and #A9AFB6 (5.7 %). Concentrated to a usable steel-blue. It also happens to be the working colour of her craft — cool tone is what a blonde specialist reaches for to kill warmth — which is why it, not the rose, carries the interactive states. |

| rose | #B07A72 | The interior walls, photos 03 / 07 / 08. Palette hits #AE908B (9.2 %), #A98178, #B2918A; shadowed wall reads #8C6A55, #90776C. Lifted for the underexposure of the phone photos — a dusty clay-rose. Decorative: rules, marks, section bands. |

| blush | #F2E3DE | The same wall where the window light hits it directly (photo 07, left column) — used as a tint field, which is what a wall actually is. |

| bg | #FBF8F6 | White ceiling and joinery under daylight, photos 04 / 09 — warm paper, not pure white. |

| ink | #23252A | The awning graphite, one step deeper, for body text contrast. |

| line, muted | #E7DFDB, #6B6E76 | Neutrals mixed from the two above; the room has no third neutral family. |

No gold. No sage. Nothing from a palette generator.

Color

| Token | Hex | Use |

|---|---|---|

| primary | #2E3036 | Primary CTA, header/footer bands, the "awning" motif |

| primary-ink | #FFFFFF | Text on primary — 13.2:1 |

| accent | #4F6579 | Links, hover and active states, focus rings, accent text — 5.7:1 on bg |

| rose | #B07A72 | Section rules, the eyebrow mark, gallery category tabs, decorative type ≥ 24 px |

| rose-ink | #7E4A42 | Rose-coloured text at body size — 6.8:1 on bg |

| blush | #F2E3DE | Alternating section field, card fill, gallery mat |

| bg | #FBF8F6 | Page background |

| surface | #FFFFFF | Cards, raised surfaces |

| ink | #23252A | Body text — 14.6:1 on bg |

| muted | #6B6E76 | Captions, meta, footer — 4.9:1 on bg |

| line | #E7DFDB | Hairline borders, dividers |

Contrast rule that matters here: rose (#B07A72) is 3.4:1 on bg and therefore

never carries body text. Use rose-ink for rose-coloured words at reading size. This is the

one trap in this palette; the category spec's most repeated warning is exactly this. accent

(#4F6579) is safe at 5.7:1 and is the colour that does the interactive work.

Typography

size without shouting and gives the pages a magazine feel the category asks for. Sentence case,

never all-caps. Tight tracking at display sizes (-0.015em).

without competing. Body 17 px / 1.6.

match to the monoline handwriting on her awning. [TBD: replace with her actual logo as SVG] —

see TODO.md.

the site.

request at runtime).

Scale

| Token | Size | Line | Use |

|---|---|---|---|

| display | clamp(2.75rem, 7vw, 4.75rem) | 1.02 | hero h1 |

| h1 | clamp(2.25rem, 5vw, 3.375rem) | 1.08 | page titles |

| h2 | clamp(1.75rem, 3.4vw, 2.375rem) | 1.15 | section headings |

| h3 | 1.25rem | 1.3 | sub-sections, card titles |

| body | 1.0625rem (17 px) | 1.6 | paragraphs |

| small | 0.875rem | 1.5 | captions, footer |

| eyebrow | 0.75rem | 1.2 | section labels |

Spacing & layout

allowed to break the container and bleed to the viewport edge; text never does.

opening. The site repeats that: a graphite band (header, section labels, footer) sitting over a

wide, light, photographic field. Text sits left in a narrow measure (max 58ch); images take the

wide side. Asymmetric, never centred — except the single centred quote block.

Shape & surface

rectilinear; rounded cards would be imported softness. Pill radius is used for one thing only:

the mobile sticky call button.

recurring mark.

otherwise.

daylight and should look like it — no duotone, no heavy grade, no vignette. Tall portrait crops

(3:4) for hair, wide crops (16:9) for the room. Faces only with consent (content/cautions.md).

Motion

prefers-reduced-motion by disabling all transitions.

Components

Button (primary)

bg: primary · color: primary-ink · radius md · padding 14px 22px · Schibsted Grotesk 600 ·

15 px · tracking 0.01em. Hover: bg: #23252A. Focus: 2 px accent outline, offset 2 px.

Button (secondary)

Transparent · color: ink · 1 px ink border · same metrics. Hover: bg: blush.

Link

color: ink, text-decoration 1 px rose at 3 px offset. Hover: color: accent.

Card

bg: surface · 1 px line · radius lg · padding 24 px · no shadow. Price-band cards use

bg: blush and no border.

Hero — awning-band-script-mark-photo-bleed-left

Graphite band across the top carrying the bojana script wordmark, exactly like the awning. Below

it: a tall portrait photograph bleeding off the left edge to the viewport, and to its right a

narrow text column — eyebrow rule, serif display headline, one sentence, two CTAs (call + services).

Beneath the fold-line, a graphite strip with address · hours-today · phone, mirroring the shopfront's

horizontal banding. On mobile the photo goes full-bleed at the top, text below, sticky call button.

Nav

Sticky, bg: primary, white script wordmark left, links right in Schibsted Grotesk 15 px.

Under 768 px: wordmark + a "Anrufen" button + a hamburger opening a full-height graphite panel.

Section

Padding: sm 48px, md 64px, lg 96px vertical. Alternating field: bg → blush → bg, with

primary reserved for the two banding strips.

Gallery

Masonry-ish CSS grid, 3:4 portrait cells, 8 px gutters, blush mat behind. One tap enlarges into a

simple dialog — no carousel, no lightbox library.

Accessibility

accent/bg 5.7:1 · rose-ink/bg 6.8:1 · rose/bg 3.4:1 → decoration and ≥24 px only.

"Haare".

Anti-patterns specific to this site