Editorial Olive

Craniosacrale Körperarbeit & Yoga

Stefanie Kaindl

Sanfte Berührung und Bewegung — Pfaffenhofen a. d. Ilm & Paunzhausen.

Design System · Stefanie Kaindl

Editorial Olive

Papier statt Weiß, Tinte statt Schwarz, eine einzige Olive. Zwei gleichwertige Angebote, eine Person, ein leiser Ton — große Serif-Überschriften in niedrigem Gewicht, Haarlinien statt Rahmen, und Olive als einzige Akzentfarbe.

Diese Seite ist die Übersicht: Tokens, Typografie, Formen und alle achtzehn Komponenten der Website — jede mit ihrem Vertrag. Sie ist aus dem Bestand abgeleitet, nicht entworfen: jeder Wert hat eine Quelle im Repo.

Quelle: /opt/sites/stefanie-kaindl-cranio Stand: redesign/editorial-olive @ aacdf3e Sync: 17.10.2026 32 Farb-Tokens · 20 Typostile · 18 Renditionen
Prinzipien

Drei Entscheidungen tragen alles.

  1. Papier statt Weiß, Tinte statt Schwarz. Grundfläche ist ein warmes Papier #f3f0e9, Schrift ein warmes Tintenschwarz #1d1c17 (15,0:1). Reines Weiß und reines Schwarz kommen nicht vor.
  2. Eine einzige Akzentfarbe: Olive #616949. Olive ist Fläche (Bänder, Footer), Textlink auf Papier (5,1:1), Button-Variante und Fokusring. Es gibt keine zweite Markenfarbe — Türkis, Blau, Korall gab es einmal (Legacy-Tokens sage, therapeutic, taupe) und darf nicht zurückkommen.
  3. Keine Kästen. Flächen statt Karten, Haarlinien statt Rahmen, Weißraum statt Schatten. Ein Block ist entweder eine ruhige Fläche oder eine dünne Linie — niemals ein umrandeter Kasten mit Schatten.
  4. Gedämpfte Töne über Alpha, nicht über neue Hex-Werte. ink-60 ist rgba(29,28,23,.68), nicht ein neues Grau. Jede Textfarbe wird gegen die tatsächliche Fläche gemessen — gegen paper-deep, nicht nur gegen Papier.
  5. Bewegung ist immer ein Einblenden, nie ein Effekt. Ein Easing, vier Dauern, Hover-Bewegungen von 2 px. prefers-reduced-motion schaltet alles ab — verpflichtend.
Farbe

Eine Palette, zwei Flächen.

Links die Fläche, in der Mitte der Wert (Papier-Kontext), rechts der gemessene Kontrast. Die zweite Zeile jeder Zelle nennt den Wert für die inverse Fläche — Olive oder dunkles Foto. Es gibt keinen Dark-Mode: die „zweite Fläche" ist eine Bild- und Bandfläche, keine Umschaltung.

FlächeTokenWertKontrast (gemessen)
Fläche
--paperinvers: #241a11#f3f0e9—
--paper-softinvers: #f3f0e9#f8f6f1—
--paper-deepinvers: #eae6db#eae6db—
--paper-darkinvers: #ded9cb#ded9cb—
Tinte
--inkinvers: #f3f0e9#1d1c1715,0:1 Papier · 13,7:1 paper-deep
--ink-80invers: rgba(243, 240, 233, 0.8)rgba(29, 28, 23, 0.8)8,3:1 Papier
--ink-60invers: rgba(243, 240, 233, 0.72)rgba(29, 28, 23, 0.68)5,5:1 Papier · 5,3:1 paper-deep
--ink-45invers: rgba(243, 240, 233, 0.45)rgba(29, 28, 23, 0.65)5,0:1 Papier · 4,8:1 paper-deep
--ink-700invers: #f3f0e9#57554d6,6:1 Papier
--ink-600invers: #f3f0e9#5f5d565,8:1 Papier
--ink-500invers: #f3f0e9#67655d5,1:1 Papier · 4,7:1 paper-deep
--ink-400invers: #f3f0e9#8a877b3,2:1 Papier — nur große Schrift
Olive
--oliveinvers: #616949#6169495,1:1 Papier
--olive-deepinvers: #4d5438#4d54387,0:1 Papier
--olive-softinvers: #8d9375#8d93752,8:1 Papier — nur Dekor
--olive-tintinvers: #3f4530#e5e7db—
Invers — auf Olive und dunklem Foto
--creaminvers: #f3f0e9#f3f0e95,1:1 Olive · 15,0:1 Fotogrund
--cream-80invers: rgba(243, 240, 233, 0.92)rgba(243, 240, 233, 0.92)4,6:1 Olive — kleinste AA-Stufe
--cream-70invers: rgba(243, 240, 233, 0.72)rgba(243, 240, 233, 0.72)3,5:1 Olive · 8,3:1 Fotogrund
--cream-60invers: rgba(243, 240, 233, 0.6)rgba(243, 240, 233, 0.6)2,9:1 Olive — Dekor
--cream-45invers: rgba(243, 240, 233, 0.45)rgba(243, 240, 233, 0.45)2,3:1 Olive — Dekor
--cream-15invers: rgba(243, 240, 233, 0.15)rgba(243, 240, 233, 0.15)—
Linien und Foto
--lineinvers: rgba(243, 240, 233, 0.2)rgba(29, 28, 23, 0.13)—
--cream-lineinvers: rgba(29, 28, 23, 0.13)rgba(243, 240, 233, 0.2)—
--photo-groundinvers: #241a11#241a11—
--photo-veilinvers: #6b7250#6b7250—

Warnung: Cream auf Olive hält kein AA

cream-70 3,5:1 · cream-60 2,9:1 · cream-45 2,3:1 auf #616949. Im Footer tragen genau diese Werte Kleinschrift (Linktexte 14 px, Zeiten 13 px, Spaltenköpfe 11 px). Kleinste tragfähige Stufe auf Olive ist cream-80 (4,6:1), volles cream 5,1:1. Auf dem dunklen Fotogrund ist cream-70 dagegen mit 8,3:1 unbedenklich.

Typografie

Zwei Familien, zwei Rollen — keine dritte.

Hanken Grotesk für alles Lesbare, Cormorant Garamond für Wortmarke, große Überschriften, Preise und kursive Akzente. Cormorant hat eine kleine x-Höhe: große Grade brauchen sie, kleine nicht — deshalb steht sie auf 400/500 und immer eine Stufe größer als die Sans. In Zahlen immer lining-nums.

StilMuster
Display (Serif) — serif
hero.d1-hero 60px · lh 1.1 · w 400 · clamp(1.95rem, 3.9vw, 3.75rem) Hero-Headline, zwei <span>-Blöcke, je Zeile text-wrap: balance. Nie kürzen, nie fett. Raum, um anzukommen.
display-1.d1 88px · lh 1.12 · w 400 · clamp(2.35rem, 6vw, 5.5rem) Nur zusammen mit .d1-hero auf den Köpfen der Unterseiten (PageIntro). Craniosacrale Körperarbeit
display-2.d2 46px · lh 1.12 · w 400 · clamp(1.7rem, 3vw, 2.9rem) Sektions- und Kartenüberschrift. Der Standard nach dem Hero. Yoga am Donnerstag
display-2-serif.display-serif.d2 64px · lh 1.12 · w 400 · clamp(2.15rem, 4.5vw, 4rem) Die große Serif-Zeile auf einer Fläche (Footer-Aussage, CTA-Band). Zur Ruhe kommen.
display-3.d3 29px · lh 1.15 · w 400 · clamp(1.3rem, 1.9vw, 1.8rem) Kleinste Serif-Überschrift (Yoga-Day-Block, Nebenblöcke). Ein Tag nur für dich
price 30px · lh 1 · w 500 · clamp(1.5rem, 2vw, 1.85rem) Preiszeile in PriceRow und in der Kursliste. Immer lining-nums; die Einheit steht in 0.55em und ink-500. 73 €
serif-title 26px · lh 1.15 · w 500 · clamp(1.35rem, 1.8vw, 1.65rem) Titel einer Preiszeile; Tage und Zeiten im Footer. Craniosacrale Behandlung
brand-mark.serif (+ .footer-mark im Fuß) 21px · lh 1 · w 500 · ls 0.18em Wortmarke: Kopfzeile 1.05rem mobil / 1.3rem ab md, im Footer über die volle Inhaltsbreite (Größe = Inhaltsbreite / 10,898). Immer uppercase. Stefanie Kaindl
brand-sub 9px · lh 1 · w 500 · ls 0.36em Zweite Zeile der Wortmarke: 0.5625rem mobil / 0.625rem ab md, im Footer 0.48 × Markengröße. CRANIO SACRAL
Text (Sans) — sans
quote.quote 43px · lh 1.26 · w 300 · clamp(1.45rem, 2.9vw, 2.7rem) · ls -0.01em Zitat in der Sans, nicht in der Serif. Deutsche Anführung unten/oben. Auf Olive: .quote-cream. „Die Behandlung ist eine Wohltat für Körper, Geist und Seele.“
lead-lg.lead-lg 22px · lh 1.38 · w 400 · clamp(1.05rem, 1.5vw, 1.4rem) Einstiegstext direkt unter einer Display-Headline, max ~46rem. Auf Olive oder Foto: .lead-lg-cream. Bei mir findest du zwei Wege, wieder bei dir anzukommen.
lead.lead 18px · lh 1.65 · w 400 · clamp(0.95rem, 1vw, 1.125rem) Vorlauf unter einem Seitenkopf. Kurs 1 startet um 17:30 Uhr, Kurs 2 um 19:00 Uhr.
body.body-copy 15px · lh 1.75 · w 400 Standard-Fließtext der Sektionen. Im Bestand meist als text-[0.9375rem] mit ink-600. Eine sanfte, achtsame Berührung — mit einem Druck von nur etwa fünf Gramm.
body-small 14px · lh 1.6 · w 400 Fußnoten, Rechtstext in Karten, Bildunterschriften. Matten und Hilfsmittel sind vor Ort.
ui 13px · lh 1 · w 400 Button- und CTA-Beschriftung. Nie fett, nie uppercase. Termin online buchen
nav 13px · lh 1 · w 400 · ls 0.01em Menüpunkt der Kopfzeile. Kein uppercase, keine Sperrung. Cranio · Yoga · Über mich · Kontakt
meta.meta-line 11px · lh 1.4 · w 400 · ls 0.02em Metazeile über einem Wert (Facts, Formularbeschriftung, Kursdaten). Erwachsene · ca. 60 Min
label.label 10px · lh 1.2 · w 400 · ls 0.055em Eyebrow mit vorangestelltem Punkt (2,2 px, currentColor, 75 %). Als Sektionslabel zusätzlich .label-caps (0.18em, Versalien). 01 · Cranio
label-caps.label.label-caps 10px · lh — · w 400 · ls 0.18em Versalien-Variante: Sektionslabel, Footer-Spaltenkopf, Gruppe im mobilen Menü. SEITEN
marquee 11px · lh — · w 400 · ls 0.4em Laufschrift am Fußrand. Dekor (aria-hidden), 42 s linear, bei prefers-reduced-motion aus. RAUM FÜR DICH
Raster & Form

Ein Container, ein Rhythmus, wenig Radius.

Container und Rhythmus

  • .shell — max-width:1560px, zentriert, padding-inline 24 / 40 / 56 px. Kopfzeile und Sektionen teilen exakt dieses Raster.
  • .section — clamp(4rem, 8vw, 8.5rem) vertikal. .section-tight clamp(3rem, 5.5vw, 6rem).
  • Raster — 12 Spalten für redaktionelle Sektionen, 2/3 Spalten für Kartenreihen. Kein asymmetrisches Sonderraster.
  • Sprungmarken — scroll-margin-top: 6.5rem, sonst landet ein Anker unter der festen Kopfzeile.

Radius und Tiefe

  • Radius ist selten — Flächen, Preiszeilen, Felder, Bildrahmen sind 0 px. Die wenigen echten Karten nehmen 6–8 px.
  • Alles Runde ist vollrund — jeder Button, jede Pille, jeder Punkt, die Kreisbögen: 9999px.
  • Zwei Schatten insgesamt — warm-shadow für schwebende Elemente, der Schatten des Papierblocks auf dem dunklen Buchungsfoto. Dazu on-photo: ein weicher Hof hinter Schrift auf Bildern.
radius-none0px
radius-xs6px
radius-sm8px
radius-full9999px
warm-shadowDer einzige reguläre Schatten — Overlay, Popover, mobile Menüfläche.
card-shadowDer Papierblock auf dem dunklen Buchungsfoto — Sonderfall, einmal pro Seite.
on-photo-shadowSchrift auf Foto (.on-photo). Mobil der stärkere Hof — dort trägt der Schatten die Lesbarkeit, nicht der Schleier.
TokenWertEinsatz
space-14pxPunkt vor Label, feinste Abstände.
space-28pxLabel zu Wert (Facts, Formularbeschriftung), Zeilen in Linklisten.
space-312pxBildabstand im Bildband, Initialen zu Name.
space-416pxStandardabstand zwischen Textblöcken, Rasterabstand in Kartenreihen.
space-520pxAbstand unter einer Sektions-Headline (mt-5), Kontaktblöcke.
space-624pxLabel zu Headline (mt-6), Kartenabstand.
space-728pxEinstiegstext unter der Headline (mt-7), Aktionsreihe (mt-7).
space-832pxHandlungszeile (mt-8), Faktenblock (mt-9).
space-1040pxAbstand zwischen Aktionsgruppe und Folgesektion.
space-1456pxKurskarten (mt-14), Haarlinie unter einem Zitat (mt-14).
space-1664pxFooter-Wortmarke, große Blockabstände.
section-yclamp(4rem, 8vw, 8.5rem).section — vertikaler Rhythmus jeder Sektion (64–136 px).
section-y-tightclamp(3rem, 5.5vw, 6rem).section-tight — Sektionen ohne eigenen Kopf (48–96 px).
shell1560px / 24–56px.shell — EIN Container für Kopfzeile und Sektionen. padding-inline 24 px, ab 768 px 40 px, ab 1280 px 56 px.
measure46remStandard-Textbreite eines zentrierten Blocks (736 px).
anchor-offset6.5remscroll-margin-top für section[id] / div[id] unter der festen Kopfzeile.
Bewegung

Ein Easing, vier Dauern.

Hover-Bewegungen sind winzig: der Pfeil wandert 2 px, die Menülinie wächst von der Mitte (scaleX 0→1, 350 ms), das Reveal verschiebt 16 px. Fokus ist immer outline: 2px solid var(--olive) mit 3 px Offset.

Komponenten

Achtzehn Renditionen, jede mit ihrem Vertrag.

Statisches Markup, von Hand aus globals.css, src/components/** und den Seiten übersetzt — nicht die laufenden React-Komponenten. Sie zeigen den Vertrag: Abstände, Farbgebrauch, Textregeln. Quelle für Code ist das Repo.

Brand

Wortmarke · Mark

src/components/navbar.tsx · src/components/footer.tsx (Wortmarke im Fluss)

Die Wortmarke ist kein Bild, sondern Satz: Cormorant Garamond 500, Versalien, gesperrt. In der Kopfzeile 1.05 rem (mobil) / 1.3 rem (ab md), darunter die zweite Zeile „CRANIO SACRAL" in 0.5625 / 0.625 rem mit 0.36em Sperrung in Olive (auf Papier) bzw. Cream (auf Foto oder Olive).

Stefanie Kaindl Cranio Sacral
Stefanie Kaindl Cranio Sacral
Stefanie Kaindl Cranio Sacral

Navigation

Kopfzeile · Navbar

src/components/navbar.tsx

Eine Zeile, vier Menüpunkte, die Wortmarke exakt in der Mitte — sie hängt an position: absolute; left: 50% und bleibt unabhängig von der Breite der Menüpunkte zentriert. Die vier Punkte liegen in vier gleich breiten Zellen; die äußeren sitzen am Rand, die inneren an der Außenkante ihrer Zelle (deshalb bleibt zur Marke Luft).

Stefanie Kaindl Cranio Sacral
Stefanie Kaindl Cranio Sacral

Layout

Hero · Hero

src/app/hero.tsx

Vollflächiges Foto, mittig der Text: Eyebrow, zweizeilige Serif-Headline, zwei gleichwertige Wege. Höhe min-height: 100svh.

Craniosacrale KörperarbeitYoga

Raum, um anzukommen. Zeit, um loszulassen.

Mehr zu Cranio Mehr zu Yoga

Sektionskopf · SectionHead

src/components/editorial.tsx

Zentrierter Sektionskopf: Label, Serif-Headline, optional ein Absatz darunter. Der Standardbaustein, wenn eine Sektion keine eigene Spaltenaufteilung braucht.

Zwei Wege zur Ruhe

Zwei Kurse am Donnerstag.

Beide Kurse finden donnerstags in Paunzhausen statt, in kleinen Gruppen. Du kannst spontan kommen — zum ruhigen Ankommen oder für einen kraftvollen Flow zum Ausklang.

Deine Stunde

Yoga für Körper und Geist.

Seitenkopf · PageIntro

src/components/editorial.tsx

Seitenkopf jeder Unterseite (/cranio, /yoga, /ueber-mich, /kontakt): Label, große Serif-Zeile, Einstiegstext — zentriert, max 48 rem.

Cranio

Craniosacrale Körperarbeit

Eine sanfte Berührung, die nichts erzwingt: Der Körper bekommt Raum, aus der Anspannung zu finden und in seinen eigenen Rhythmus zurückzukommen.

Text

Eyebrow · Label

src/app/globals.css (.label, .label-caps, .pill)

Eyebrow des Systems: 10 px, mit einem 2,2-px-Punkt davor (currentColor, 75 % Deckkraft). Drei Zustände:

01 · Cranio Zwei Wege zur Ruhe Stimmen
Platz reservieren Meine Arbeitsweise
Craniosacrale Körperarbeit

Actions

Button · Button

src/app/globals.css (.btn, .btn-ink, .btn-olive, .btn-cream, .btn-outline-*)

Vollrunder Button, 13 px, padding: 1rem 1.75rem (≈46 px Höhe). Fünf Varianten — die Wahl hängt an der Fläche, nicht am Geschmack:

Termin online buchen Platz reservieren Mehr zu Cranio
Termin vereinbaren Cranio buchen Yoga buchen
Termin vereinbaren Mehr über mich
Akzeptieren

Content

Preiszeile · PriceRow

src/components/editorial.tsx

Eine Angebotszeile mit Preis. Der Baustein für jede Preisliste — /cranio, /angebote-preise, Kursliste.

Craniosacrale Behandlung / ca. 60 Min

Eine ruhige, vollständige Sitzung für Erwachsene — Zeit, um anzukommen und den Körper arbeiten zu lassen.

73 €

Termin buchen

Babys & Kinder / 20 – 40 Min

Spielerisch und altersgerecht, mit viel Zeit und Ruhe — von den ersten Wochen bis ins Schulalter.

53 €

Termin buchen

5er-Paket / ca. 60 Min

Fünf Behandlungen zum Paketpreis — für einen Verlauf über mehrere Wochen.

400 €

Termin buchen

Eckdaten · Facts

src/app/content.tsx (Facts)

Eckdaten unter einem Angebotstext: drei Paare (Begriff oben, Wert darunter), eine Haarlinie darüber, grid-cols-3 ab sm.

Erwachsene
ca. 60 Min · 73 €
Babys & Kinder
20 – 40 Min · 53 €
Ort
Pfaffenhofen-Uttenhofen
Donnerstags
17:30 & 19:00 Uhr
Pro Stunde
14 € · EGYM Wellpass
Ort
Paunzhausen

Zitat · Quote

src/app/content.tsx (Voices) · globals.css (.quote, .initials)

Zitatband auf paper-deep: Zitat in der Sans (nicht in der Serif), darunter eine Haarlinie, dann Initialen-Kachel, Name und Anlass. Zähler „01 / 04" auf der linken Viertellinie.

Stimmen 01/04

„Die Behandlung bei Steffi ist eine Wohltat für Körper, Geist und Seele. Nach der Cranio fühle ich mich viel leichter und meine Gedanken kommen zur Ruhe.“

Kathi P. Stress & Verspannungen

Akkordeon · Accordion

src/app/content.tsx (Approach)

Merkmal-Liste auf Olive (im Repo als Approach in src/app/content.tsx). Immer nur eine Zeile offen — es ist eine Auswahl, kein FAQ.

Meine Arbeitsweise

Was meine Arbeit trägt.

  1. Ein Druck von nur etwa fünf Gramm — so leicht wie das Gewicht einer Münze. Der craniosacrale Rhythmus wird ertastet, nicht gedrückt.

  2. Die Arbeit wirkt körperlich und emotional: bei Schmerzen, Migräne und Verspannungen ebenso wie bei Stress, Schlafproblemen und emotionaler Belastung.

  3. Spielerisch und altersgerecht, mit viel Zeit und Ruhe — von den ersten Wochen bis ins Schulalter.

Mehr zu Cranio

Kursliste · CourseTable

src/app/yoga/content.tsx (Kurse · Termine)

Kurs- und Terminliste einer Kursseite (/yoga): zwei Kurse in zwei Spalten, darunter die drei Eckdaten, dann die Termine als Kachelreihe.

Kurs 1 · Sanft

17:30

Ruhiges Ankommen: sanfte Haltungen, Atemarbeit und eine lange Schlussentspannung.

Kurs 2 · Flow

19:00

Kraftvoller Ausklang: Vinyasa-Flow, an die Gruppe angepasst — für Anfänger und Fortgeschrittene.

Preis
14 € pro Stunde
Ort
Paunzhausen · Yogaraum
Zahlung
Vor Ort oder mit EGYM Wellpass

Enthalten sind craniosacrale Impulse, persönliche Begleitung und eine ruhige Atmosphäre in kleinen Gruppen. Matten und Hilfsmittel sind vor Ort.

  • 07November2026
  • 14November2026
  • 21November2026

Form

Formularfeld · Field

src/app/kontakt/content.tsx (ContactForm) · globals.css (.field)

Formularfeld ohne Box: keine Fläche, kein Rahmen, nur eine 1-px-Linie unter dem Feld. Fokus färbt die Linie Olive (kein Ring, kein Halo).

Mit dem Absenden stimmst du zu, dass deine Angaben zur Bearbeitung der Anfrage gespeichert werden. Mehr dazu in der Datenschutzerklärung.

Media

Bildfläche · Photo

src/components/editorial.tsx (Photo) · globals.css (.ph)

Jedes Foto der Seite läuft über .ph. Der Filter ist Teil des Systems, nicht eine Spielwiese: sepia(0.16) saturate(0.86) contrast(1.03) brightness(0.99) plus eine Olive-Fläche (#6b7250) mit mix-blend-mode: multiply bei 14 % (.ph-deep: 42 %). Erst dadurch haben Aufnahmen aus verschiedenen Räumen und Jahren denselben Ton.

Stefanie Kaindl im Behandlungsraum
Hände halten die Füße während einer craniosacralen Behandlung
Yoga-Haltung auf der Matte

Links und Mitte: .ph mit der Standard-Gradiation (Olive-Multiplikation 14 %). Rechts: .ph-deep (42 %) — für Motive, die als dunkle Fläche tragen sollen.

Overlay

Cookie-Hinweis · CookieBanner

src/components/cookie-banner.tsx

Cookie-Hinweis am unteren Rand: dunkle Fläche (rgba(29,28,23,.95)) mit blur(12px), obere Haarlinie in cream-line, Einfahren von unten in 500 ms (banner-in).

Cookies Diese Website nutzt Cookies. Notwendige sind immer aktiv; Statistik und Marketing nur, wenn du zustimmst. Deine Auswahl kannst du jederzeit ändern.

Einstellungen
Stimme

Leise, konkret, immer du.

Do

  • Du-Anrede — „Bei mir findest du zwei Wege, wieder bei dir anzukommen." Sie nur in den Rechtstexten.
  • Kurze Aussagesätze mit Punkt — „Raum, um anzukommen." „Zwei Kurse am Donnerstag."
  • Exakte Zahlen aus ihrem Material — 73 €, 53 €, 400 €, 40 €, 14 €/h, Do 17:30 & 19:00.
  • Nummerierte Eyebrows — 01 · Cranio, 02 · Yoga auf der Startseite.
  • Wortmarke „Cranio Sacral", Angebot ausgeschrieben „Craniosacrale Körperarbeit".
  • Die vier Angebote des Footers als Reihenfolge — Cranio für Erwachsene · Cranio für Babys & Kinder · Erstberatung & 5er-Paket · Yoga am Donnerstag.

Don't

  • Nie „Praxis" — es ist keine. Erlaubt: Adresse, Seiten, Behandlungsraum, Einblicke in die Räume.
  • „Hausbesuche" ist kein Angebot und kommt nirgends vor.
  • Keine Ausrufezeichen, keine Emoji, keine Werbeadjektive.
  • Keine erfundenen Preise, Termine oder Stimmen — die vier Zitate des Bestands sind die einzigen.
  • Keine zweite Akzentfarbe, keine weißen Karten mit großem Radius und Schatten (der alte Stand vor dem Redesign).
  • ink-400 nicht für Kleinschrift (3,2:1), cream-70 nicht für Kleinschrift auf Olive (3,5:1).
Assets

Originale, unverändert — mit ihrer Herkunft.

Bildmarke: runde teal Disc mit Handlinie logo.pngDisc #9dcdcd mit handgezeichneter Hand-/Blütenlinie und Schrift. Alter Stand vor dem Redesign.
Lockup: Wortmarke schwarz, Unterzeile teal sk_logo_dark.pngLockup für helle Flächen: Wortmarke #050505, Unterzeile #67b1b1 — mit weißem Hintergrund, nicht transparent. Nicht im System.
Favicon: teal Disc favicon.pngWird aktuell als Favicon ausgeliefert — noch teal.
Apple Touch Icon: teal Disc apple-touch-icon.png180×180 für den iOS-Homescreen.
Hero-Porträthero-stefanie.webpHero — eigene Gradiation brightness(0.76), weil Text darüber liegt.
Behandlungsraumbehandlung.webpRuhige Fläche, trägt das Buchungsband.
Hände halten die Füßebehandlung_2.webpArbeitsweise-Sektion.
Yoga-Haltungyoga.webpYoga-Band.

Die Wortmarke ist keine Datei — sie ist Satz: Cormorant 500, Versalien, 0.18em gesperrt, darunter „CRANIO SACRAL" in 0.36em. Jedes Foto läuft über .ph: sepia(0.16) saturate(0.86) contrast(1.03) plus Olive-Multiplikation 14 % (tief 42 %) — erst dadurch haben Aufnahmen aus verschiedenen Räumen denselben Ton. Keine Stockfotos, kein Bild mit Text darüber.

Offene Punkte

Gemessen, nicht vermutet.

  1. Cream auf Olive hält kein AA. cream-70 3,5:1, cream-60 2,9:1, cream-45 2,3:1 auf #616949 — im Footer tragen sie 11–14 px Text. Kleinste tragfähige Stufe: cream-80 (4,6:1). Betroffen: footer.tsx, .label-inverse, die Laufschrift.
  2. Favicon und Apple-Touch-Icon sind noch teal (#9dcdcd, Akzent #67b1b1) — der alte Stand. Zwei ehrliche Wege: ersetzen (Olive-Disc oder „SK" in Cormorant) oder bewusst behalten und als dokumentierten Sonderfall führen. Entscheidung der Klientin.
  3. Legacy-Tokens in tailwind.config.ts — cream, sage, taupe, therapeutic sind auf Papier/Tinte/Olive umgestimmt, damit alte Unterseiten ohne Einzeländerung im neuen Ton erscheinen. Sie sind kein Teil dieser Palette; neuer Code nutzt paper, ink, olive.
  4. --ink-80 war falsch dokumentiert (#3a3830, 10,3:1) — tatsächlich rgba(29,28,23,.8) = #484641, 8,3:1. In DESIGN.md korrigiert.

Wie anwenden: im Repo gelten weiter src/app/globals.css und tailwind.config.ts — dieses System beschreibt sie, es ersetzt sie nicht. In einem anderen Projekt tokens.css einbinden und mit den Variablen arbeiten; die semantischen Aliase (--canvas, --text, --accent, --border) sind für Komponenten gedacht, die Farbnamen für redaktionelles Layout.

Dateien: overview.html (diese Seite) · tokens.css · tokens.json (mit Nutzungshinweis und gemessenem Kontrast) · design-system.json · components/<Name>/{preview.html,README.md} · components/bundle.css · components/index.d.ts · components/index.html (Board) · assets/Logos|Imagery/ · ../DESIGN.md · ../docs/design-styleguide.html

Statische Renditionen — nicht die laufenden React-Komponenten. Hanken Grotesk und Cormorant Garamond kommen aus next/font/google und werden hier von Google Fonts geladen.