Markstein AG — Styleguide

A Swiss real-estate group in Baden and Zürich, serving private buyers/sellers/renters and

institutional investors/developers — positioned as understated, precise, and trustworthy rather

than flashy. Editorial confidence, not luxury-cliché.

>

v2 (2026-08-13): photography-led. After a deeper extraction of markstein.ch, the site is now

carried by Markstein's own architectural photography rather than flat colour panels. The palette

stepped back to let the buildings speak; the burgundy became a precise accent instead of a large fill.

Brand DNA

• Atmosphere: precise, understated, warm-neutral, editorial, quietly confident
• Audience: two distinct groups on the same site — private home buyers/sellers/renters (emotional, needs reassurance) and investors/developers (analytical, needs credibility and process clarity)
• Inspirations: the current markstein.ch (Elementor/Bootstrap build, generic but with one real brand asset — a burgundy house-silhouette pentagon used as a photo mask), and the sister Müligasse Döttingen project microsite (same pentagon motif, thin tracked uppercase display type, warm cream background). Screenshots in brand/inspiration/.
• Differentiators: the pentagon "house silhouette" photo-mask is genuinely distinctive — no other Swiss agency site uses this shape system. The two-track homepage (private vs. investor) mirrors how the business actually splits its work, which most agency sites collapse into one generic "buy/sell/rent" menu.
• Anti-references: not a shiny luxury-listings carousel with drone footage and gold accents; not a generic property-portal clone (dense grid of thumbnail cards, filter sidebar); not SaaS-startup Inter-on-white; not the current site's stock Bootstrap blue (#0d6efd) which has nothing to do with the brand.

Voice

• Register: Sie (formal) — matches the existing German-only site and the professional-services tone of the reviews.
• Tone: confident, precise, warm but not chatty. Reviews describe the actual client experience as "structured", "transparent", "reliable" — that's the voice to write in, not marketing hype.
• Do say: "Wir kennen den lokalen Markt" (we know the local market), "Ihr Ansprechpartner" (your point of contact), concrete process language (Bewertung, Transaktionsmanagement, Bautreuhand).
• Don't say: "einzigartig" as filler, "ganzheitlich", "Willkommen in der Welt von…", unverified superlatives ("Switzerland's #1..."), invented stats.
• Banned AI-fluff: "nahtlos"/seamless, "entdecken Sie", "elevate", "unlock", exclamation-mark enthusiasm, rule-of-three adjective chains.
• Good/bad example: Good — "Wir bewerten Ihre Immobilie auf Basis lokaler Markterfahrung." Bad (AI-fluff) — "Entdecken Sie eine völlig neue, ganzheitliche Art, Ihre Traumimmobilie zu erleben!"
• Reading level: professional but plain — a busy homeowner or a board member should both get through it fast.

Color

| Token | Hex | Use |

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

| primary | #8E202B | CTAs, active nav state, rules, numerals — a precise accent, never a large flat fill |

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

| secondary | #7C8087 | Quiet UI, secondary panels |

| accent | #B08D57 | Eyebrows and links on dark photography (gold reads where burgundy dies) |

| surface-deep | #14110F | Stats band, footer, CTA bands |

| bg | #FBF9F6 | Page background (warm bone, not stark white) |

| surface | #FFFFFF | Cards, raised panels |

| surface-alt | #F1ECE5 | Alternating section backgrounds |

| ink | #14110F | Body text, headings |

| muted | #6B655F | Secondary text, captions, metadata |

| line | #E2DBD1 | Hairline borders, dividers |

| line-strong | #CFC5B8 | Emphasised rules, form underlines |

| success/warn/danger | #3F6B4A / #A8791E / #9B3A2E | Form states only |

Contrast: ink on bg and primary-ink on primary both pass WCAG AA at body size.

Typography

• Headings: Fraunces (serif, optical/soft, weight ~380–450), tight tracking on large sizes. Gives the editorial, trustworthy weight that pure Helvetica-style sans lacked on the old site.
• Body: Public Sans, 17px base, line-height 1.65 — clean Swiss-grotesk register without defaulting to Inter.
• Eyebrow/labels/nav: Public Sans, small size, uppercase, wide tracking (0.16em) — this is the one thing worth keeping literally from the old site's NeueHelveticaPro uppercase-tracked labels ("AKTUELLE WOHNOBJEKTE").
• Webfont source: Google Fonts (Fraunces, Public Sans) — both open-license, close substitutes for the proprietary NeueHelveticaPro without copying it.

Scale

| Token | Size | Line | Use |

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

| display | clamp(2.75rem, 6.2vw, 5.5rem) | 0.98 | hero headline |

| h1 | clamp(2.15rem, 4.2vw, 3.5rem) | 1.06 | page titles |

| h2 | clamp(1.75rem, 2.9vw, 2.5rem) | 1.12 | section headings |

| stat | clamp(2.5rem, 4.6vw, 3.75rem) | 1.0 | the trust numbers |

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

| lede | clamp(1.0625rem, 1.35vw, 1.25rem) | 1.6 | intro paragraphs |

| body | 1.0625rem | 1.7 | paragraphs |

| small | 0.875rem | 1.55 | captions, footer |

| eyebrow | 0.75rem | 1.4 | overline labels (tracking 0.2em) |

All display sizes are fluid clamp() — the hero must hold its editorial scale on a phone

without a separate mobile type ramp.

Spacing & layout

• Base unit: 8px.
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 144, 200.
• Container: max 1280px for text-led sections, wide 1580px for photography/nav, gutter 28px, single column on mobile.
• Rhythm: generous — sections breathe at 96–144px vertical padding on desktop; this is a considered-purchase business, not a fast-scroll consumer site.

Shape & surface

• Radii: zero on every surface — cards, images, panels and bands are hard-edged and architectural. CTA buttons remain fully pill-shaped (9999px), a deliberate callback to the existing site's black pill buttons and the one soft form on the page.
• Borders: hairline (1px, line token) between list rows and around outlined cards; otherwise borderless, relying on background-color shifts (surface vs surface-alt) for separation.
• Shadows: minimal — sm only on hover states for cards, md for the sticky mobile CTA bar. No heavy drop shadows.
• Imagery treatment: Markstein's own architectural and interior photography (content/assets/markstein-photos/), full-colour, generous crops, one photo per section rather than dense grids. Photography does the emotional work; the type stays quiet.
• The signature move: section-break photography is masked into the pentagon house-silhouette (shape.house-pentagon-clip) rather than a rectangle — the one element carried forward literally from the current brand. Used sparingly (once or twice per page), never as a flat coloured shape.
• Scrims: any text over photography sits on a two-layer scrim (left-weighted + vertical) so the headline has dark ground regardless of what the photo does. Never set type directly on an unscrimmed image.

Motion

• Default: subtle, ≤220ms ease-out.
• Use motion for: hover states on cards/buttons, mobile nav reveal, accordion expand (team/services detail).
• Don't use motion for: hero entrance animations, parallax, autoplay carousels.
• The only real motion on the site is a slow (620ms) photo scale on card hover.

Components

Button (primary)

• bg: primary, ink: primary-ink, radius: pill, padding: 14px 28px, weight 500, eyebrow-style letter-spacing on the label text (uppercase, small, tracked).
• hover: darken primary ~8%; focus: 2px primary outline, 2px offset.

Button (secondary)

• bg: transparent, ink: ink, border 1px ink, radius pill, same padding/tracking as primary; hover fills with surface-alt.

Card

• Reference/project cards are image-first and chrome-free: photo (4:3, hard-edged), then eyebrow / title / one line of copy beneath. No border, no shadow, no rounded corner. Hover scales the photo 1.05 inside its frame.
• Track cards (the two homepage entry points) are full-bleed photos with a bottom scrim and copy laid over them.

Hero

• Full-bleed architectural photograph, min-height min(92vh, 880px), content bottom-left over a two-layer scrim. Eyebrow (gold, the motto), display serif headline, one lede line, two CTAs. The nav sits transparent over it and turns solid on scroll.
• The private/investor split moved *below* the hero into two large photo track cards — it is an IA decision, not a hero layout.

Stats band

• Dark (surface-deep) band directly under the hero carrying the four published trust numbers (20 Jahre · 55'000 · CHF 1 Mrd. · 2 Standorte) as large serif numerals over hairline rules. This is the single highest-credibility element on the page — real estate is bought on trust.

Numbered rows

• "Warum Sie uns vertrauen können" and the 5-stage sales process render as numbered rows/steps separated by hairlines — editorial, no boxes, no cards.

Nav

• Sticky, transparent over the hero, solid surface background with line bottom-border once scrolled. Wordmark left (lowercase "markstein", matching the existing logo's lowercase treatment), primary nav right, "Bewertung anfragen" (request a valuation) as a persistent pill CTA.

Section

• Vertical padding: 64px mobile / 96px tablet / 144px desktop for major sections; 48px for dense sub-sections.

Accessibility

• Body text 17px minimum.
• Visible focus rings everywhere (2px primary, 2px offset) — never outline: none without a replacement.
• All interactive elements ≥4.5:1 contrast, including on the pentagon photo overlays (text sits on the solid-color mask, not directly on photo).
• Decorative pentagon photo masks get empty alt; informative photography gets descriptive alt.

Anti-patterns specific to this site

• No fabricated property listings with invented addresses/prices (see build/decisions.md) — use illustrative property-type categories instead, clearly framed as categories, not live inventory.
• No stock "luxury real estate" clichés — gold foil, drone establishing shots, champagne-toast imagery.
• Don't collapse the private/investor split into one generic "services" list — it's structurally how the business works and should stay visible in the IA.
• Don't reuse the source site's Bootstrap blue (#0d6efd) anywhere — it's a theme default, not brand.