Hans Hermsen

Oberstufen-Kolleg · Bielefeld · seit 1965

Hans Hermsen

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

Der Merker

Ein roter Vollblock als Lesezeichen im Leben. Genau einer pro Bildschirm — er zeigt nur «hier» und trägt nie Schrift. Er ist das direkte Zitat des roten Quadrats aus dem Logo: 0 px Radius, kein Rahmen, kein Schatten, volle Deckkraft.

Zwei Zustände: leer (reine Fläche) oder besetzt (hart beschnittenes Duplex-Porträt in Rot und Ink). Nie beides halb, nie zweimal im selben Viewport, nie gemustert oder gedreht.

Logo Evangelische Kirche von Westfalen — Farbquelle dieses Brand-Systems

Farbquelle: zwei versetzte Vollflächen auf Weiss, rotes Quadrat oben, blaues Hochrechteck darunter nach rechts versetzt. Die weisse Treppe dazwischen ist gestaltet — sie lebt im Layout weiter.

Farben & Rollen

Alle Werte sind aus dem Logo gemessen. Kein Ton ist gemischt, aufgehellt oder transparent.

Merkerrot--brand-primary · #db2304

Nur Vollfläche: Merker, Marke, Primär-Button. Nie Schrift.

primary/surface 4.62:1
Merkerrot Tief--brand-accent · #cb0000

Nur Zustand: Hover-Fläche, 1 px Rahmen. Trägt nie Text.

keine Messung → textfrei
Kollegblau--brand-secondary · #04347c

Überschriften, Links, Focus-Ring, Footer. Struktur, nie Akzent.

secondary/surface 11.0:1 · AAA
Weiss — die Lücke--brand-on-primary · #ffffff

Text auf Rot und Blau, Inset-Rahmen. Nie Seitengrund.

on_primary/primary 4.94:1
Papier--brand-surface · #fdf6f4

Default-Grund der ganzen Seite.

ink/surface 15.38:1 · AAA
Papier Gebrochen--brand-surface-alt · #f7efee

Jedes zweite Band, Hover von Karte und Sekundär-Button.

ink/surface_alt 14.5:1 · AAA
Ink--brand-ink · #271d1c

Fliesstext, Listen, Werte.

ink/surface 15.38:1 · AAA
Bleistift--brand-ink-soft · #625755

Lead, Legenden, Meta. Nie unter 14 px, nie auf Farbe.

ink_soft/surface 6.53:1 · AA
Linie--brand-border · #d5cccb

1 px Hairlines, Kanten, Input-Rahmen. Nie Textfarbe.

dekorativ
Duplex-Tiefe--brand-primary-12 · #60241a

Ausschliesslich dunkler Stop im Duplex-Porträt.

Nav-Hover--brand-secondary-2 · #ebf1f9

Ausschliesslich Hover-Fläche der Navigation.

Pressed--brand-secondary-12 · #002e75

Ausschliesslich :active von Links.

Archivo Expanded / Hanken Grotesk

Die Breitenachse ist die Hierarchie: wdth 125 ab 40 px, 112 bei 28–39 px, 100 darunter. Das Gewicht bleibt im Display immer 400.

display-xxl · 64 / 0.93 / −1 px / wdth 125
Hans Hermsen
display-xl · 48 / 1.0 / −0.5 px / wdth 125
Was ich heute mache
display-lg · 32 / 1.1 / −0.3 px / wdth 112
Märchen, gesungen
display-md · 24 / 1.15 / −0.2 px / wdth 100
Schulbegleitung
jahr · 32 / tabular-nums
1978 · 1994 · 2005
lead · 22 / 1.45

Vierzig Jahre gelehrt. Heute singe ich Märchen.

body · 18 / 1.6 / +0.16 px

Ich bin 1946 geboren, habe vierzig Jahre am Oberstufen-Kolleg in Bielefeld unterrichtet und mich nie ganz daran gewöhnt, dass Unterricht irgendwann aufhört. Heute singe ich Märchen — in Bibliotheken, in Vereinen, manchmal in Wohnzimmern.

body-sm · 16 / 1.55

Foto: Institutsgebäude, Oberstufen-Kolleg, Herbst.

meta · 14 / 1.4 / 500

Elbeallee 75, 33689 Bielefeld · +49 5205 3575

Buttons & States

Radius 0. Hover, Active und Focus sind hier echt — bitte anfassen. Der Primär-Button zeigt im Hover einen weissen Inset-Rahmen: die Lücke zwischen den beiden Logoblöcken.

Mehr aus 1998

Focus setzt einen 2 px Ring in Kollegblau, Offset 2 px — auf jeder Fläche sichtbar.

Modulkarte

1 px Linie, Papiergrund, Padding 40 px. Kein Schatten, kein Lift — Tiefe entsteht aus Kante und Fläche.

Klickbare Karte

Hover: Fläche wechselt auf Papier Gebrochen, Linie auf Kollegblau. Keine Bewegung.

Noch nichts hier

Hier kommen Fotos hin, sobald ich welche herausgesucht habe.

Das Raster

Chronik: Jahreszahl links, die senkrechte Merker-Marke steht an der offenen Dekade. Fotoraster: randlos, ein Modul bleibt Merker.

Foto 1 : 1
Foto 1 : 1
Foto 1 : 1

Bildlegenden stehen unter dem Raster, nie im Bild.

Bildstimmung

Moodboard: Institutsinterieur, ziegelrote Wandfläche, weiches Nordlicht

Dokumentarisch, frontal, auf Augenhöhe. Cremiger Papiergrund, entsättigte warme Neutraltöne, genau ein rotes Element pro Bild. Weiches indirektes Nordlicht am späten Vormittag.

Nie: Stockfoto-Posen, HDR, Sepia, Verläufe, gerundete Ecken, Kirchen- oder Pflegemotive, Blau- und Türkis-Dominanz.