Oberstufen-Kolleg · Bielefeld · seit 1965

Hans Hermsen

Vierzig Jahre gelehrt. Heute singe ich Märchen.
Schön, dass du vorbeischaust.

Brand-System «Rotblock im Raster» · Version 2.0 · Modus hell, Dunkelanteil-Ziel 24 %

Signature-Motiv

Die Stunde

Vierzig Jahre lang war der Tag in Stunden eingeteilt — Rechtecke in einem Raster, eines davon farbig markiert: der Stundenplan an der Wand. Und heute ist «die Stunde» das andere: die Stunde, in der gesungen wird.

Beides ist dieselbe Form. Ein roter 1:1-Vollblock aus --brand-secondary, Radius 0, randlos — pro Bildschirm genau einmal. Der Rest der Seite ist der Stundenplan: helles Papier, 1px-Hairlines, leere Felder.

Verbot: nie zwei rote Flächen gleichzeitig im Bild · nie als Muster oder Listenpunkt · nie gedreht, gerundet oder ausserhalb von 1:1.

Der Stundenplan — ein Feld belegt

12 Spalten, Gutter 24 px, Container 1200 px. Mindestens zwei Spalten bleiben pro Band leer — einseitig, nie symmetrisch.

Sektion 2

Farben & Rollen

Alle Werte sind aus dem Logo gemessen, keiner ist gewählt. Kontrastwerte sind Zitate aus der Messmatrix — nichts ist behauptet.

Struktur (Blau)

--brand-primary · #04347c

Titel, Links, Fussband. Nie Fliesstext. 11.02:1 auf Papier · 11.75:1 mit Weiss.

Ereignis (Rot)

--brand-secondary · #961802

«Die Stunde»: Flächen, Marke, Primär-Knopf. Nie Schrift. 8.11:1 auf Papier · 8.65:1 mit Weiss.

Akzent Blau

--brand-accent · #194891

Ausschliesslich Hover-Ton für Blau. Keine eigene Farbe.

Papier

--brand-surface · #f4f8fd

Default-Grund. Ink darauf: 15.35:1 (AAA).

Papier Alt

--brand-surface-alt · #ebf1f9

Jedes zweite Band. Trägt nur Ink: 14.41:1 (AAA).

Ink

--brand-ink · #1c2025

Fliesstext. Ink Soft #555b63 nur für Lead und Legende: 6.43:1 (AA, nicht AAA).

Die Skalen

Blau 1–12 · Text nur ab Stufe 9

123456789 Rolle10 Hover11 gesperrt12 Active

Rot 1–12 · Stufen 1–8 sind reine Flächen

123456789 Rolle10 Hover11 gesperrt12 Active

Grau 1–12 · nur 3, 6, 9, 11, 12 sind im Bau erlaubt

123 Disabled456 Hairline789 Disabled-Text1011 Ink Soft12 Ink

Verboten

Kombination	Grund
Farbiger Text auf Papier Alt #ebf1f9	Nicht gemessen — dort gilt nur Ink (14.41:1)
Ink Soft #555b63 auf Papier Alt	Nicht gemessen
Rot auf Blau / Blau auf Rot	Ungemessen, und für farbenblinde Betrachter fast identisch dunkel
Weiss oder Text auf den hellen Stufen 1–8	Diese Stufen tragen nie Schrift
Rot #961802 als Schriftfarbe	Nicht Kontrast, sondern Identität: Rot ist Fläche, kein Textmarker
Tailwind-Defaults, eigener Hex, Opacity-Mischungen	Jeder Wert kommt aus der Messung

Sektion 3

Typografie

Frank Ruhl Libre 500 für alles Display — ihre Serifen sind flache Horizontalbalken, also winzige Rechtecke am Fuss jedes Stammes. In Versalien wird die Zeile zu einer Reihe kleiner Blöcke: das Logo, eine Ebene kleiner. Hanken Grotesk 400/600 trägt den Fliesstext bei 18 px.

display-xxl · 72 / 38 px · 500 · LH 0.94 · LS −1.4 px

Hans Hermsen

display-xl · 48 / 30 px · 500 · LH 1.04 · LS −0.6 px

Vierzig Jahre Kolleg

display-lg · 32 / 24 px · 500 · LH 1.12 · LS −0.3 px

Schulbegleitung

display-md · 24 / 20 px · 500 · LH 1.20 · LS −0.2 px

Chor Harmonie Diefenbach

eyebrow · 13 px · 600 · LS +0.14 em

Knittlingen · Bielefeld · seit 1965

body-lg · 21 / 19 px · 400 · LH 1.55

Vierzig Jahre gelehrt. Heute singe ich Märchen.

body · 18 / 17 px · 400 · LH 1.60 · LS +0.16 px — der Standard

Vierzig Jahre war ich am Oberstufen-Kolleg in Bielefeld. Was daraus geworden ist, steht weiter unten — und was daraus geworden ist, seid zum guten Teil ihr. Heute singe ich Märchen, begleite Kinder in der Schule und bin in drei Vereinen aktiv.

caption · 14 / 13 px · 400 — Bildlegende, Fussnote

Interviews in den Büchern von Dr. Wolfram Wagner, tredition Hamburg.

Gesetze: Display läuft ausschliesslich in Versalien · Weight 500 ist der einzige Display-Schnitt (nicht 400, nicht 700) · kein Kursiv im ganzen System · Zeilenlänge 62–78 Zeichen · hyphens: auto mit lang="de".

Das Zitatmodul — die Stunde wird zur Bandfläche

Ein Feld im Raster. Mehr braucht eine Stunde nicht.

Genau einmal pro Seite. Schrift ausschliesslich Weiss (8.65:1). In diesem Band trägt kein Knopf eine Füllung.

Sektion 4

Komponenten & Zustände

Fahr mit der Maus darüber, klicke, tabbe durch — die Zustände sind echt. Pill-Buttons sind verboten; der Ersatz ist das eckige Feld, 48 px hoch, Radius 0.

btn-primary — die gefüllte Stunde

default #961802 → hover #830000 + translate(0,−1px) → active #740000 + translate(1px,1px) → focus: 2 px Ring in #04347c, Offset 3 px. Max. ein gefüllter Knopf pro Band.

btn-outline — Zweit-CTA und Standard in Stunden-Bändern

1 px Kante #04347c → hover: Fläche #04347c, Schrift weiss (11.75:1) → active #002e75 → focus: 2 px Ring in Rot, damit er nie mit der eigenen Kante verschmilzt.

btn-ghost — Textbutton

Zum Repertoire

Hover ändert Farbe und Unterstrichdicke 1 → 2 px. Die Änderung ist auch ohne Farbwahrnehmung sichtbar — der Kunde ist farbenblind, das ist Systemanforderung.

nav-raster — Navigation, aktive Seite als Form

Die aktuelle Seite trägt ein 8 px grosses rotes Quadrat — die kleinste Stunde im System. Markierung ist Form und Farbe, nie nur Farbe.

card-raster — Kante statt Schatten (verlinkt, also mit Hover)

1974 – 2014

Oberstufen-Kolleg

Vierzig Jahre Lehrender an der Versuchsschule der Universität Bielefeld.

1 px #cbcfd6 · Radius 0 · Polsterung 24 px · kein Schatten in keinem Zustand. Hover: Kante wird blau, Fläche #ebf1f9.

input-raster — inkl. Fehlerzustand

Dein Name

Deine Nachricht

Da fehlt noch deine Nachricht.

Fehler = 2 px rote Kante plus Icon plus Text. Nie roter Fehlertext — Farbe allein trägt keine Information.

Tiefe — die Kante ist das Tiefensystem

E1 Die Kante

Karten, Inputs, Module. Ersetzt jeden Kartenschatten.

E1b Harte Kante

Nur Hover auf Inputs: dunkler, nicht weicher.

E2 Der Versatz

Harte 8 px-Kopie in Rot, kein Blur — der Logo-Versatz. Max. 1× pro Bildschirm.

E3 Schwebend

Die einzige weiche Ebene im System. Nur das Mobile-Nav-Panel.

Icons: lucide, stroke-width 1.5, stroke-linecap: square, stroke-linejoin: miter — lucides Default round wird global überschrieben. Gefüllte Icons sind verboten: Fläche ist der Stunde reserviert.

Sektion 5

Raster & Abstände

Token	px	Einsatz
`--space-1`	8	in der Gruppe · zugleich der Logo-Versatz
`--space-2`	12	Headline → Lead
`--space-3`	24	zwischen Gruppen, Gutter, Kartenpolsterung
`--space-4`	40	grosse Trennung · Bandpolsterung mobil
`--space-5`	72	zwischen Sektionen (Standard)
`--space-6`	112	Kapitel-Atempause, max. 2× pro Seite

Verhältnis-Gesetz 8 : 24 : 72 = 1 : 3 : 9. Es existiert kein Wert zwischen 24 und 40 — der Mittelwert-Brei (alles ungefähr 32 px) ist damit ausgeschlossen.

Bildstrecke — das einzige 3-Spalten-Grid der Site

Formate 1:1 · 3:4 · 1:1, randlos aneinander, Gutter 0, kein Rahmen, kein Radius, kein Schatten, keine Bildunterschrift im Bild. Jedes weitere Dreier-Raster ist verboten: Vereine, Belege und Repertoire sind Zeilenlisten.

CBScbs-netz.de
Artabanaartabana.de
Harmonie Diefenbachharmonie-diefenbach.de

Sektion 9 & 10

Bildwelt

Moodboard: Reformmoderne-Innenraum in kühlem Vormittagslicht mit einer einzigen tiefroten Fläche

Moodboard — kein Text im Bild, eine Lichtquelle, genau ein rotes Objekt.

Dokumentarisch, kühl, entsättigt. Nordfenster-Tageslicht am späten Vormittag, eine Quelle, seitlich 45–90°, mindestens 30 % helle Bildfläche. Hart auf 1:1 oder 3:4 beschnitten, Kamera auf Augenhöhe und parallel zur Wand, durchgehend scharf.

Genau ein warmes rotes Objekt pro Bild — das einzige gesättigte Element. Gegenwart in Farbe, Archiv in Duplex (Tiefen #04347c, Lichter #ebf1f9, max. 1× pro Seite).

Nie: Text oder Schrift im Bild · Stock-Anmutung und Kamerablick · Sepia, HDR, Vignette, Bokeh-Teppich · Märchen- und Fantasy-Requisiten · kirchliche Motive · erkennbare Kinder · gerundete Bildecken.

Herkunft der Farben

Die Messquelle

Zwei versetzte Vollflächen auf Weiss: ein rotes Quadrat oben links, darunter nach rechts versetzt ein blaues Hochrechteck. Kein Symbol, keine Kontur, kein Verlauf, vier harte Ecken. Daraus kommt alles: Radius 0, der 8 px-Versatz, Rot als Ereignis oben, Blau als Struktur unten.

Wichtig und bindend: Diese Bildmarke gehört der Evangelischen Kirche von Westfalen, nicht Hans Hermsen — sie stammt aus der Recherche und ist im Dossier als Lücke geführt. Sie dient ausschliesslich als Farb- und Formquelle und wird auf der Website nirgends abgebildet. Die Marke der Seite ist der gesetzte Name.

Wunschblau des Kunden übernommen als gemessener Ton #04347c (Abstand 2.1). Das Wunschrot existiert im gemessenen Tokenset nicht als leuchtender Ton — es wird über die Fläche eingelöst statt über die Leuchtkraft: #961802 ist das Signature-Motiv.