Ralfing — Styleguide

A two-studio Structural Integration (Rolfing®) practice run solo by Ralf Eggenberger — EMR-recognised, structured around a 10-session series, working Thursdays/Saturdays in Zürich-Oerlikon and Fridays in Rieden bei Baden.

Brand DNA

• Atmosphere: grounded, precise, unhurried, physical, quietly confident.
• Audience: adults who have already tried other things — physio, osteopathy, massage — and are still in pain or badly aligned. Plus athletes optimising performance. Often researching in the evening on a phone; sceptical, informed, want to understand the method before booking. Zürich-Oerlikon adds an English-speaking, commuter-heavy segment.
• Inspirations: the existing ralfing.ch (brand/inspiration/), his Instagram grid (deep petrol quote cards), and the studios themselves — bright rooms, pale curtains, warm wood, one strong yellow treatment bench.
• Differentiators:
• It is a programme, not an appointment — ten sessions, each with a named theme and a question it answers. Almost nobody in this category shows the structure; he documents all ten.
• Two studios = two weekdays. Choosing a location is really choosing a day. This is a scheduling fact that should behave like navigation.
• A named practitioner with a first-person story, not a clinic. He came to this through his own restless legs and a decade of looking for an answer.
• EMR recognition and supplementary-insurance reimbursement — real, checkable, and currently underplayed.
• Anti-references:
• Not spa/wellness. No candles, no stones, no soft-focus lavender.
• Not clinical-white physiotherapy either — he is not a medical practice and must not imply it.
• Not the sage-green-and-cream AI wellness house style.
• Not the current site's washed-out pale-on-pale, which is where its credibility leaks away.

Voice

• Register: du — this is what the existing site uses ("Erkundige dich", "deine Krankenkasse", "mehr Leichtigkeit in deinem Alltag") and it fits a solo practitioner who works hands-on with people. ⚠️ The current site slips into *Sie* in a few places ("helfen wir Ihnen", "wird Ihnen ein Teil der Kosten zurückerstattet") — the new copy must be consistently du throughout. Confirm with Ralf.
• Language variant: de-CH — no ß, always ss (grosse, Fuss, Schwerkraft). Plus en for the English locale.
• Tone: first person, explanatory, concrete. He is a teacher of the method as much as a therapist — the source copy explains fascia, gravity and Ida Rolf's history at length, and that instinct is right. Keep the explanation, cut the abstraction.
• Do say: "Die Behandlung ist in 10 Sitzungen aufgebaut." · "Wie interagiert dein Körper mit der Schwerkraft?" · "Ich bin EMR anerkannt." · "Erste Behandlung mit Anamnese-Gespräch, ca. 90 Minuten." · "Für mehr Lebensqualität."
• Don't say: anything curative — no "heilt", "beseitigt", "Schmerzfreiheit garantiert". No invented certifications. No hype ("revolutionär", "einzigartig" as filler). Don't restate a client review as a site promise.
• Banned AI-fluff: "nahtlos", "ganzheitliches Erlebnis", "Willkommen in der Welt von …", "entdecke jetzt", "elevate", "unlock", rule-of-three adjective chains, exclamation-mark enthusiasm.
• Good vs. bad example:
• ☑"Die erste Behandlung dauert etwa 90 Minuten und beginnt mit einem Anamnese-Gespräch. Danach schaue ich mir deine Körperstruktur im Stehen, Sitzen und Gehen an."
• ❌ "Erlebe eine ganzheitliche Reise zu deinem wahren Selbst — einzigartig, nachhaltig und transformativ."
• Reading level: 8th–10th grade. The fascia and gravity explanations must survive that — they can, and the source text nearly manages it already.

Color

| Token | Hex | Use |

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

| primary | #1A4A4F | Dark petrol. Header/footer bands, dark sections, headline text on light |

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

| primary-mid | #398489 | The Instagram petrol, verbatim. Icons, section fills, large text. Never body copy (4.34:1) |

| accent | #FFC180 | Apricot. Primary CTA fill — carried over unchanged from the live site |

| accent-ink | #1B1B1D | Text on accent — 10.8:1 |

| accent-hover | #E6AE73 | CTA hover — the site's own --rlf-orange-hover |

| highlight | #7FFFD4 | Aquamarine. Rules, active nav pill, markers, session numbers. Carried over unchanged |

| bg | #FDFDFD | Page background |

| bg-alt | #F5F8F5 | Alternating band background |

| surface | #FFFFFF | Cards |

| ink | #1B1B1D | Body text — 16.6:1 on bg |

| ink-on-dark | #EEF5F4 | Body text inside petrol sections |

| muted | #5A6664 | Captions, footer small print — 5.4:1 |

| line | #DCE5E3 | Dividers |

The colour story: his website gave him aquamarine and apricot but no dark tone, which is exactly why it reads washed out. His Instagram was already using a deep petrol (#398489, sampled at 78% of the quote-card area) — the same hue family as the aquamarine, just dropped in value. Taking that as the dark anchor unifies the two channels instead of inventing anything.

Usage rules

• Apricot is for actions only. If it isn't clickable, it isn't apricot.
• Aquamarine is a marker, not a surface — rules, underlines, the active nav pill, session numerals. Never a large fill behind long text; it is far too bright.
• Petrol carries the structure: header, footer, and one or two full-bleed sections per page.
• Contrast floor: 4.5:1 for anything under 24px. The old site's pale-grey-on-off-white body text is the single defect the rebuild must not repeat.

Typography

• Headings: Crimson Text, weight 400 (600 for h3), letter-spacing 0.05–0.06em. Sentence case for page titles; uppercase reserved for the overline label. This carries over the source site's one genuine typographic decision — a wide-tracked serif — but at readable weight and full-contrast colour.
• Body: Schibsted Grotesk, 17px (1.0625rem), line-height 1.65. Replaces the source's Roboto, which was a Joomla default rather than a choice.
• Webfont source: Google Fonts, self-hosted via @fontsource so no third-party request is needed at runtime (the current site's cookie banner already blocks embeds — the new one shouldn't add more).

Scale

| Token | Size | Line | Tracking | Use |

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

| display | 3.25rem | 1.12 | 0.06em | Hero h1 |

| h1 | 2.5rem | 1.16 | 0.06em | Page titles |

| h2 | 1.875rem | 1.22 | 0.05em | Section headings |

| h3 | 1.25rem | 1.35 | 0.01em | Sub-sections, session titles |

| lead | 1.25rem | 1.6 | — | Intro paragraph |

| body | 1.0625rem | 1.65 | — | Paragraphs |

| small | 0.875rem | 1.5 | — | Captions, footer |

| overline | 0.75rem | 1.4 | 0.14em | Uppercase section labels |

Spacing & layout

• Base unit: 8px (4px available for fine adjustment).
• Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Container: 1080px max, 24px gutter, single column on mobile. Full-bleed bands cap their inner content at 1440px.
• Rhythm: generous — 96px between major sections on desktop, 64px on mobile. The source site's instinct for space was right; what it lacked was contrast, not air.

Shape & surface

• Radii: sm 4px (inputs), md 10px (cards), lg 20px (images/panels), pill (buttons, nav active state). The pill is inherited — the live site's CTA is a 26px-radius pill and its active nav item is a pill too.
• Borders: 1px line on cards and dividers; the aquamarine hairline under the sticky header is a direct carry-over from the current design.
• Shadows: petrol-tinted, never neutral grey. sm for cards, md on hover, lg for the mobile booking sheet.
• Imagery treatment: full colour, warm, real. Wide crops of the studios and of hands-on work. Faces are fine where a release exists — otherwise crop to hands, backs, and posture. No stock photography.

Motion

Revised 2026-08-14: the source site's own user.min.css turned out to have a real motion

vocabulary, and the brief is to carry it over rather than strip it. Everything below is derived

from it — nothing is invented.

What the source does (media/templates/site/cassiopeia_ralfing/css/user.min.css):

| Source rule | What it does | Carried over as |

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

| @keyframes fadein on .site-grid | page fades in, 0.5s, forwards | main fades in on load |

| @keyframes overlay | badge drops in from scale(.8) translateY(-100px) and settles at rotate(-8deg), 1s delay | the .badge (EMR trust mark) |

| .blog-item.outside → .coming-in | two-stage reveal: block translateY(50px)→0 at 0.5s/0.2s delay, inner content at 1s/0.4s | scroll reveal on every section, block then contents |

| link background-size: 4px 0 + transition: all .25s | underline grows on hover | text links grow 1px → 3px |

| #menu-btn.open bars rotating ±45° | burger morphs to an X, 0.25s | mobile menu toggle |

| nav max-height: 0 + transition: all .5s | menu slides open | drawer slide |

| .button { transition: all .2s } | button state change | button hover, plus a 2px lift |

Tuning applied. Travel pulled back from 50px to 28px, and the content stage from 1s to 600ms

— the original's second stage reads as sluggish on a fast connection, arriving well after the eye

has already moved on. The -8deg tilt is kept exactly.

• Durations: 120ms (fast) · 200ms (base) · 320ms (slow) · 600ms (reveal) · 500ms (badge drop).
• Easings: cubic-bezier(0.2, 0.7, 0.2, 1) for state changes, cubic-bezier(0.16, 1, 0.3, 1)

for anything that travels.

• Use for: page and hero entrance, one-time scroll reveals, hover/focus states, the 10-session

accordion, the sticky booking bar riding in past the hero, image zoom on hover (≤3%).

• Don't use for: parallax, autoplay video, anything that re-hides on scroll up, anything that

moves after the user has started reading, or a scroll-chevron (the source has one; it is

decoration that costs a tap target).

Round 2 — extended set

Added on request. Everything still obeys the non-negotiables below.

| Effect | Behaviour | Source |

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

| Per-item cascade | Lists and grids stagger by 70ms per child (--i) instead of arriving as one slab. Applies to the 10 sessions, condition lists, review cards, studio cards, footer columns. | extends the source's two-stage reveal |

| Scroll-down control | Apricot circle at the foot of the hero, bobs gently, jumps to the first section. | the source's .scroll-down-link — apricot, circular, 200ms ease-in |

| Back to top | Petrol circle, bottom right, appears past 1.2 viewports. | the source's .back-to-top-link — circular, --rlf-green-transparent, 200ms ease-in |

| Condensing header | Past 40px the bar shortens, gains a shadow and thins its aquamarine rule. | new — the source's header is static |

| Hero parallax | Photograph drifts at 30% of scroll speed while the hero is in view. Transform only, never scroll-jacking. | new |

| Price count-up | "CHF 138" counts up once, ease-out cubic, when it first enters view. Tabular numerals so nothing reflows. | new |

| Page transitions | Cross-fade between pages via Astro's view transitions. | new |

Restraint rules for the extended set

• The cascade caps at ~70ms per item: a 10-item list must finish well under a second, or the visitor

outruns it while scrolling.

• Parallax is capped at 30% and only while the hero is on screen — beyond that it reads as lag.
• The count-up fires once and only above 60% visibility, so a fast scroll past never leaves a

half-counted number on screen.

• The scroll-down and back-to-top controls are real links with accessible names, not decoration.

Non-negotiables

• prefers-reduced-motion: reduce disables all of it — durations collapse to 1ms and every

hidden/displaced element is forced visible. Verified.

• Reveals are JS-gated. The hidden state lives behind a .js-reveal class that only script

adds, so with JS off — or for a crawler — every section renders plain and visible. Verified at

10/10 sections.

• Reveal once, never re-hide. The observer unobserves on first intersection.
• Anything already in the viewport at load reveals immediately rather than waiting for a scroll

that may never come.

Components

Buttons

• Primary: apricot fill, ink text, pill radius, 12px/24px padding, body size at weight 600. Hover → accent-hover. This is the site's existing CTA, kept.
• Secondary: petrol outline 1px, petrol text, pill radius, transparent fill. Hover → petrol fill, white text.
• On dark: white fill, petrol text.
• Focus ring: 2px aquamarine, 2px offset — visible against every background in the palette.

Header

Sticky, white, 72px tall, aquamarine 3px hairline beneath (carried over from the current site). Logo mark left, nav centre-right, apricot "Termin vereinbaren" pill hard right. Mobile: logo + hamburger, with the booking pill pinned in a bottom sticky bar rather than in the drawer.

Hero

Full-bleed studio photograph, petrol scrim at ~35% for text legibility, headline and lead left-aligned over it on desktop and below it on mobile. The logo watermark centred over the hero on the current site is dropped — it obscures the photograph and duplicates the header mark. A location/day chooser sits directly under the CTA, since picking a studio is picking a weekday.

Location cards

Two side by side, surface fill, md radius, 1px line. Each carries: studio name, address, its day(s) and hours, the access notes (floor, lift, parking, public transport — he has written good ones already), a static map thumbnail, and its own "Termin in <Studio>" button. These are the highest-value practical content on the site and are currently buried in the footer.

Session list (the 10 sessions)

Numbered accordion. Numeral in aquamarine at display size, title in h3, the "zentrale Fragestellung" as body copy inside. Sessions 8–10 group into one item, as the source content does. This is the practice's strongest differentiator and should sit high on the method page.

Review cards

bg-alt fill, no shadow, quote in lead size, attribution in small/muted, 5 aquamarine stars. Short quotes only, attributed by name as Google shows them. No aggregateRating schema and no numeric rating claims in copy.

Footer

Petrol band, ink-on-dark text. Three columns: contact (phone, WhatsApp, email), the two studios with addresses and hours, social + legal. The current footer is genuinely well-organised — it keeps its structure and gains legible contrast.