nobbe-design

Version 1.0.5. Schlankes Designsystem für nobbe.eu, Forgejo und selbst gehostete Webanwendungen. HTML und CSS ohne Framework, JavaScript, Build-Schritt oder externe Requests.

Projektstruktur

assets/
  nobbe-bimi-logo.svg            BIMI-Logo mit weißem Hintergrund
  favicon.ico                   Favicon in 16, 32 und 48 px
  fonts/                        Inter 4.1 WOFF2 (normal + italic), OFL und Herkunft
  nobbe-org-2027-v1_light-bg.svg  Original für helle Hintergründe
  nobbe-org-2027-v1_dark-bg.svg   Original für dunkle Hintergründe
css/
  fonts.css                     Lokale @font-face-Registrierung
  tokens.css                    Gekapselte Design Tokens und Farbschemata
  base.css                      Basis, Typografie, Links und Fokus
  components.css                Layout und Komponenten
  global.css                    Gemeinsamer Einstieg über lokale Imports
examples/index.html             Komponenten, Typografie und Light-/Dark-Paletten
examples/preview.css            Ausschließlich Vorschau-Layout
templates/maintenance.html       CSS, Fonts und Logos lokal verlinkt
templates/maintenance-coolify.html CSS eingebettet; Fonts und Logos lokal verlinkt
templates/impressum.html         Auszufüllende Vorlage mit lokalen Assets

Vorschau

Im Projektverzeichnis python3 -m http.server 8080 ausführen und http://localhost:8080/examples/ öffnen. Alternativ lässt sich die Vorschau direkt als Datei öffnen.

Light ist Standard; prefers-color-scheme: dark aktiviert Dark Mode und das helle Logo. Zur Prüfung das Betriebssystem umstellen oder in den Browser-Entwicklertools prefers-color-scheme emulieren. Es gibt keinen Theme-Schalter und kein JavaScript.

Architektur und Verwendung

Alle Tokens beginnen mit --nd-, alle Klassen mit nd-. Die Styles gelten nur für .nd-root und dessen Komponenten. Keine globalen Regeln für html, body oder allgemeine Links. Innerhalb der ausdrücklich gewählten Root gilt box-sizing: border-box. Einbettungen in fremde Anwendungen möglichst klein halten; deren eigene CSS-Regeln können weiterhin in den Bereich hineinwirken.

<link rel="stylesheet" href="./css/global.css">
<body class="nd-root nd-page">
  <main class="nd-container nd-stack nd-section">
    <h1 class="nd-h1">Hallo Welt</h1>
    <p class="nd-text">Eine gemeinsame Designsprache.</p>
    <a class="nd-button" href="/projekte/">Projekte ansehen</a>
  </main>
</body>

Für eingebettete Bereiche .nd-root an einem Wrapper verwenden und .nd-page weglassen. nd-page setzt auf dem Root den Seitenrand auf null, eine Mindesthöhe von einer Fensterhöhe und ein vertikales Flex-Layout. Ein direkt darin liegender .nd-footer steht bei kurzen Seiten am unteren Fensterrand und folgt bei langen Seiten dem Inhalt. Auf Mobilgeräten wird die dynamische Fensterhöhe (100dvh) mit 100vh als Fallback verwendet.

global.css lädt vier lokale Dateien. Immer den gesamten CSS-Ordner und assets/fonts/ inklusive Lizenz kopieren; deren relative Verzeichnisstruktur beibehalten. Alternativ fonts.css, tokens.css, base.css, components.css in dieser Reihenfolge per <link> laden. Kein zentraler CSS-Endpunkt und kein CDN nötig.

Komponenten

Zweck	Klassen
Überschriften	nd-h1, nd-h2, nd-h3 auf semantisch passenden Überschriften
Text	nd-text, nd-lead, nd-small, optional nd-muted
Textlink	nd-link
Aktion / Navigation	nd-button, optional nd-button--secondary
Karte	nd-card, meist mit nd-stack
Container	nd-container, optional nd-container--narrow
Layout	nd-stack, nd-cluster, nd-grid, nd-section
Kopfbereich / Logo	nd-header, nd-logo
Footer	nd-footer und nd-footer__inner
Sprunglink	nd-skip-link mit passendem Inhaltsziel

Buttons für Aktionen als <button type="button">, Navigation als <a href="…"> verwenden. Native Buttons mit disabled deaktivieren. Keine funktionslosen Links oder aria-disabled ohne passende Verhaltensimplementierung einsetzen. Fokus ist sichtbar; interaktive Buttons sind mindestens 48 px hoch. Es gibt keine Animationen.

Tokens und Typografie

Spacing: 8, 16, 24, 32, 48, 64 und 80 px bei 16-px-Root-Schriftgröße; rem-Einheiten respektieren Nutzereinstellungen. Container: 72 rem und 44 rem. Radien: 8 und 12 px. Grundzeilenhöhe: 1,6; Überschriften: 1,2. Die Farbwerte entsprechen der Markenpalette.

Inter 4.1 ist vollständig lokal enthalten: variable WOFF2-Dateien für aufrechte und echte kursive Schrift, jeweils Gewicht 100–900. fonts.css registriert sie unter dem eindeutigen Familiennamen nobbe Inter, um Konflikte mit Host-Anwendungen zu vermeiden. font-display: swap zeigt Text während des Ladens mit der Systemschrift; font-optical-sizing: auto passt die optische Größe an. Es werden keine lokal installierten Fonts vorausgesetzt und keine externen Fonts geladen.

Quelle: offizielles Inter-Release 4.1. Die unveränderten Dateien stehen unter SIL Open Font License 1.1; assets/fonts/OFL.txt bei jeder Übernahme mitführen. Herkunft und SHA-256-Prüfsummen stehen in assets/fonts/README.md.

Die Vorschau zeigt beide vollständigen Farbpaletten nebeneinander mit Farbproben, semantischen Rollen, Token-Namen und Hex-Werten sowie eine Schriftprobe inklusive Umlauten, Ziffern, Fett und Kursiv. Das Theme der Komponenten bleibt automatisch systemgesteuert.

Der Akzent bleibt #FF1A75. Da Weiß darauf für normalen Text zu wenig Kontrast bietet, verwendet der primäre Button dunklen Text. Beim Hover #D9005D wird der Text weiß. Textlinks sind im Light Mode #D9005D und im Dark Mode #FF1A75. Auf Kartenflächen sorgen zusätzliche semantische Farben für ausreichenden Kontrast: #FF75AC für dunkle Kartenlinks und #62626B für hellen zurückhaltenden Kartentext. Die vorgegebenen Basisfarben bleiben unverändert. Muted-Text nicht auf Akzentflächen setzen.

Logos

<picture>
  <source srcset="/assets/nobbe-org-2027-v1_dark-bg.svg"
          media="(prefers-color-scheme: dark)">
  <img class="nd-logo" src="/assets/nobbe-org-2027-v1_light-bg.svg"
       width="80" height="80" alt="nobbe">
</picture>

Originale nicht umfärben oder optimieren. Das Picture setzt einen Hintergrund voraus, der dem Systemfarbschema folgt. Bei einem verlinkten Logo einen sinnvollen zugänglichen Linknamen verwenden.

BIMI-Logo

assets/nobbe-bimi-logo.svg enthält die unverändert übernommene BIMI-Logovariante. Die Datei deklariert SVG 1.2 mit baseProfile="tiny-ps", hat eine quadratische Zeichenfläche von 960 × 960 und einen weißen Hintergrund. Ihr Titel lautet „Oliver Marc Nobbe“.

Die Datei ist als separates Asset für die Verwendung im E-Mail-Kontext enthalten; die Webseiten verwenden weiterhin die Light-/Dark-Logovarianten. Das Aufnehmen der Datei allein richtet BIMI nicht ein. Hosting, DNS- und Mail-Konfiguration sind nicht Bestandteil dieser Änderung. Die XML-Struktur wurde geprüft; eine vollständige BIMI-Konformitätsprüfung wurde nicht durchgeführt.

Favicon

assets/favicon.ico enthält 16 × 16, 32 × 32 und 48 × 48 px und ist in der Vorschau sowie allen HTML-Vorlagen lokal verlinkt:

<link rel="icon" href="../assets/favicon.ico" type="image/vnd.microsoft.icon">

Die Datei beim Übernehmen mitkopieren und den Pfad an die Zielseite anpassen. In Astro mit der oben beschriebenen Asset-Struktur beispielsweise /vendor/nobbe-design/assets/favicon.ico verwenden. Bei einer Coolify-Fehlerantwort wird der relative Pfad anhand der angeforderten Browser-URL aufgelöst; dort gegebenenfalls /assets/favicon.ico verwenden und die Datei über den Wartungsserver bereitstellen.

Lokale Integration

Astro

css/ nach public/vendor/nobbe-design/css/ und assets/ inklusive Schriftdateien und Lizenz nach public/vendor/nobbe-design/assets/ kopieren. Im gemeinsamen Astro-Layout:

<link rel="stylesheet" href="/vendor/nobbe-design/css/global.css">

Dem <body> class="nd-root nd-page" geben und Komponenten wie oben verwenden. Logo-Pfade an /vendor/nobbe-design/assets/ anpassen. Für Installationen unter einem Unterpfad das konfigurierte Astro-Basisverzeichnis berücksichtigen.

Forgejo

CSS, Logos und assets/fonts/ inklusive Lizenz unter Beibehaltung der relativen Pfade in den eigenen, zur Installation passenden statischen Custom-Asset-Bereich kopieren. Den lokalen Stylesheet-Link über die vorgesehenen Template-Erweiterungen der installierten Forgejo-Version einfügen. Custom-Pfade und Templates anhand dieser Version prüfen; sie sind keine stabile Schnittstelle dieses Designsystems.

Eigene statische Seiten oder Template-Fragmente mit .nd-root umschließen. Nicht pauschal die gesamte Forgejo-Oberfläche mit .nd-root versehen. Mit nd--Klassen gestalten und bei Bedarf einen kleinen projektspezifischen Adapter nach dem Designsystem laden. Kopierte Originaltemplates bei Forgejo-Updates auf Änderungen prüfen.

Eigenständiges HTML

css/ und assets/ neben die Seite kopieren; Stylesheet- und Logo-Pfade relativ zur HTML-Datei setzen. examples/index.html dient als vollständiges Muster. Keine Internetverbindung erforderlich.

Maintenance mit gemeinsamen CSS-Dateien

templates/maintenance.html lädt das gemeinsame Stylesheet über ../css/global.css. Dessen lokale Imports laden Basis, Tokens, Komponenten und die Font-Registrierung. Die Font-Pfade werden relativ zu css/fonts.css aufgelöst. Beide SVG-Logos sind über lokale Dateipfade im Picture verlinkt; prefers-color-scheme wählt automatisch die passende Variante. Beim Bereitstellen die gesamten Ordner css/ und assets/ inklusive Schriftlizenz mit übernehmen und die relative Verzeichnisstruktur beibehalten oder den Stylesheet-Link an den Zielpfad anpassen. CSS, Logos, Favicon und Schriftdateien zusammen mit der Wartungsseite über den Wartungsserver bereitstellen, damit sie auch bei gestoppter Anwendung erreichbar bleiben. Bei einem Ladefehler greift die Systemschrift. Die Datei als Fehler-/Wartungsdokument in der zur Installation passenden Proxy- oder Static-Hosting-Konfiguration bereitstellen. Hierdurch wird kein Coolify-Dienst automatisch geändert.

Der Server/Proxy sollte für eine geplante Wartungsantwort HTTP 503 und gegebenenfalls Retry-After setzen; HTML selbst kann den HTTP-Status nicht setzen. Bei einer Content Security Policy müssen für die lokalen Stylesheets style-src 'self', für Logos und Favicon img-src 'self' und für die lokalen Schriftdateien font-src 'self' erlaubt sein. Diese Einstellungen installationsbezogen vornehmen.

Coolify Maintenance mit eingebettetem CSS

templates/maintenance-coolify.html ist die separate Variante auf Basis der Maintenance-Vorlage. Sie enthält den Inhalt von css/fonts.css, css/tokens.css, css/base.css und css/components.css direkt im <style>-Block. CSS-Imports und ein separater CSS-Ordner sind dafür nicht erforderlich. Beide Logo-Varianten sind als lokale SVG-Dateien im Picture verlinkt; prefers-color-scheme übernimmt die automatische Light-/Dark-Auswahl. Die Originaldateien bleiben unverändert.

Inter bleibt lokal verlinkt: ../assets/fonts/InterVariable.woff2 und ../assets/fonts/InterVariable-Italic.woff2. Anders als bei externem CSS werden diese URLs relativ zur URL des HTML-Dokuments aufgelöst. Den Ordner assets/ mit beiden Logos, Favicon und fonts/ inklusive Lizenz mit bereitstellen und die Pfade anpassen, falls die Zielstruktur abweicht. Bei Verwendung als Fehlerantwort zählt die angeforderte Browser-URL, nicht der Dateipfad auf dem Server; dafür gegebenenfalls einen passenden absoluten lokalen Pfad wie /assets/fonts/InterVariable.woff2 verwenden. Ohne erreichbare Schriftdateien greift der System-Fallback. Auch die Logo- und Favicon-Verweise werden relativ zur angeforderten Browser-URL aufgelöst; gegebenenfalls entsprechende lokale absolute Pfade verwenden. Die Vorlage enthält weder Base64-Fonts noch eingebettete SVGs.

Bei einer Content Security Policy benötigt diese Variante eine Freigabe des Inline-Stylesheets per Hash, Nonce oder passender Richtlinie sowie img-src 'self' und font-src 'self'. HTTP 503 und gegebenenfalls Retry-After werden wie bei der normalen Variante vom Server gesetzt.

Impressum

templates/impressum.html mit CSS und Assets übernehmen. Alle eckigen Platzhalter ersetzen, den sichtbaren Vorlagenhinweis entfernen und nur zutreffende Abschnitte behalten. Betreiberangaben und projektspezifische Inhalte sind bewusst nicht erfunden. Die Vorlage ist keine vollständige rechtliche Prüfung.

Weiterentwicklung und Versionsübernahme

Projekte kopieren Assets aus einer bewusst gewählten Version lokal. Die Quellversion im Zielprojekt dokumentieren. Keine automatischen Updates zur Laufzeit.

1. Tokens und Komponenten im Quellprojekt ändern.
2. Vorschau und Vorlagen aktualisieren. Die Maintenance-Seite verwendet dieselben CSS- und Schriftdateien wie die Vorschau. Nach Änderungen an CSS den <style>-Block in maintenance-coolify.html aus fonts.css, tokens.css, base.css und components.css in dieser Reihenfolge aktualisieren. Bei Logo-Änderungen die lokalen Assets und gegebenenfalls die Picture-Dateipfade aktualisieren; die lokale Schriftlizenz mitführen.
3. Light/Dark, 320 px und Desktop, Textvergrößerung, Tastaturfokus und Kontraste prüfen.
4. Original-Logos unverändert halten und lokale Pfade kontrollieren.
5. Eine Version nach SemVer veröffentlichen: neue kompatible Komponenten minor, Korrekturen patch, inkompatible Klassen-/Tokenänderungen major.

1.0 ersetzt die ungekapselten Starterklassen wie .button und .container durch nd--Klassen. Bestehende Starter-Seiten beim Übernehmen entsprechend migrieren. Projektadapter gehören in das jeweilige Zielprojekt; die gemeinsame Basis bleibt klein.

Prüfstand 1.0.5

Lokale HTML-Verweise, Sprungziele und eindeutige IDs wurden geprüft. Die Maintenance-Seite verlinkt den gemeinsamen CSS-Einstieg; alle HTML-Seiten verlinken die passenden lokalen Logo-Dateien für Light und Dark Mode. Die lokalen WOFF2-Dateien und die Lizenz wurden bytegenau mit dem offiziellen Inter-4.1-Archiv verglichen; die Maintenance-Seite verweist auf diese lokalen Schriftdateien. Die Vorschau enthält 28 Farbproben für die 14 Farbrollen in beiden Modi. Die Logo-Dateien stimmen bytegenau mit den bereitgestellten Originalen überein. Textkontraste wurden rechnerisch geprüft, einschließlich Kartenflächen.

Die visuelle Browserprüfung von Mobile/Desktop, Light/Dark, Zoom und Tastaturbedienung steht aus: Im Bearbeitungsumfeld war kein automatisierbarer Browser verfügbar; Safari lieferte einen Timeout. Diese Prüfungen vor einer Veröffentlichung anhand der Vorschau durchführen.

Änderungen

1.0.5

• BIMI-Logo unverändert als assets/nobbe-bimi-logo.svg aufgenommen.
• Zweck und Prüfungsumfang der BIMI-Datei dokumentiert.

1.0.4

• Lokales Favicon mit 16, 32 und 48 px in Vorschau und allen HTML-Vorlagen eingebunden.
• Eingebettete SVG-Logos beider Maintenance-Vorlagen durch lokale Picture-Verweise mit automatischer Light-/Dark-Auswahl ersetzt.
• Hinweise zur Bereitstellung lokaler Assets aktualisiert.

1.0.3

• Optimierte Logos nobbe-org-2027-v1_light-bg.svg und nobbe-org-2027-v1_dark-bg.svg unverändert übernommen.
• Picture-Verweise und eingebettete Logos beider Maintenance-Varianten aktualisiert.
• Bisherige Logo-Dateien und doppelte Varianten ersetzt.

1.0.2

• Normale Maintenance-Vorlage auf den gemeinsamen CSS-Einstieg umgestellt.
• Separate Coolify-Vorlage mit eingebettetem CSS und lokal verlinkten Fonts ergänzt.
• Footer bei kurzen Seiten am unteren Fensterrand positioniert; lange Seiten bleiben im normalen Dokumentfluss.
• Dokumentation für beide Maintenance-Varianten aktualisiert.

1.0.1

• Maintenance-Schriften aus assets/fonts/ lokal verlinkt statt als Base64 eingebettet.
• Maintenance-HTML von rund 1 MB auf 9,7 kB reduziert.
• Bereitstellung und lokale Font-Pfade dokumentiert.