Hero: Vorschlag
Digitalstudio · zwei Leute · Deutschland
masticfrog.de
Wir entwerfen und bauen Websites, CRMs und Browserspiele, von der ersten Skizze bis zum Livegang.
Probably bad vibecoding projects coming soon
Der Hero läuft immer auf Ink, unabhängig vom Modus. Logo 216 px (9 × 24), Wortmarke in Pixelify Sans, Fließtext in Sans, Kicker und Fußzeile in Mono.
Farben: Resin
Die Skala stammt aus dem Logo und ändert sich nie. Amber ist die einzige Akzentfarbe; Ink ist der Träger, auf dem das Logo immer steht.
Flächen: LightDark
Status & Feedback
Statusfarben sind kräftig und eindeutig: sie müssen auf Panel-Flächen sofort auffallen. Die Farbe heißt danger (Zustand: Fehler oder unumkehrbare Aktion), die Button-Variante heißt destructive (die Handlung selbst). Jeder Zustand hat drei Werte: Rahmen, Fläche und Text. Nie eine Statusfarbe als Akzent oder Dekoration verwenden.
Bestätigte Aktion, gespeicherter Zustand.
Etwas braucht Aufmerksamkeit, blockiert aber nicht.
Fehler und unumkehrbare Aktionen.
Neutraler Hinweis, kein Handlungsdruck.
Meldungen
Badges & Button-Variante „destructive“
Destruktive Aktionen nur gefüllt, wenn sie die Primäraktion des Dialogs sind, sonst als Outline.
Typografie
Wortmarke
Pixelify Sans
Nur für die Wortmarke und Hero-Titel. Pixelraster wie das Logo, aber mit echten Kleinbuchstaben, deshalb steht die Wortmarke masticfrog.de wirklich klein. Nie im Fließtext, nie unter 20 px. Lädt die Pixelschrift nicht, tritt Space Mono in Versalien an ihre Stelle, nie eine System-Serif.
Überschriften & Labels
Space Mono
Die Leitschrift. 400 Regular · 700 Bold. Display negativ getrackt, Labels in Versalien durchgehend mit 0.16em.
Fließtext
Instrument Sans
Nur für längere Absätze. 400 Regular · 600 Semibold, Zeilenhöhe 1.55.
Alle drei Familien stehen unter der SIL Open Font License und laufen auf eigener Infrastruktur: woff2, eingebunden über @font-face mit font-display: swap, nur die tatsächlich benutzten Schnitte. Erlaubt sind fonts.masticfrog.de und das eigene Verzeichnis des Projekts — wer viele Seiten betreibt, nimmt den einen Ursprung statt derselben Datei in jedem Repo. Kein fremder Font-Host im Produktivbetrieb: kein Google Fonts, kein Bunny. Nicht wegen des zweiten Ursprungs, sondern weil so ein Server jeden Besucher sieht und jederzeit verschwinden kann. Bedingung für jede künftige Schrift: frei herunterladbar und selbst hostbar.
Icons
Die Bibliothek ist frei wählbar, alles aus react-icons ist in Ordnung. Verbindlich ist nur der Stil: Outline, etwa 1.5 px Strichstärke, immer currentColor, keine gefüllten oder mehrfarbigen Icons. Innerhalb eines Bildschirms bleibt es bei einer Bibliothek, damit Strichstärke und Ecken zusammenpassen. Der Guide zeigt Lucide, weil es zur Hand ist. Das einzige Bildzeichen der Marke bleibt das Logo.
Größen
in Labels und Badges
in Buttons und Meldungen
Abschnitte, alleinstehend
Regeln
Immer currentColor, das Icon erbt die Textfarbe.
Alleinstehende Icons brauchen aria-label und 44 px Trefferfläche.
Keine gefüllten oder mehrfarbigen Icons.
Icon nie größer als 20 px. Dafür ist das Logo da.
Ausrichtung
Icon und Text stehen 9 px auseinander, optisch auf der Mittellinie. Richtungsicons rechts, alles andere links vom Text.
Komponenten
Buttons
Keine Radien, keine Schatten. Vertikal 13 px, horizontal 22 px. Entscheidend ist die Rolle, nicht die Optik: was eine Aktion auslöst, ist ein Button; was zu einer anderen Seite führt, folgt den Navigationsregeln aus 07, auch wenn es in einer Zeile mit Buttons steht.
Logo-Einsatz
Das Logo steht immer auf Ink, in beiden Modi. Mindestgröße 24 px, Skalierung nur in 24-px-Schritten.
Eingabefelder
Feldhöhe 44 px, Rahmen 1 px, Fläche eine Stufe dunkler als das Panel. Label immer sichtbar, nie nur als Platzhalter.
Auswahl
Kästchen und Schalter bleiben rechtwinklig. Der Radiobutton ist der einzige Kreis im System, damit er nicht mit dem Kästchen verwechselt wird. Schalter schalten sofort, ohne Bestätigen-Button.
Segmente, Regler, Verlauf
Dialog, Hinweis, Seiten
„Shop Landfein“ und alle 145 erfassten Stunden werden entfernt. Das lässt sich nicht zurückholen.
Dialoge sind rechteckig, ohne Schatten, mit 1-px-Rahmen in border/strong und dunklerer Fläche als das Panel darunter.
Navigation & Menüs
Navigation ist Text, keine Grafik: Labels in Mono, Versalien, 0.16em Tracking. Die aktive Seite wird mit einer 2 px Amber-Linie markiert, nie mit einer Fläche. Höchstens fünf Punkte je Ebene, höchstens zwei Ebenen tief.
masticfrog.de
Fußzeile
masticfrog.de
Digitalstudio aus Deutschland. Websites, CRMs und Browserspiele.
Die Fußzeile läuft immer auf Ink, in beiden Modi, und schließt die Seite ohne obere Trennlinie ab. Links in Amber, Kleingedrucktes in Mono-Versalien. Höchstens drei Spalten plus Marke; Pflichtangaben (Impressum, Datenschutz) stehen unten und sind nie in einem Menü versteckt. Das gilt für die Website-Fußzeile mit Linkspalten. Ein einzeiliges Kolophon in einem Werkzeug bleibt auf der Seitenfläche und trägt Mono-Versalien in text/muted.
Raster & Abstände
Container
Maximal 1120 px breit, 40 px Seitenrand, 12 Spalten mit 20 px Abstand. Ab 900 px auf 6 Spalten, ab 600 px auf eine.
Geometrie
Alles rechtwinklig: 0 px Radius, keine Schatten. Tiefe entsteht nur über Fläche und 1-px-Linien, passend zum Pixelraster des Logos.
Interaktion & Zugänglichkeit
Klarheit vor Dekoration: jedes Element sagt, was es tut, reagiert sofort und bleibt mit Tastatur erreichbar. Diese Regeln gelten auch dann, wenn sie dem Layout wehtun.
Trefferflächen
Mindestens 44 × 44 px pro Bedienelement, auch wenn das Icon kleiner ist. Zwischen zwei Zielen mindestens 8 px.
Fokus & Tastatur
Sichtbarer Ring: 2 px Akzent, 3 px Abstand. Nie outline: none ohne Ersatz. Reihenfolge folgt der Leserichtung.
Kontrast
Fließtext mindestens 4.5 : 1, Text ab 24 px und Icons mindestens 3 : 1. Amber nie als Textfarbe auf hellem Grund.
Beschriftung
Buttons benennen die Handlung, nicht die Bestätigung: „Projekt löschen“ statt „OK“. Icons nie allein ohne aria-label.
Bewegung
Maximal 200 ms. Animierbar sind Deckkraft, Position sowie Flächen- und Rahmenfarbe, nichts anderes. prefers-reduced-motion wird respektiert, dann ohne Übergang.
Daten: Tabellen & Diagramme
Zahlen stehen immer in Space Mono mit font-variant-numeric: tabular-nums, damit Ziffern untereinander bündig laufen. Formatierung deutsch: Punkt als Tausendertrenner, Komma als Dezimaltrenner, Einheit mit geschütztem Leerzeichen. Ausgenommen sind technische Ausgaben, die ein Werkzeug wörtlich durchreicht, etwa Dateigrößen, Logzeilen oder Versionsnummern.
| Projekt | Budget | Stunden | Status | |
|---|---|---|---|---|
| Relaunch Kreisbau | 48.000 € | 612 | 38,2 % | Live |
| CRM Hoffmann & Söhne | 36.900 € | 504 | 29,7 % | In Arbeit |
| Browserspiel „Teich“ | 28.500 € | 381 | 24,1 % | Review |
| Shop Landfein | 15.000 € | 145 | −4,8 % | Stopp |
| Interne Werkzeuge | – | 84 | – | Ohne Budget |
| Summe · 4 Projekte | 128.400 € | 1.642 | 31,5 % |
Ausrichtung
Zahlen und Einheiten rechts, Text links, Kopfzeile folgt der Spalte. Nie Zahlen zentrieren.
Linien statt Streifen
Trennung nur über 1-px-Hairlines. Keine Zebra-Streifen, keine farbigen Zeilen. Farbe bleibt dem Status.
Leere Werte
Fehlender Wert ist ein Halbgeviertstrich (–) in text/muted, nie 0 und nie leer. Summenzeile immer mit Trennlinie darüber.
Werte stehen direkt am Balken: keine Legende, keine Gitterlinien, keine Achsenbeschriftung, wenn die Zahl schon dasteht. Nullpunkt immer sichtbar.
Amber, Hauptreihe
Petrol
Pflaume
Graphit, Vergleich oder Vorjahr
Vier Reihen, vier verschiedene Farbtöne mit unterschiedlicher Helligkeit, damit sie sich auch bei Farbsehschwäche und im Schwarzweißdruck unterscheiden. Nie vier Abstufungen derselben Farbe. Statusfarben sind nie Reihenfarben, solange mehrere Reihen im Bild sind. Zeigt ein Balken genau einen Zustand, etwa freien Speicher oder Auslastung, ist die Statusfarbe richtig. Die Werte drehen sich pro Modus: auf hellem Grund dunkle Füllungen, auf dunklem Grund helle.
Balken
Erste Wahl für Vergleiche über Kategorien. Waagerecht, wenn die Labels lang sind.
Linie
Nur für Zeitreihen. Punkte an echten Messwerten, keine weiche Interpolation.
Torte
Höchstens zwei Segmente, sonst wird ein Balken daraus.
Tacho & 3D
Nie. Sie belegen viel Fläche für einen einzigen Wert. Dafür reicht die Zahl.
Immer
Nullpunkt der Achse sichtbar, abgeschnittene Skalen lügen.
Werte direkt am Element statt in einer Legende.
Reihen zusätzlich durch Reihenfolge oder Beschriftung unterscheidbar, nicht nur durch Farbe.
Einheit einmal nennen (Achse oder Kopfzeile), nicht an jeder Zahl.
Niemals
Verläufe, Schatten, 3D, Rundungen an Balken oder Flächen.
Torten- und Ringdiagramme mit mehr als zwei Segmenten.
Zweite Y-Achse oder Doppelskala in einem Diagramm.
Statusfarben als Reihenfarben. Rot heißt Fehler, nicht „Reihe 3“.