Brand-System · Lichter Bauplan · 2026
Brand-System · Lichter Bauplan · 2026
01
Signature-Motiv
In jedem Bauplan liegt neben dem Bauteil eine Maßkette: eine dünne Linie, kurze Marken darauf, an jeder Marke eine Zahl. Sie behauptet nichts — sie misst. Dieselbe Kette läuft senkrecht durch diese Website, an derselben x-Position wie die Mittelachse des d-h-Monogramms. Jede Sektion, jede Zahl und jedes Formularfeld dockt an ihr an.
Vier Bauteile, mehr gibt es nicht: Achse (1px #c9cfcf) · Maßmarke (24px, #00e5dc) · Maßzahl (IBM Plex Sans 500, tnum) · Maßlabel (12px Versal, +0.12em).
02
Farbrollen
Jeder Wert stammt deterministisch aus brand/logo.png. Die Kontrastwerte sind gemessen, nicht behauptet.
Blattfläche
--brand-surface
#f2f9f8
ink/surface 15.27:1 · AAA
Zweite Blattfläche
--brand-surface-alt
#e6f3f2
ink/surface_alt 14.32:1 · AAA
Drittes Weiß · Bildrahmen
--brand-primary-1
#eff6f5
trägt keinen Text
Text
--brand-ink
#122322
15.27:1 auf surface · AAA
Sekundärtext
--brand-ink-soft
#505c5b
6.51:1 · AA, nicht AAA
Konstruktionslinie
--brand-border
#c9cfcf
Linie, nie Text
Signal · Maßmarke & CTA
--brand-primary
#00e5dc
1.49:1 auf surface → nur Fläche, nie Schrift
Text auf Signal
--brand-on-primary
#042826
9.91:1 auf primary · AAA
Marke als Schrift · Focus
--brand-primary-ink
#006e69
5.73:1 auf surface · AA
Fuß · nur Footer
--brand-secondary
#363636
11.33:1 auf surface · AAA
Text auf Fuß
--brand-on-secondary
#ffffff
12.08:1 auf secondary · AAA
Deaktiviert
--brand-gray-9
#748483
nicht in der Matrix
Skala primary · 12 Stufen
Skala gray · 12 Stufen
Rollentrennung · Fläche ≠ Schrift
FLÄCHE — --brand-primary #00e5dc
Schrift darauf --brand-on-primary #042826 · 9.91:1 gemessen · AAA
Weiss läge hier bei 1.40:1 — darum die dunkle Seite. Die Marke wird nicht abgedunkelt, die Schrift wird gewechselt.
Ein Ansprechpartner statt vieler Schnittstellen — alle Leistungen ansehen.
SCHRIFT — --brand-primary-ink #006e69
5.73:1 auf surface · 5.38:1 auf surface-alt · AA
Zweite Abstufung derselben Marke, wörtlich
--brand-primary-11 der gemessenen Skala — kein neuer Wert.
So nicht: Türkis als Fliesstext.
VERBOTEN — #00e5dc hinter color:
1.49:1 gemessen — verfehlt AA und AA-large
Die Antwort ist die Rolle, nicht der Wert: #00e5dc bleibt exakt die Logofarbe, #f2f9f8 bleibt die Fläche.
background / border-color / fill —
niemals hinter color (gemessen 1.49:1, auch nicht bei 40px). Türkiser
Text ist immer --brand-primary-ink #006e69 (5.73:1). Nicht erlaubt ist
das Gegenteil: --brand-primary abdunkeln, --brand-surface
verschieben, Weiss durch Grau ersetzen oder Schrift vergrössern, damit 3:1 greift ·
niemals Flächenfüllung größer als ein Button · genau ein gefüllter türkiser Button
pro Sektion · keine Verläufe · keine Tailwind-Defaultfarbe, kein Hex außerhalb von
tokens.css.
03
Typografie
Sora ist monolinear konstruiert — dieselbe Bauweise wie die gleich breiten Balken des Monogramms. IBM Plex Sans trägt darunter den Ingenieurston und führt tnum: alle Maßzahlen stehen im Body-Font. Sora spricht, Plex misst.
display-hero
Sora 300 · 72/40px
LH 1.02 · LS −1.8px
Planen.
display-xl
Sora 300 · 56/34px
LH 1.06 · LS −1.4px
Koordinieren.
display-l
Sora 300 · 40/28px
LH 1.12 · LS −1.0px
Fassadendämmung, WDVS
display-m
Sora 300 · 32/24px
LH 1.15 · LS −0.8px
Flursanierung, Stuttgart-Ost
heading
Sora 400 · 24/20px
LH 1.25 · LS −0.4px
Innenausbau und Trockenbau
lead
Plex 400 · 20/18px
LH 1.5 · LS −0.2px
Ein zentraler Ansprechpartner statt vieler Schnittstellen.
body
Plex 400 · 16px
LH 1.6 · LS 0
Wir verbinden Projektmanagement, Baukoordination und handwerkliche Umsetzung zu einer durchgängigen Lösung — von der ersten Besichtigung bis zur Übergabe.
mass-xl
Plex 500 · 40/32px
tnum Pflicht
28 · 2 · 1 · 11
label / eyebrow
Plex 500 · 12px
LS +0.12em Versal
Jahre Projektleitung
04
Komponenten
Buttons — Hover und Fokus sind hier echt
primary: #00e5dc → hover #00dad1 → active #006e69 mit weißem Text und translateY(1px) · focus 2px #006e69, offset 2px · disabled #e2e8e7/#748483. Radius 0, kein Schatten, kein Hover-Lift.
Formularfeld — Fokus färbt nur die Maßmarke
Bitte tragen Sie eine Telefonnummer oder eine E-Mail-Adresse ein — sonst können wir Ihnen nicht antworten.
Keine Fehlerfarbe in den Messwerten — Fehler wird über 2px #363636, Icon und Gewicht kodiert statt über einen erfundenen Fremdton. Das ist zugleich farbfehlsichtigkeits-robust.
Leistungsliste — Nummern statt Icons
01
Badsanierungen
02
Renovierungen und Modernisierungen
03
Innenausbau und Trockenbau
04
Putz-, Spachtel- und Malerarbeiten
Referenzkarte — Vorher/Nachher an der Haarlinie
Vorher
Nachher
6
Gewerke koordiniert
9
Wochen Bauzeit
1
Ansprechpartner
Kein Schatten, kein Hover-Zoom, kein Schieberegler. Die Karte hebt nicht ab — bei Hover färbt die 1px-Kante von #c9cfcf auf #122322 durch.
05
Bildsprache
Subjekt: Räume in Arbeit und fertig, Hände beim Messen, Oberflächen unter 40 cm. Licht: weiches Vormittagslicht aus einer seitlichen Fensteröffnung. Komposition: 4:3, Kamera brusthoch und exakt waagrecht, ein Fluchtpunkt. Grade: Weißpunkt auf Putzweiß nahe #f2f9f8, Schattenboden nicht unter #122322, Sättigung −15 bis −25 %.
06
Rhythmus
Nähe = Zugehörigkeit. Die Maßzahl «28» und ihr Label stehen 8 px auseinander — der nächste Fakt beginnt erst 40 px später. Der häufigste Fehler ist der Mittelwert-Brei (alles ~32 px): hier verboten.
1 · 8
2 · 12
3 · 24
4 · 40
5 · 72
6 · 112
Sektionsrhythmus durchgehend 72 px (--space-5). Kapitel-Atempause 112 px maximal zweimal pro Seite. Kein Abstand von 16, 20, 32 oder 48 px zwischen Blöcken.