Zur Website

Stilguide

Die Regeln der neuen Website von MINT Process Solutions: Farben, Schrift, Logo, Icons, Raster, Bausteine, Bewegung, Texte und Barrierefreiheit. Alles hier nutzt das echte Stylesheet der Seite und zeigt darum immer den aktuellen Stand. Der Schalter oben rechts zeigt alles im Dunkelmodus. Grundlage für ein späteres CD-Manual.

Farben

Hell und ruhig, mit Mint als Leitfarbe und Tinte für Schrift und dunkle Flächen. Türkis, Blau und Flieder kommen nur im Verlauf und in weichen Farbwolken vor, nie als Fläche; sie entsprechen den Grafikfarben in der Stufe «Kräftig».

Mint--mint · #53c1aa

Leitfarbe: Akzente, aktive Zustände, Links in Mint-Dunkel

Mint hell--mint-hell · #e3f6f1

Flächen hinter Symbolen, Ergebnis-Felder

Fokus--fokus · #3f60a7

Tastatur-Fokus-Rahmen (= Grafikfarbe Blau tief, im Dunkelmodus Blau kräftig)

Türkis--tuerkis · #45becb

zweite Farbe im Verlauf, Farbwolken, Vorsegel (= Grafikfarbe Türkis kräftig)

Blau--blau · #89aaef

nur in weichen Farbwolken (= Grafikfarbe Blau kräftig)

Flieder--flieder · #b19de7

nur in weichen Farbwolken (= Grafikfarbe Violett kräftig)

Tinte--tinte · #0b1d2b

Schrift, dunkle Flächen (Zyklus, Kontakt)

Grau--grau · #56677a

Fliesstext zweiter Ebene, Fortsetzung im Zweiton-Titel

Linie--linie · #e6ebf0

feine Konturen und Trennlinien

Fläche--flaeche · #f6f9fb

Kacheln und Knopf-Hintergründe

Papier--papier · #fff

Seitengrund

--verlauf

Verlauf: überwiegend Mint, Türkis in der Mitte, Himmel nur ganz am Ende. Für Zahlen und den gefahrenen Teil der Schiffsroute.

Funktionsfarben

Rot, Gelb und Grün für Zustände und Prioritäten (Muss, Soll, Kann), je mit einer hellen Fläche. Grün ist das MINT-Grün.

Rot--rot · #d93a3f

Muss / Problem

Gelb--gelb · #c98a04

Soll / Hinweis

Grün--gruen · #1c8f78

Kann / erledigt

Grafikfarben

Fünf Töne ohne Bedeutung, nur für Grafiken: Karten, Kachel-Hintergründe, Referenz-Flächen. Alle haben dieselbe Helligkeit und Sättigung wie das Original-Mint (gemessen in OKLCH), nur der Farbton wandert je rund 30° weiter. So passt jede Farbe zum Mint, und keine drängt sich vor. Mint bleibt das Original (#53c1aa, hell #e3f6f1).

WolkePastellKräftigTiefMint#e3f6f1#98ead7#53c1aa#007862Türkis#ddfafd#91e8f2#45becb#007583Himmel#e1f7ff#9fe2ff#60b6e4#006c9cBlau#e9f4ff#bbd8ff#89aaef#3f60a7Violett#f5f0ff#dccdff#b19de7#6a529f

Wolke für Hintergründe und Kachelverläufe, Pastell für Karten und Flächen in Grafiken, Kräftig für Linien, Punkte und Symbole, Tief für Flächen mit weisser Schrift oder weissem Logo. Variablen: --g-<farbe>-<stufe>, z. B. --g-himmel-pastell. Nie für Zustände (dafür gibt es die Funktionsfarben) und nie als Schriftfarbe.

Dunkelmodus

Wer will, schaltet im Fuss auf dunkel um; die Wahl bleibt im Browser gespeichert und gilt ab dem ersten Bild (kein heller Blitz). Die Seite bleibt grundsätzlich hell. Im Dunkeln werden Seite, Flächen, Linien und Schrift umgefärbt; die weissen Produktansichten in den Kacheln bleiben hell wie Bildschirmfotos, Farbwolken werden ruhiger. Mint und die Grafikfarben bleiben gleich.

papier--papier · #08131c

Seitengrund

flaeche--flaeche · #0f1e2a

Kacheln, Felder

linie--linie · #1e3242

Konturen

grau--grau · #93a5b4

Text zweiter Ebene

text-hell--text-hell · #e7eef3

Schrift

gruen--gruen · #5fd3b8

Links, «erledigt»

Schrift

Poppins in 300, 400, 500 und 600 (seit 18.10. statt IBM Plex Sans), für Zahlen und Kürzel IBM Plex Mono. Grosse Titel leicht (300) mit enger Laufweite, Fliesstext 400, Auszeichnungen 500.

Einstieg · .s-riesig
300 · bis 6.6rem

Refresh your processes.

Zweiton-Titel · .s-zweiton
300 · bis 2.75rem

Jedes Unternehmen ist ein Schiff. Die Fortsetzung steht in Grau.

Einleitung · .s-einstieg-lead
400 · bis 1.375rem

MINT macht Geschäftsprozesse verständlich.

Kartentitel
500 · 1.25rem

Prozessmanagement

Fliesstext
400 · 1rem / 0.9375rem

Ruhige Sätze in Grau, Zeilenhöhe 1.6. Schweizer Rechtschreibung mit ss.

Zahl · .s-zahlen b
300 · Verlauf
BPMN 2.0
Schweizer Satz

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

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

Icons

Für Phasen und Leistungen stehen immer die MINT-Icons, einfarbig in Schrift- oder Phasenfarbe, auf einer runden Fläche in Mint hell. Nur in der Navigation und bei den Branchen kommen feine Linien-Icons (Phosphor Light) dazu. Keine weiteren Icon-Sets.

MINT-Icons

Strategie
Analyse
Optimierung
Einführung
Monitoring
Business Analyse
Projektleitung

Navigation und Branchen

Prozessmanagement
Technologie
Referenzen
Energie
Banken
Versicherungen
Verwaltung

Raster und Abstände

Eine Inhaltsbreite für alles, viel Luft zwischen den Abschnitten, Text darf schmaler laufen als Grafiken.

Inhaltsbreite

.s-huelle: höchstens 72rem (1152 px), seitlich mindestens 1.5rem Rand.

Abschnitte

Abstand oben und unten fliessend 4.5rem (Handy) bis 8rem (Desktop): clamp(4.5rem, 3rem + 5vw, 8rem).

Kopf

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

Raster

Kacheln und Karten im Raster mit 1–1.5rem Abstand; auf dem Handy untereinander.

Punkteraster

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, nahe am Zeiger um höchstens 3 px, am Kreisrand gar nicht (.s-punktfeld, nur mit Maus, nicht bei «Bewegung reduzieren»). Karten, Kacheln und dunkle Boxen decken das Raster mit ihrer eigenen Fläche ab.

Breakpoints

900 px: Navigation wird zum Burger-Menü · 760 px: Schiff fährt senkrecht statt waagrecht · 640 px: Raster werden einspaltig · 420 px: Fuss einspaltig · 360 px: Titel etwas kleiner.

Formen und Tiefe

Weiche Ecken als Squircle (corner-shape: superellipse(1.1)), feine Konturen statt dicker Rahmen, Schatten nur weich und tief.

Knopf · .5rem UI-Karte · .6rem Kachel · .9rem Box · 1.25rem

Bausteine

Knöpfe mit gleitendem Pfeil (der Schaft erscheint beim Überfahren), Textlinks in Mint-Dunkel, weisse UI-Karten als Produkt-Ansichten. Klickbares gibt beim Drücken leicht nach.

Prozesse besprechenDienstleistungenKontaktMehr erfahren
Mit MINT sprechenDie fünf BPM-Phasen im Detail
AnforderungPriorität
  • Fachlichen Bedarf verstehenMuss
  • Anforderungen beschreiben und priorisierenMuss
  • Umsetzung abstimmenSoll
  • Fachliche Abnahme vorbereitenKann

Formulare

Wenige Felder, eine Spalte, Beschriftung immer über dem Feld (nie nur als Platzhalter). Pflicht und optional stehen im Label. Fehler erscheinen nach dem Absenden direkt am Feld, mit einem konkreten Satz, wie es richtig geht; der Fokus springt aufs erste fehlerhafte Feld. Auf dem Handy öffnet jedes Feld die passende Tastatur (E-Mail, Telefon).

Bitte eine E-Mail-Adresse wie name@firma.ch eingeben.

Bausteine für Unterseiten

Der Baukasten der Unterseiten (stripe_seiten.py), gezeigt mit den Inhalten der Musterseiten Prozessmanagement und Referenz BKW. Kopf, Fuss und BPM-Zyklus kommen unverändert von der Startseite.

Seitenkopf

seitenkopf()

Brotkrumen, grosser Zweiton-Titel, Lead und Knöpfe; die Farbwolke des Einstiegs liegt leiser dahinter. Rechts optional eine Karte (z. B. Kundenkarte).

Wissen, wie die eigenen Prozesse funktionieren. Business Process Management schafft eine gemeinsame Sicht auf die Geschäftsprozesse.

MINT macht Abläufe und Zuständigkeiten verständlich und entwickelt mit dem Team die nächsten Verbesserungen.

Mit MINT sprechenDie fünf BPM-Phasen im Detail

Brotkrumen

krumen()

Muster «Brotkrumen – Schlicht»: feiner Winkel als Trenner, die aktuelle Seite ohne Link.

Kartenraster

kartenraster()

Ruhige Flächen mit Titel und Text, je eine weiche Farbwolke in der Ecke. Mit Link wird die ganze Karte klickbar (Pfeil-Ecke wie die Kacheln).

Überblick

Eine Prozesslandkarte ordnet die Abläufe und zeigt, wo eine vertiefte Analyse sinnvoll ist.

Verantwortung

Abgestimmte Modelle machen sichtbar, wer einen Prozess pflegt und wer Änderungen freigibt.

Verbesserung

Priorisierte Massnahmen verbinden den fachlichen Nutzen mit Aufwand, Abhängigkeiten und einer realistischen Einführung.

Ablauf

ablauf()

Nummerierte Schritte auf einer Linie; beim Hereinscrollen füllt sich die Linie mit dem Verlauf und die Punkte werden nacheinander Mint. Auf dem Handy senkrecht.

  1. Ausgangslage

    Neue Datenschutzanforderungen verlangten klar strukturierte Abläufe – und die Organisation sollte für das Thema sensibilisiert werden.

  2. Vorgehen & Methodik

    End-to-End-Prozesslandkarte, Erhebung in Workshops und Interviews, Modellierung nach BPMN 2.0. MINT verantwortete die methodische Qualität.

  3. Erzielter Mehrwert

    Die Datenschutzprozesse wurden gruppenweit ausgerollt und sind zentral einsehbar – eine Basis für die weitere Digitalisierung.

Text-Bild-Block

text_bild() + bildfeld()

Text neben einer Grafik auf einer Farbverlaufs-Fläche wie in den Kacheln; mit .z-umgekehrt seitenverkehrt, auf dem Handy untereinander.

Process Excellence beginnt mit einem gemeinsamen Verständnis.

Der Kunde entscheidet den Umfang: von einem konkreten Ablauf bis zum organisationsweiten Prozessmanagement.

Prozesslandkarte, vereinfacht
FührungZiele setzen und Verantwortung klären
  1. Bedarf verstehen
  2. Leistung erbringen
  3. Kundschaft betreuen
UnterstützungMenschen, Systeme und Informationen bereitstellen

Eine Prozesslandkarte zeigt, wie Führung, Wertschöpfung und Unterstützung zusammenhängen.

Band mit Zitat

band() + zitat()

Dunkle Box in Inhaltsbreite mit den Farbwolken der Zyklus-Box. Das Anführungszeichen zeichnet sich beim Hereinscrollen (Muster «Zitat mit Anführungszeichen – Raffiniert»). Zitate immer wörtlich.

Dank der Zusammenarbeit mit MINT konnten wir unsere Prozesse transparenter gestalten. Die professionelle Unterstützung bei der Dokumentation unserer Prozesse hat unsere Effektivität und Effizienz deutlich gesteigert.

Kenan CalginHead of Privacy & Data Governance – Group Data Protection Officer, BKW

Fragen

fragen()

Native Aufklapper (Tastatur ohne Skript), die Höhe gleitet, das Plus wird zum Minus.

Wie werden Prozesse aufgenommen?

In Interviews und Workshops, gemeinsam mit den beteiligten Mitarbeitenden. BPMN 2.0 macht Aufgaben, Entscheidungen und Übergaben nachvollziehbar.

Wie wird Verbesserungspotenzial erkannt?

Geprüft werden zum Beispiel Wartezeiten, Doppelarbeiten, Rückfragen und unklare Freigaben. Wo es passt, ergänzt durch Lean-Methoden, Kennzahlen oder eine datenbasierte Analyse.

Wie bleiben Prozesse aktuell?

Durch vereinbarte Verantwortliche und regelmässige Reviews. Eine passende BPM-Lösung macht Modelle, Freigaben und Prozesswissen für die Organisation zugänglich.

Kundenkarte

kundenkarte()

Steckbrief für Referenzseiten: Logo auf Farbverlauf, Kurzbeschrieb, Kennzahlen im Verlauf, Schwerpunkte als Pillen.

Liste mit Haken

haken_liste()

Für Aufzählungen wie «Typische Themen» (Branchen).

  • Konzernweite Prozesslandkarte über Netz, Produktion, Vertrieb und Dienstleistungen
  • Kundenprozesse für Anschluss, Wechsel, Photovoltaik und Wärme

Logo-Wand

logo()

Kundenlogos grau auf ruhigen Flächen (Referenzen), einzeln auch als Logozeile in Karten.

  • BKW
  • Regionalwerke Baden
  • Helvetia
  • Zuger Kantonalbank

Hinweis

hinweis()

Notizen zur Umsetzung oder offene Fragen aus dem Prototyp; gehören nicht zum späteren Seitentext.

HinweisBPM Insights via HubSpot-Blog, Teaser auf dieser Seite per HubSpot-Modul oder RSS.

Aufruf

aufruf()

Die dunkle Kontaktkarte der Startseite in ganzer Breite, am Ende jeder Unterseite.

Wo sollen die Prozesse besser werden?

Ein erstes Gespräch klärt die Ausgangslage und welche Unterstützung zum Vorhaben passt.

Mit MINT sprechen

Leitmotiv Segelschiff

Aus dem Konzept von MINT: «Jedes Unternehmen ist ein Schiff auf hoher See.» Prozessmanagement bestimmt den Kurs, Business Analyse zeichnet die Seekarte, Projektleitung bringt das Schiff in den Hafen. Auf der Website erscheint das Motiv nur im Schiff-Abschnitt der Startseite: ein Segelboot von oben fährt über ein Seekarten-Raster mit ganz weichen Wellen von Station zu Station. Das Boot schaukelt leicht mit den Wellen der Maus, die Mastspitze stärker als der Rumpf. Auf dem Handy fährt es senkrecht. Kein Leuchtturm, kein Hafenbild, keine Wellen als Dekoration auf anderen Seiten.

Bildsprache

Grafik vor Foto: Was MINT tut, zeigen kleine Produktansichten (Prozessmodell, Anforderungsliste, Projektplan, Zyklus) statt Symbolbilder.

Fotos

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

Kundenlogos

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.

Farbwolken

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.

Bewegung

Bewegung erklärt und belohnt, sie lenkt nicht ab. Bei «Bewegung reduzieren» steht alles still. Was dauerhaft von selbst läuft, muss sich anhalten lassen.

Übergänge

Ease-out, schnell beschleunigen und weich auslaufen: cubic-bezier(.2, .8, .2, 1), 200–600 ms. Gleiten in der Navigation mit cubic-bezier(.19, 1, .22, 1), 300–360 ms.

Microanimationen

Haken zeichnen sich, Inhalte kommen gestaffelt und richtungsgerecht herein, Klickbares gibt beim Drücken nach (hin 120 ms, zurück 220 ms).

Scroll

Im Schiff-Abschnitt bleibt der Bildschirm stehen: der Text baut sich Wort für Wort auf, dann fährt das Boot ein und die drei Stationen tauchen nacheinander auf. Farbwolken treiben langsam.

Maus

Ganz weiche, kleine Wellen im Schiff-Abschnitt; Hover füllt Knöpfe dunkel bzw. mit Farbwolken, ohne Farbwechsel an Karten. Das Logo-Laufband läuft beim Überfahren weiter.

Texte und Ton

Klar, ruhig und belegt. Nutzen zuerst, Fachbegriffe nur mit Erklärung.

Stimme

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

Zweiton-Titel

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

Knöpfe

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

Belege

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

Barrierefreiheit

Kantone und Gemeinden gehören zur Kundschaft, darum gilt WCAG 2.2 AA für jede Seite. Die folgenden Regeln gelten für alles Neue und sind der Massstab für Korrekturen.

Kontrast

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

Tastatur

Alles ist per Tastatur erreichbar und bedienbar, in sinnvoller Reihenfolge. Der Fokus ist immer sichtbar, als Rahmen in --fokus. Der Sprunglink «Zum Inhalt» führt am Menü vorbei.

Bewegung

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

Bedienziele

Mindestens 24 × 24 px, auf Touch besser 44 px. Hover-Effekte nur bei Geräten mit Maus; nichts ist nur per Hover erreichbar.

Sprache und Bilder

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.

So ja

  • Viel Weissraum, wenige klare Elemente
  • Flächen und feine Linien statt Konturen
  • MINT-Icons für Phasen und Leistungen
  • Dunkle Boxen mit weisser Schrift und weichen Farbwolken
  • Klickbares sichtbar als Knopf mit Pfeil
  • Mint immer im Original (#53c1aa)
  • Grafikfarben nur in Grafiken, in gleicher Helligkeit

So nicht

  • Grüne Flächen als «aktiv»-Zustand
  • Dicke Rahmen, grobe Pillen, harte Ecken
  • Neue Icon-Sets neben den MINT-Icons
  • Viel 3D und laute Effekte
  • Erfundene Fakten oder umformulierte Kundenzitate
  • Grafikfarben als Zustand oder als Schriftfarbe
  • Zustände nur mit Farbe zeigen