Zum Inhalt springen
Kontakt aufnehmen

Für Entwicklung

Styleguide

Alle Bausteine der neuen Website mit ihren Klassennamen. Änderungen an Tokens und Bausteinen wirken global: quellen/entwurf.css (Welt), quellen/neu.css (Unterseiten).

Farben

--papier#ffffffSeitengrund, Karten
--zone#f2f4f3Neutrale Zonen, Zweitknöpfe auf Weiss
--mint-hell#dcf4ecNur Kontakt-Schluss, Markierungen, Chips
--mint#53c1aaFluss, Hauptakzent, aktive Station – nie als Text
--mint-tief#1c7360Links, Icons, Mint als Text
--tinte#0f3a35Titel, Hauptknopf
--tinte-weich#3d5a56Fliesstext
--tinte-zart#4d6864Nebentext, min. 4.5:1
--rohr#c3d9d3Leere Leitung, Ränder
--linie#dde8e5Trennlinien
--stau#f2c230Nur Staustellen (Formularfehler: eigenes Rot)

Phasenfarben

Ein Verlauf entlang des Lebenszyklus: von Blau (Strategie) bis Grün (Monitoring), gleiche Helligkeit und Sättigung (OKLCH 47 % / 0.09, Farbton 262 → 160). Tief für Icon und aktiven Zustand, hell für Flächen. Klassen .ph-strategie … .ph-monitoring; begleitende Leistungen neutral. Mint bleibt Marke und Fluss.

Strategie#3e5a8d / #e3efff
Dokumentation#1a6286 / #dbf2ff
Analyse & Optimierung#006877 / #d7f5fa
Implementierung#006b62 / #d8f6f2
Monitoring#216a49 / #ddf6e7
Begleitend#3d5a56 / #eef1f0

Schrift

Refresh your processes.

.t-plakat · Titel-Schrift 600 · clamp(2.9rem … 5.75rem)

Fünf Phasen. Ein Kreislauf.

.t-titel · Titel-Schrift 600 · clamp(2.1rem … 3.4rem)

Worum es geht

.t-zwischen · Titel-Schrift 600 · 1.35–1.75rem

Wir bringen Ordnung in gewachsene Abläufe: entlang des BPM-Lebenszyklus, praxisnah und unabhängig.

.t-lead · Grundschrift 400

Fliesstext: Die Prozesse werden in Teilprozesse heruntergebrochen, Verantwortliche benannt und nach BPMN 2.0 modelliert – mit einem Link im Fliesstext.

body · Grundschrift 400 · 1.0625rem/1.6

Dachzeile (nur Unterseiten)

.t-dachzeile · Schild-Schrift 600

Knöpfe

Ohne Kontur. Verhalten nach diffrent.digital (Allgemeines › Motion auf diffrent.digital): Beim Überfahren füllt eine solide Blase den Knopf ab dem Eintrittspunkt (600 ms, ease-out) und zieht sich beim Verlassen zur nächsten Kante zurück; der Knopf federt auf 1.04 (Knopf-Feder 548 ms), der Pfeil holt 4 px aus. Beim Klick 0.95 in 120 ms, der Pfeil fliegt hinaus. Dunkler Knopf füllt Mint-Tief, grauer Knopf Tinte.

auf Weiss
Erstgespräch vereinbaren
.knopf.knopf-tinte (= .knopf-primaer)
So arbeiten wir
.knopf.knopf-kontur
Leistung
.knopf.knopf-hell
Alle Referenzen
.knopf.knopf-text
Gross
.knopf-gross
+41 79 603 08 70
.knopf mit Icon vorne
.knopf-rund
.knopf-rund:disabled
.auto (aus / an)
auf Mint-Hell
Erstgespräch vereinbaren
.knopf.knopf-tinte (= .knopf-primaer)
So arbeiten wir
.knopf.knopf-kontur
Leistung
.knopf.knopf-hell
Alle Referenzen
.knopf.knopf-text
Gross
.knopf-gross
+41 79 603 08 70
.knopf mit Icon vorne
.knopf-rund
.knopf-rund:disabled
.auto (aus / an)

Staustelle

.stau .ventil (Stau / gelöst)

Links und Navigation

Zur Referenz
.text-link

Kanton Schaffhausen

.stau-beleg a
.pfad
Referenzen
.nav-link
.fuss-kontakt a

Schilder und Chips

auf Weiss
55 Pain Points · 54 Empfehlungen
.schild
~530 Mitarbeitende
.schild.schild-hell
Energie & VersorgungZielsetzung
.chip / .chip-mint
auf Mint-Hell
55 Pain Points · 54 Empfehlungen
.schild
~530 Mitarbeitende
.schild.schild-hell
Energie & VersorgungZielsetzung
.chip / .chip-mint

Icons: MINT

Einheitliche Linienstärke über ICON_LINIE / ICON_ZIEL in entwurf.py; Stationen als farbige Kreise ohne Kontur.

strategie
dokumentation
analyse-optimierung
implementierung
monitoring
projektleitung
requirements-engineering
tim

Icons: Bedienung (Lucide, Strich 1.6)

pfeil
links
rechts
runter
haken
alarm
mail
telefon
ort
linkedin
plus
zu

Leitung und Stationen

.lz.lz-nav – Schritt-Leiste als Navigation (aktiv: Phase 3)
.lz-beg-reihe – begleitende Leistungen
.knoten (offen / erreicht)

Karten

Formular

Bitte eine E-Mail-Adresse wie name@firma.ch eingeben.
Ein, zwei Sätze genügen.

Bewegung (Federn)

Klicken spielt die Feder ab. Werte in FEDERN (entwurf.py) als CSS linear().

Tobias BrudererKontakt aufnehmen