Stilguide Passform

Textlinks wie «Mehr erfahren», aktive Menüeinträge und die Fläche von «Kontakt» beim Überfahren stehen in Mint tief (--g-mint-tief · #007862, die Grafikfarbe Mint in der Stufe «Tief»). Das bisherige Mint dunkel (#1c8f78) erreicht auf Weiss nur 4 : 1 und reicht für Text nicht. Im Dunkelmodus sind diese Links helles Mint (#53c1aa).

Rechtschreibung mit ss. Anführungszeichen aussen «…», innen ‹…›. Apostroph und Tausendertrenner ’ (11’500). Halbgeviertstrich für Bereiche und Gedankenstrich (2–3 Wochen), Bindestrich nur in Wortverbindungen. Kein hartes Zeilenende in Titeln; Titel umbrechen weich.

Zahlen, die neben- oder untereinander stehen, behalten ihre Breite (tabellarische Ziffern), damit nichts springt.

Solange Poppins lädt, steht Arial mit angepassten Massen («Poppins Ersatz», size-adjust 107,9 / 111,2 / 112,9 / 106 % für 300 / 400 / 500 / 600). So brechen die Zeilen meist schon wie mit Poppins um, beim Schrifttausch springt kaum etwas. Poppins kommt bis zur Reinzeichnung von Google Fonts.

Titel ausgeglichen (text-wrap: balance) und ohne automatische Trennung. Fliesstext mit text-wrap: pretty (kein einzelnes Wort in der letzten Zeile), Silbentrennung nur für lange Wörter, höchstens etwa 70 Zeichen pro Zeile. Mailadressen und Wendungen, die zusammengehören, brechen nicht um.

Sechs Breiten von xs bis 2xl: 40, 48, 64, 72, 80 und 96rem (--c-xs … --c-2xl), jede mit mindestens 1.5rem Rand links und rechts. lg (72rem, 1152 px) ist die Seitenbreite.

Einleitungen aus Titel und Text laufen in sm (48rem), Raster aus Kacheln, Karten und Zahlen in lg. Der schmale Text über der breiten Fläche schafft Spannung.

Von Inhalt zu Inhalt immer derselbe Abstand: --rhythmus: clamp(9rem, 6rem + 10vw, 16rem), bei 1000 px Breite etwa 200 px. Jeder Abschnitt bekommt oben und unten die Hälfte; den Weissraum, den ein Inhalt selbst mitbringt, misst ein Skript und gleicht ihn aus.

Karten, Kacheln und dunkle Felder 24 px (1.5rem) auf allen Seiten. Nummern- und Symbolkreise 38 px; Nummernkreis und Pfeil stehen oben auf einer Linie.

5.5rem hoch (Handy quer 3.75rem), klebt oben; beim Scrollen bekommt er eine helle, weichgezeichnete Fläche und darunter den Fortschrittsbalken.

Der Seitengrund trägt ein feines hellgraues Punkteraster alle 24 px (--punkt, im Dunkelmodus dunkler). Die Maus schiebt die Punkte in einem Kreis von 90 px leicht zur Seite (nur mit Maus, nicht bei «Bewegung reduzieren»).

900 px: Menü wird zum Burger · 640 px: Raster werden einspaltig · 420 px: Fuss einspaltig · 360 px: Titel etwas kleiner. Branchen: breit links Titel und Text, rechts die Knöpfe; schmal untereinander.

Boxen, Karten, Kacheln und das Menü ohne graue Ringlinie; sie heben sich nur durch ihre Farbe und weiche Schatten ab. Referenzkarten hellgrau statt weiss.

Die Dienstleistungs-Kacheln runden beim Überfahren ihre Ecken auf 43 px: Radius des Nummernkreises (19 px) plus Abstand (24 px). So läuft die Ecke parallel zum Kreis.

Eckige Enden und spitze Ecke. In den Kacheln steht der Pfeil in einem 38-px-Kreis; beim Überfahren wächst er nach links zur weissen Pille und der Schaft fährt aus.

Logo links, Menü in der Mitte der Seite, «Kontakt» rechts als Kontur-Knopf. Beim Überfahren füllt sich «Kontakt» mit Mint tief, die Schrift wird weiss.

Hinter den Menütiteln liegt eine Pille mit dem Kachel-Verlauf; sie gleitet zum Punkt unter der Maus oder dem Tastaturfokus, Breite inklusive (300 ms, cubic-bezier(.19, 1, .22, 1)).

Weiss wie der Kopf, ohne Kontur und Trennlinien. Symbole in weissen 38-px-Kreisen wie der Nummernkreis der Kacheln; nur der überfahrene Eintrag bekommt den Kachel-Verlauf. Beim Wechsel verwandelt die Fläche Lage, Breite und Höhe (360 ms); Öffnen nach 90 ms, Schliessen nach 200 ms. Esc und Klick daneben schliessen.

Unter 900 px ein Burger mit drei Streifen: beim Öffnen laufen sie zur Mitte, der mittlere verschwindet, dann drehen sie zum Kreuz; beim Schliessen umgekehrt.

Standard ist die «Liste»: die drei Bereiche als Aufklapper, der aktuelle Bereich offen, unten der Kontakt-Knopf; ist sie länger als der Bildschirm, rollt sie mit dem Finger. Zur Auswahl stehen vier weitere Fassungen: Schublade, Karte, Ebenen und Blatt (ansehen mit ?mnav=schublade usw. in Handy-Breite). In allen bleibt der Fokus im Menü, der Rest der Seite ist gesperrt, Esc und Zurück schliessen.

Sprunglink «Zum Inhalt» beim ersten Tab, Brotkrumen auf allen Unterseiten, Fortschrittsbalken unter dem Kopf, der aktuelle Eintrag im Menü in Mint tief.

Pastellfläche der jeweiligen Grafikfarbe mit dunkler Schrift, das Branchen-Symbol in einem hellen Kreis links, der Pfeil als schlanke Spitze. Beim Überfahren füllt sich der Knopf von links nach rechts mit dem vollen Ton und der Schaft fährt aus; beim Hereinscrollen gleiten die Knöpfe nacheinander herein.

Im Titel der Startseite wird der Buchstabe unter dem Zeiger zur drehenden Form; ab und zu laufen die Buchstaben von links nach rechts wie eine Walze durch Formen und stehen wieder still.

Prozessmanagement: Verteiler, aus einer Spur mit gemischten Formen werden sechs Spuren mit je einer Form-Art. Business Analyse: Verwandlung, eine Form verwandelt sich in die nächste. Projektleitung: Ordnung, links fliegen die Formen ungeordnet, ab der Mitte fahren sie in gleichem Abstand auf einer Höhe.

In «Karte» rasten Formen in den Dienstleistungs-Kacheln ein, in «Ebenen» fällt die Form in ihre Mulde.

Das Bild aus dem Konzept von MINT («Jedes Unternehmen ist ein Schiff auf hoher See.») ist in dieser Fassung nicht zu sehen. Welches Leitmotiv gilt, entscheidet MINT.

Jedes Teil an seinen Platz: Prozesse, Zuständigkeiten und Anforderungen passen, wenn Form und Öffnung zusammengehören. Zehn Grundformen: Kreis, Quadrat, Dreieck, Pille, Halbkreis, Raute, Sechseck, Viertelkreis, Fünfeck, Kreuz. Die Formen stehen für diese Passform, nicht für einzelne Leistungen.

Kein Holz, keine Kiste, kein Deckel, keine Grundfarben – sonst denkt man an das Spielzeug. Nur weiche geometrische Formen auf ruhigem Weiss.

Flächig im kräftigen Ton einer der fünf Grafikfarben, ohne Verlauf; nie eine Funktionsfarbe (Rot, Gelb, Grün).

Überall dieselbe leichte Rundung (Radius 3 bei 64er Grösse), auch an Dreieck, Raute, Fünfeck, Sechseck, Kreuz, Halb- und Viertelkreis. Technisch: Füllung plus gleichfarbige Kontur 6 mit runden Ecken (`stil()` in formen.py, auf Zeichenflächen Linienbreite 0,19 × Grösse).

Seit 31.10.: Titel der Startseite (der Buchstabe unter dem Zeiger wird zur drehenden Form, ab und zu laufen die Buchstaben wie eine Walze durch Formen), Grafiken der drei Dienstleistungs-Kacheln und die mobilen Menüs «Karte» und «Ebenen». Die Header-Konzepte «Schienen» (kleine Züge am Bildrand), «Morph» (die Farbwolke wird zur grossen Form) und «Flug» (Formen wachsen aus der Farbwolke und treiben drehend hinaus) bleiben nur lokal zum Vergleichen; der Passform-Abschnitt mit der Platte ist entfernt.

Die Formen ersetzen keine Icons: für Inhalte bleiben die MINT-Icons. Formen sind Bildsprache und Bewegung, keine Bedeutungsträger in Navigation oder Listen.

Skizze, online auf mint-v2.pages.dev und mint-v3.pages.dev (dort mit den mobilen Menüs), die bewegte Fassung auf mint-v3-bewegung.pages.dev. Das Leitmotiv des Kunden ist weiterhin das Segelschiff; Wechsel nur nach Entscheid mit dem Kunden.

Nur echte Bilder von MINT und aus Projekten (Team, Projektgeschichten), ruhig zugeschnitten, mit festem Platz, damit beim Laden nichts springt.

Im Laufband grau und gedämpft, beim Überfahren in Farbe. In den Referenzkarten weiss auf einem Verlauf der Grafikfarben (Tief nach Kräftig). Logos werden nach sichtbarer Fläche ausgeglichen, nicht nach gleicher Höhe.

Weiche, langsam treibende Flächen aus Mint, Türkis, Blau und Violett hinter Einstieg, dunklen Boxen, Kontaktkarte und Fuss. Nie hinter Fliesstext, der dadurch an Kontrast verliert.

Die Seitentexte sprechen von MINT in der dritten Person («MINT begleitet …»); die Kundschaft wird gesiezt. Schweizer Rechtschreibung mit ss.

Ein kurzer Satz als Aussage, danach die Fortsetzung in Grau: «Die Arbeit beginnt beim Prozess. Prozessmanagement ist der Kern von MINT.»

Tätigkeit statt Floskel, zwei bis drei Wörter: «Prozesse besprechen», «Mit MINT sprechen», «Anfrage senden». Kein «Hier klicken».

Kundenzitate immer wörtlich und mit Namen und Funktion. Keine erfundenen Zahlen, Kunden oder Zitate; Aussagen wie «führend» nur mit Beleg.

Text mindestens 4.5 : 1 (grosse Titel 3 : 1), Konturen von Feldern, Knöpfen und Symbolen mindestens 3 : 1. Grau nie auf Farbwolken. Mint als Textfarbe nur in Mint tief.

Alles ist per Tastatur erreichbar und bedienbar, in sinnvoller Reihenfolge. Der Fokus ist immer sichtbar, als einheitlicher Ring: 2 px in --fokus mit 2 px Abstand. Der Sprunglink «Zum Inhalt» führt am Menü vorbei.

«Bewegung reduzieren» ersetzt Bewegung durch Stillstand oder Überblenden. Was länger als fünf Sekunden von selbst läuft, lässt sich anhalten.

Am Touchscreen mindestens 44 × 44 px (unsichtbar vergrössert, das Layout bleibt gleich), sonst mindestens 24 × 24 px. Hover-Effekte nur bei Geräten mit Maus; nichts ist nur per Hover erreichbar.

Seiten auf lang="de-CH", englische Wendungen wie «Refresh your processes.» als Englisch markiert. Logos tragen den Kundennamen als Alternativtext, rein schmückende Grafiken sind für Screenreader ausgeblendet. Farbe trägt nie allein eine Bedeutung.

Offene Menüs halten den Fokus im Kreis (Burger → Menü → Burger), der Rest der Seite ist gesperrt; Esc und Zurück schliessen. Zugeklappte Gruppen sind auch für Tab und Bildschirmleser zu. Fehlermeldungen sind mit ihrem Feld verbunden (aria-describedby).

Fotos und Grafiken als WebP mit JPG oder PNG als Rückfall, Kundenlogos verlustfrei. Jedes Bild hat Breite und Höhe, damit sein Platz vor dem Laden feststeht; das wichtigste Bild einer Seite lädt zuerst.

Poppins von Google Fonts mit der Ersatzschrift (siehe Schrift); selbst gehostet wird sie erst bei der Reinzeichnung.

CSS und JavaScript werden beim Bau verkleinert. Versionierte Dateien darf der Browser ein Jahr behalten, Bilder einen Tag, danach werden sie im Hintergrund erneuert.

Prüfung vom 3.11.2026 (Handy 390 px, Fast 4G): grösstes Element nach 0,5–0,6 s, Layout-Verschiebung höchstens 0,09, Startseite 166 KB Übertragung.