Design System — erste Version
Ruhige Editorial-Ästhetik, Mono-Mikrotypo, ein einziger Akzentton. Was hier dokumentiert ist, leitet sich aus dem Profil ab — nicht umgekehrt. Token, Typo-Klassen und Layout-Bausteine sind so geschnitten, dass sie auf weitere Seiten und Komponenten erweitert werden können, ohne dass das Bild kippt.
01.1Color
Hintergrund-Schwarz mit warmem Unterton. Drei Tinten-Stufen für Inhalt, ein Amber-Akzent in zwei Sättigungen, zwei Linien-Werte. Mehr nicht.
01.2Schriftfamilien
IBM Plex Sans für Inhalt, IBM Plex Mono für alles, was Meta-Information ist (Labels, Datum, Sektionsnummern, Code).
| Token | Stack | Rolle |
|---|---|---|
| --sans | IBM Plex Sans, -apple-system, "Segoe UI", Roboto, sans-serif | Headlines, Fließtext, Quotes |
| --mono | IBM Plex Mono, ui-monospace, Menlo, monospace | Labels, Kicker, Meta, Code |
01.3Layout
Eine Shell mit max. 1240px. Sektionen verwenden ein Zwei-Spalten-Raster (Marginalie 220px / Inhalt 1fr) und kollabieren bei ≤ 900px auf eine Spalte.
| Token | Wert | Rolle |
|---|---|---|
| --pad-x | clamp(28px, 5vw, 80px) | horizontale Shell-Padding |
| Shell max-width | 1240px | Lesebreite |
| Section-Grid | 220px / 1fr · gap 56px | Marginalie / Inhalt |
| Section-Padding | 80px 0 | vertikaler Sektionsabstand |
| Breakpoint S | ≤ 900px | Section-Grid kollabiert · Sticky aus |
| Breakpoint XS | ≤ 720px | Stations-Grid kollabiert |
01.4Linien
Trennlinien tragen die Editorial-Grammatik. Kein Schatten, keine Boxen — nur Linien.
02.1Skala
Sieben Stufen, kuratiert. Headlines ohne Versalien, Mono ausschließlich für Meta-Information.
Oracle, PL/SQL, APEX – und das Wissen, wann man der KI widerspricht. Mein Beruf seit den frühen 90ern, meine Leidenschaft länger.
Datenbanken hat man verstanden, wenn man weiß, warum ein Index hilft, warum nicht, und wie man das beweist. Dieses Wissen baut sich nicht in Wochen auf.
Profil — Oracle, APEX, Agentic Coding
Vol. 30 · Graz, AT
02.2Akzent-Klassen
Jede Auszeichnung hat genau eine Klasse. Keine Mischung mehr aus „fett+unterstrichen" und „fett+linker Rand".
.t-quote
Wer hoch hinaus will, muss lange am Fundament verweilen.
Pull-Quote mit amber Linksrand und automatischen deutschen Anführungszeichen. Größtes Akzent-Element, sparsam einsetzen — eines pro Sektion.
.t-quote .t-quote--small
Datenbankwissen, Prozessverständnis und Pragmatismus – zusammengenommen entsteht etwas, das man so nicht sieht, wenn man nur eines davon hat.
Kompaktere Variante für Pull-Quotes innerhalb längerer Texte (z. B. in Stationen). Gleicher Rahmen, halber visueller Druck.
.t-quote .t-quote--bare
Gleiche Typographie, ohne Linksrand. Für nummerierte Quote-Listen, in denen die Linke schon durch eine Mono-Ziffer besetzt ist.
.t-lead
Eine KI schreibt Code, der oft funktioniert und manchmal lügt.
Hervorgehobener Lead-Absatz für Thesen und Aufmacher. Kein Rahmen, keine Anführungszeichen — bewusst ruhiger als .t-quote.
.t-emph
ESP32-Controller, 3D-Druck, funktionales DIY. Ich entwickle nicht nur Software – ich baue auch das Werkzeug, das sie steuert.
Inline-Hervorhebung: halbfett, helle Tinte, ohne Unterstrich. Ersetzt jede ad-hoc Mischung aus Bold und Underline.
03.1Sektions-Kopf
Linke Marginal-Spalte: Mono-Sektionsnummer mit amber Trennlinie oben, danach Sans-Sektionstitel und ein zweizeiliger Hint in --ink-mute.
Jüngste zuerst. Was die These oben in der Praxis bedeutet.
03.2Marginalie
Mono-Schlüssel/Wert-Paare in zwei Spalten. Amber Trennlinie oben. Für Faktenleisten, Status, Stamminfo.
03.3Button — primär
Amber-Fläche, dunkler Text, weicher Außen-Schein (kein Rahmen). Hover hebt eine Stufe an und intensiviert den Schein. Maximal einer pro Sektion.
03.4Button — sekundär
Outline-Variante für Aktionen, die nicht der Haupt-CTA sind: „Mehr lesen“, „Download“, „Details“. Kein Schein, transparenter Hintergrund. Hover färbt Rand und Text amber und legt eine schwache amber-low Hinterlegung an.
03.5Mailto-Link
Großer Sans-Link mit 2px amber Unterlinie. Direkter, ehrlicher Kontaktpunkt — kein Formular.
04.1section.essay
Zweispaltiges Grid: links Sektions-Kopf (sticky), rechts Inhalt. Diese Seite, das Profil und alle weiteren Folgeseiten verwenden dasselbe Skelett. Bei ≤ 900px kollabiert das Grid auf eine Spalte und Sticky wird deaktiviert.
/* Skelett */ <section class="essay"> <aside class="col-side"> <div class="section-no"><span class="num">02</span>Stationen</div> <h2 class="section-h">Drei Belegstücke</h2> <p class="hint">Jüngste zuerst.</p> </aside> <div> /* Inhalt */ </div> </section>
04.2.list-rhythm
Stationen, Skill-Bänder, Quotes und Thesen folgen alle demselben Rhythmus: Items werden durch border-top: 1px solid var(--line) getrennt; das erste Item bekommt border-top: none; padding-top: 0, das letzte padding-bottom: 0. Keine sichtbaren Boxen, keine Schatten, keine Hintergründe.
--line. Padding 28px oben & unten./* Verwendung */ <ul class="list-rhythm"> <li>…</li> <li>…</li> </ul>
04.3Theme-Entscheidung
Das System hat keinen Light-Modus. Die Editorial-Ästhetik lebt vom warmen Schwarz mit amber Akzent — Marginalien-Ruhe, atmosphärischer Schein, Lichtsaum an den Shell-Kanten. Eine Light-Variante würde das visuelle Versprechen ändern: andere Farb-Token, andere Schein-Werte, andere Linienkontraste. Falls dafür Bedarf entsteht, wird das ein eigenes System mit eigener Identität — nicht ein Schalter in diesem hier.
04.4Offen für v0.3
v0.2 hat Sekundär-Button und Listen-Pattern ergänzt. Folgende Bausteine bleiben sinnvolle Erweiterungen, sobald weitere Seiten hinzukommen:
.ds-code)