Marke & Bausteine
Design System
Typografie, Farben, Komponenten und Markenbausteine des Fördervereins — gesammelt an einem Ort, damit sich neue Seiten und Materialien konsistent anfühlen.
Markenstimme
Leitmotiv
Der rote Faden ist „Gemeinsam“ — gemeinsam wachsen, gemeinsam stärken, gemeinsam fördern. Der Förderverein spricht als wir, die Leserin als du.
Tonfall
Optimistisch, konkret, handlungsorientiert. Community-Wärme statt Institutions-Ton — auch als eingetragener Verein.
Calls to Action
Imperativ und konkret: „Jetzt Unterstützer werden“, „Dafür abstimmen“, „Eigene Idee einreichen“ — fast immer mit einem Pfeil nach rechts.
Zahlen & Emphase
Deutsches Zahlenformat („ca. 12.500 €“). Betonte Wörter stehen kursiv innerhalb fetter Headlines, z. B. „Gemeinsam wachsen.“ Kaum Emoji — die Persönlichkeit kommt von Stickern und Charakteren, nicht von Symbolen.
Typografie
Heading 1 (.home-h2) — Bricolage Grotesque, 900
Die Realschule Bad Bentheim
Heading 2 (Standard)
Zukunft gestalten
Heading 3
Unsere Gemeinschaft
Heading 4
Mitgliederversammlung
Paragraph (.text) — Albert Sans
Der Förderverein unterstützt die Realschule Bad Bentheim bei der Verwirklichung vielfältiger Projekte. Jeder Euro kommt direkt den Schülerinnen und Schülern zugute. Wir glauben daran, dass Bildung der Schlüssel zur Zukunft ist.
Emphase — kursiv innerhalb fetter Headline
Gemeinsam wachsen.
Fluide Skala — wächst per clamp() vom Mobile- zum Desktop-Viewport
Farben
Sechs Farbfamilien, jede mit einer surface → base → strong-Rampe. Blau ist die Hauptfarbe für Buttons und Links; die anderen fluten ganze Sektionen. Die Werte kommen 1:1 aus assets/css/input.css — hier nur zur Übersicht versammelt.
#f4f4f4 (nie reinweiß)
#ffffff
#333333
#777777
Farb-Roulette
Logo-Mark und Klick-Funke wählen bei jedem Seitenaufruf zufällig eine von fünf Farben — Token --random-brand-color.
Abstände, Radien & Schatten
Eckenradien — drei Stufen: Formularfelder und Buttons teilen sich einen Radius, Auswahlkarten und Modals liegen darüber, Bilder und große Flächen ganz oben. Wo der Browser corner-shape kennt, werden daraus Squircles.
--radius-fieldFelder, Selects, Buttons
--radius-cardAuswahlkarten, Modals
--radius-mediaBilder, Projektkarten, Hero
Container
Icon-Kacheln
Tags
Squircle & Fallback — ein Squircle wirkt bei gleichem Radius enger als eine runde Ecke. Deshalb ist der Fallback bewusst kleiner gesetzt: Beide Formen haben optisch dasselbe Gewicht.
12px rund
20px
Dein Browser unterstützt corner-shape — die Token-Kacheln oben sind also echte Squircles: 20px, 24px und 32px. Die Umschaltung passiert per @supports; ohne Unterstützung fallen die drei Token auf 12px, 16px und 20px mit runden Ecken zurück.
Dein Browser unterstützt corner-shape noch nicht — du siehst überall den runden Fallback: 12px, 16px und 20px. In unterstützenden Browsern werden daraus 20px, 24px und 32px als Squircle.
Elevation — sanfte Ambient-Schatten für Karten, dramatischer Foto-Lift für Bilder
Abstandsskala — 0.25rem-Basis, u. a. für Padding & Gaps; Sektionen bekommen großzügige ~6rem vertikal
Komponenten
Statistik-Block (.counterblock)
Gesammelte Spenden
Formular-Felder
Tags — Outline-Pille mit farbigem Punkt
Logo
Wortmarke und Bildmarke. Der grüne Kreis der Bildmarke folgt --random-brand-color — probiere die Farbpunkte unten aus.
„Gekritzelt“ (Cribble) — handgezeichnete Logo-Varianten
Ein SVG-Generator (rsb-cribble-engine.js) rendert die Bildmarke in über 35 Stilen — Füllungen, Linienstile, saubere und übereinandergelegte Marken. Klick auf SVG/PNG lädt die jeweilige Variante herunter.
Sticker
Schwarz umrandete oder flächige Cut-out-Doodles und Wort-Badges. 2–4 zufällig pro Seite platzieren, leicht rotiert (−12°…12°), nie im Fließtext.
Illustrationen
Locker gezeichnete Figuren aus dem Transhumans-Set, mit mix-blend-mode: multiply auf farbige Sektionsflächen gelegt.
Icons & Feedback
Outline-Icons im Tabler-Stil, 24×24, stroke: currentColor, Strichstärke 1.5–2. Meist inline als SVG; Social-Marken liegen als eigene Dateien vor.
Social-Marken
Charaktere
Ein wachsender Cast von benannten Voxel-/Minecraft-artigen Schüler:innen und Lehrkräften — Kinder sollen sich selbst wiedererkennen. Immer ganzfigürlich, nie am Gesicht angeschnitten.
Animierte Charaktere
Kurze 9:16-Voxel-Clips aus dem Schulalltag — gedämpft, autoplay, looped, hinter Social-Posts, Hero-Flächen oder als Sektions-Akzent. Nie mit Ton, nie als einzige Informationsquelle.