Blumenhaus Wiedikon — Styleguide

A neighbourhood florist in Zürich-Wiedikon — flower-market energy, not a wellness-brand pastiche. Runs on foot traffic, phone orders, and delivery.

Brand DNA

• Atmosphere: botanical, ink-and-paper, unfussy, a little bold, warm-handed
• Audience: neighbours in Wiedikon/Zürich looking for a bouquet today (walk-in, phone, or delivery — often gifting: birthdays, Mother's Day, sympathy); mobile-first, arriving from Google Maps
• Inspirations: botanical-illustration plates and cyanotype flower prints (Prussian-blue ink on paper), flower-market signage and ledger books, seed-packet type — not a spa/wellness moodboard
• Differentiators: in-store shopping, kerbside pickup, and delivery all offered; 4.5★/46 reviews; explicitly LGBTQ+ friendly
• Anti-references: not sage-green-and-serif wellness template; not a generic "curated selection" boutique site; not a stock-photo bouquet grid

Greenfield brand build — rationale: no existing website, logo, or rights-cleared photography exists for this business (lead build, not yet in contact). The palette below takes its cue from botanical-illustration printing ink — a deep Prussian blue, historically how flowers were plated and pressed (cyanotypes) — paired with one saturated bloom-pink accent. This was deliberately chosen over green: an early green draft measured too close to other builds already in this portfolio ([silvia-jayet-reflexologie](../silvia-jayet-reflexologie) #2a302a, [touch-of-greene-website](../touch-of-greene-website) #29876b) per check-distinctiveness.mjs, and green is also the reflexive florist-site cliché. Confirm with the operator once contacted; treat as one strong hypothesis, not a locked identity.

Voice

• Register: de-CH primary (Zürich neighbourhood shop), EN secondary. Du-form once contacted — not yet confirmed with the operator (see TODO T6).
• Tone: plain, warm, concrete — a shopkeeper talking, not a brand
• Do say: "frische Blumen, jeden Tag neu eingekauft", "Lieferung in Zürich", "auch spontan vorbeikommen"
• Don't say: "ganzheitliches Erlebnis", "einzigartige Kompositionen", "entdecken Sie die Welt der Blumen" — any of the banned AI-fluff list
• Good/bad example pair:
• Good: "Sträusse ab CHF 15 — wir binden sie, während du wartest."
• Bad (AI-fluff to avoid): "Entdecken Sie unsere einzigartige Welt handverlesener Blumenkompositionen."
• Reading level: 8th–10th grade equivalent; short sentences.

Color

| Token | Hex | Use |

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

| primary | #123F6E | Header/footer bands, primary CTA, ink accents |

| primary-hover| #0C2E52 | Primary CTA hover |

| primary-ink | #F7F3EA | Text/icons on primary |

| accent | #C6486B | Bloom accent — links, highlights, tags |

| accent-ink | #FFFFFF | Text on accent |

| bg | #FBF8F2 | Page background (warm paper, not stark white) |

| surface | #FFFFFF | Cards, raised surfaces |

| ink | #211E1A | Body text |

| muted | #6B6459 | Secondary text, captions |

| line | #E4DCC9 | Borders, dividers |

| success/warn/danger | #3F7A46 / #B07A1A / #9B3A2E | Form/status states only |

Contrast checked: primary/primary-ink and ink/bg both exceed WCAG AA at body size.

Typography

• Headings: Fraunces (serif, has real character without going script/floral-cliché), weights 500/600, sentence case.
• Body: Work Sans — a humanist sans that isn't the Inter SaaS default.
• Webfont source: Google Fonts (self-hosted via astro assets to avoid a Google Fonts network request).

Scale

| Token | Size | Line | Use |

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

| display | 3.25rem | 1.08 | hero h1 |

| h1 | 2.375rem | 1.15 | page titles |

| h2 | 1.75rem | 1.2 | section headings |

| h3 | 1.3rem | 1.3 | sub-sections |

| body | 1.0625rem| 1.6 | paragraphs |

| small | 0.875rem | 1.45 | captions, footer |

Spacing & layout

• Base unit: 8px.
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: max 1120px, gutter 24px, single column on mobile.
• Rhythm: generous — 64–96px between homepage sections; a market stall has breathing room between crates, not a dense grid.

Shape & surface

• Radii: sm 3px (tags), md 6px (buttons, inputs), lg 14px (cards). One extra token — scallop (50% 50% 50% 4%) — for a single signature petal-edge motif on the hero photo frame and section dividers, used sparingly (never on buttons/cards).
• Borders: 1px hairline in line, used on cards and the hours table only.
• Shadows: sm on cards; none on buttons (flat, ink-and-paper feel).
• Imagery treatment: full-color, natural light, generous crops of flowers/arrangements/storefront. No photography exists yet — every image slot ships as a tasteful placeholder (flat botanical-ink illustration/pattern in the token palette) until the operator supplies real, rights-cleared photos. Never use scraped Google Maps user photos (not rights-cleared for reuse). See content/cautions.md.

Motion

• Default: 120–200ms ease-out.
• Use motion for: hover/focus states, hours-table "open now" pulse.
• Don't use: entrance animations, parallax, autoplay carousels.

Components

Button (primary)

• bg: primary, ink: primary-ink, radius: md, padding: 12px 22px, weight: 600.
• hover: primary-hover; focus: 2px accent outline, offset 2px.

Button (secondary)

• bg: transparent, ink: primary, border: 1px primary, otherwise as above.

Card

• bg: surface, border: 1px line, radius: lg, padding: 24px, shadow: sm.

Hero

• Left-text, scalloped photo right — headline + one-line positioning + primary CTA (call) + secondary CTA (directions) on the left; a petal-scalloped (scallop radius) photo/illustration frame on the right, bleeding to the edge on mobile where it stacks below the text. Distinct from other portfolio heroes (arches, checkers, full-bleed scrims) already in use.

Nav

• Simple top bar: logo mark (wordmark, no image yet) left, phone number + "Route" (directions) link right, sticky on scroll. Mobile: sticky bottom bar with tap-to-call + tap-to-directions.

Section

• Vertical padding: sm 48px, md 64px, lg 96px.

Accessibility

• Body text 17px (1.0625rem).
• Visible focus ring (2px accent, offset 2px) on every interactive element.
• All text/background pairs ≥4.5:1.
• Decorative scallop shapes: alt="" / aria-hidden; product/photo imagery gets descriptive alt once real photos exist.

Anti-patterns specific to this site

• No sage-green/cream wellness palette (already the suite's house style elsewhere).
• No fake e-commerce cart/buy-buttons — this is a call/visit/delivery-request site, per the retail-shop category spec.
• No invented stock levels, certifications, or opening hours — hours are genuinely unpublished on Google; ship with a visible [TBD: hours] rather than guessing.
• No reuse of Google Maps user-submitted photos.