Zwei Domänen.
Die Marke trägt zwei gleichrangige Regelwerke: eines für Gedrucktes, eines für Bildschirme. Diese Seite erklärt, welches wann gilt — und warum derselbe Begriff je nach Medium zwei verschiedene Werte hat.
Die Zwei-Master-Regel
Digitale Ausspielung folgt dem Technorama Design System. Analoge Ausspielung folgt der Brand Guideline. Wo sie sich widersprechen, entscheidet das Medium des Artefakts — nie der Geschmack. Ein Artefakt mischt nie beide Regelwerke.
Ein Plakat, das später ein Web-Hero wird, ist zwei Artefakte — jedes folgt seinem Master. Die Frage vor jeder Gestaltung lautet deshalb nicht «wie sieht das aus», sondern «wo wird das ausgespielt».
AnalogBrand Guideline V1 — Druck, Drucksachen, Beschriftung, Signaletik, Messe, Dokumente, Etiketten, Office-Exporte
Tokens: --tr-* · colors_and_type.cssDigitalDesign System (Storybook) — technorama.ch, Web-Komponenten, Produkt-UI, das Portal selbst, Signage
Tokens: zweistufig · src/seed/sources/digital/PortalHausstil — Sektionsfarben, Dokumentations-Muster des Portals
Tokens: —
Ein Begriff, zwei Werte
Der Unterschied ist keine Willkür und kein Kompromiss: jede Abweichung hat einen Grund im Medium. Wer den Grund kennt, muss die Tabelle nicht auswendig lernen.
| Begriff | Analog | Digital | Warum |
|---|---|---|---|
| Die Bühne | #000000 | #0a0a0a | Reines Schwarz ist im Druck der tiefste erreichbare Wert. Auf einem Bildschirm nimmt ein Hauch Restlicht dem Kontrast die Härte, ohne dass die Bühne heller wirkt. |
| Angehobene Fläche | Weiss-Alpha #ffffff0a | deckend #262626 | Alpha rechnet sich gegen den Untergrund — auf Papier gibt es keinen. Deckende Stufen erlauben zudem eine exakte Kontrastrechnung. |
| Sekundärtext | 60 % Weiss | #d4d4d4 | Derselbe Grund: eine Rampe aus deckenden Werten ist messbar, eine Alpha-Angabe nur im Kontext. |
| Markenfarbe abtönen | verboten | 11 Stufen je Farbe | Im Web tragen die Stufen Zustände und Status — Funktion, nicht Ausdruck. Auf Papier gibt es keine Zustände, dort bliebe nur die Abschwächung der Marke. |
| Radius | 0–4 px | bis 24 px + Pille | Die knappe Kante ist die Präzisionsgeste der gedruckten Marke; die Website setzt auf die weichere, berührbare Form. |
| Heller Modus | gibt es nicht | [data-theme="light"] | Ein Druckerzeugnis hat genau einen Zustand. Ein Bildschirm hat zwei — und beide sind gebunden, nicht frei gestaltet. |
Was beide teilen
Die vier Markenfarben sind in beiden Domänen bitgenau dieselben. Das ist die Brücke: eine Marke, zwei Ausdeutungen. Ein automatischer Wächter prüft bei jedem Commit, dass keine der vier Basen auseinanderläuft — driftet eine, ist das ein Governance-Fall, kein stilles Update.
Welche Regel gilt wo
Keine Regel ist verschwunden — jede trägt jetzt ihren Geltungsbereich. Wo eine Regel in beiden Domänen gilt, aber verschieden umgesetzt wird, steht die Abweichung dabei.
Nur für Gedrucktes
Die Eine-Farbe-RegelEine Markenfarbe pro Anwendung — nie kombiniert, nie abgetönt, nie im Verlauf. Analog ist diese Regel absolut.
Nur für Bildschirme
Die Ein-Akzent-RegelEine Markenfarbe trägt die Identität; ihre Rampenstufen tragen Zustand und Status. Statusfarben sind Signale, keine Markenaussage — sie dürfen koexistieren.Die Zwei-Stufen-RegelKomponenten konsumieren ausschliesslich gemappte Tokens. Primitives existieren für die Mapping-Ebene — nie zum Zugreifen.
In beiden Domänen
Die Zwei-Master-RegelDas Medium des Artefakts entscheidet, welches Regelwerk gilt — nie der Geschmack. Ein Artefakt mischt nie beide.Die Akzent-RegelEine Komponente kodiert nie eine Markenfarbe hart — sie erbt sie.
Unterschied: Portal/analog über --accent auf <main>; digital über die Accent-Prop der Komponente.Die Schwarz-Text-RegelAuf einer Markenfläche steht Text in Schwarz; grauer Text auf Farbe ist verboten.
Unterschied: Digital entscheidet das Token-Paar (--text-regular-on-color auf --surface-regular-color-*), nie die Hand.Die Linksbündig-RegelText steht immer linksbündig. Zentrierte Headlines, All-Caps-Fliesstext und gesperrte Versalien sind verboten.Die Gewichts-RegelHierarchie entsteht aus Gewicht, nicht aus einer zweiten Familie oder Kursiv-als-Betonung.
Unterschied: Analog 200–800 (Arbeitspferde 300/700/800); digital 300/400/600/700/800.Die Flach-RegelKein box-shadow, kein Glas, kein Gradient-Text. Tiefe entsteht aus Fläche und Typografie.
Unterschied: Analog über Flächenfarbe und 1px-Haarlinien; digital über deckende surface-Stufen. Einzige Ausnahme: der Dialog im Web-System.Die Kanten-RegelRadien sind Systemwerte, nie freie Zahlen. Ein Radius ausserhalb der Rampen ist ein Fehler.
Unterschied: Analog 0–4 px (Pille nur für kleine Tags); digital die volle Rampe bis 24 px plus Pille.Die Bühnen-RegelDie Bühne ist dunkel — und sie ist gesetzt, nicht gewählt.
Unterschied: Analog #000000, kein Light-Mode; digital #0a0a0a plus [data-theme="light"] als gebundener zweiter Modus.
Hausstil des Portals — bindet keinen Master
SektionsfarbenGrundlagen Rot, Design Blau, System Grün. Navigationssemantik des Portals — kein Markenrecht.
In der Praxis
Die häufigste Verwechslung ist nicht die schwierige, sondern die naheliegende: ein Wert, der im falschen Medium landet.
DrucksacheWerte aus Farbeinsatz und den Vorlagen unter Vorlagen & Dokumente — Pantone und CMYK stehen dort, wo sie gebraucht werden. Nie ein Web-Grau.WebsiteGemappte Tokens des Design Systems (--surface-regular-*,--text-regular-*) — nie ein Primitive, nie ein Pantone.Unsicher?Die Frage «wo wird das ausgespielt» beantwortet es immer. Bleibt sie offen, ist das Artefakt noch nicht definiert — nicht die Regel unklar.
Die normative Fassung steht in DESIGN.md; Herleitung, Messprotokoll und der vollständige Abgleich in docs/designsystem-abgleich.md. Weiter zu den Token-Werten: Farbeinsatz, Schrifteinsatz, Spacing & Motion.