Zur Stripe-Fassung

Stilguide

Die Grundlagen der Stripe-Fassung von mint-processes.ch in Kürze: Farben, Schrift, Formen, Bausteine und Bewegung. Alles hier nutzt das echte Stylesheet der Seite.

Farben

Hell und ruhig, mit Mint als Leitfarbe. Blau und Flieder kommen nur im Verlauf und in weichen Farbwolken vor, nie als Fläche.

Mint--mint · #53c1aa

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

Mint hell--mint-hell · #e3f6f1

Flächen hinter Symbolen, Ergebnis-Felder

Türkis--tuerkis · #2fb5c9

zweite Farbe im Verlauf, Vorsegel

Blau--blau · #3d6bff

nur ganz am Ende des Verlaufs und für Fokus-Rahmen

Flieder--flieder · #a78bff

nur in weichen Farbwolken

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, Blau nur ganz am Ende. Für Zahlen, den gefahrenen Teil der Route und erreichte Bojen.

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

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

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, Bojen als Stationen.

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

Bewegung

Bewegung erklärt und belohnt, sie lenkt nicht ab. Bei «Bewegung reduzieren» steht alles still.

Übergänge

Ease-out, schnell beschleunigen und weich auslaufen: cubic-bezier(.2, .8, .2, 1), 200–600 ms.

Microanimationen

Haken zeichnen sich, Zahlen rollen, Inhalte kommen gestaffelt und richtungsgerecht herein, ein Lichtstreif läuft über Ergebnisse.

Scroll

Das Schiff fährt mit dem Scrollen, bremst vor dem Hafen und gleitet weich nach. Farbwolken treiben langsam.

Maus

Ganz weiche, kleine Wellen im Schiff-Abschnitt; Hover füllt Knöpfe dunkel bzw. mit Farbwolken, ohne Farbwechsel an Karten.

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

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