Design-System

Werkzeugseite · nicht indexiert · gehört nicht zum veröffentlichten Blog

Farben und Kontrast

Die Werte sind gerechnet, nicht geschätzt. Die Richtlinie verlangt 4.5:1 für normalen Text und 3:1 für Bedienelemente.

Rolle	hell	Wert	Urteil	dunkel	Wert	Urteil
Text auf Papier	`#1C1B18 / #F4F0E6`	15.13	AAA	`#EDE7D8 / #0D1F16`	13.90	AAA
Text leise auf Papier	`#5A564C / #F4F0E6`	6.43	AA	`#B3AC9C / #0D1F16`	7.59	AAA
Racing Green auf Papier	`#004225 / #F4F0E6`	10.22	AAA	`#4E9B6F / #0D1F16`	5.10	AA
Link auf Karte	`#004225 / #EAE4D6`	9.17	AAA	`#7FC79B / #123527`	6.74	AA
Camel als Text	`#6E5230 / #F4F0E6`	6.34	AA	`#D2AC7C / #0D1F16`	8.11	AAA
Camel als Rahmen	`#C19A6B / #F4F0E6`	2.28	⚠️ nur dekorativ	`#D2AC7C / #0D1F16`	8.11	AAA
Terminal-Grün auf Block	`#7FC79B / #0D1F16`	8.61	AAA	`#7FC79B / #183C2D`	6.12	AA

Überschriften

Eine Überschrift dritter Ordnung

Fliesstext in der Grundschrift, mit einem inline-code und einem Link. Die Zeilenlänge ist auf rund 68 Zeichen begrenzt, weil längere Zeilen beim Zurückspringen Fehler produzieren.

Die Bauteile

Kurz gesagt

Die Kurzfassung steht am Artikelanfang und ist der Block, den KI-Antwortmaschinen als Erstes herausziehen. Zwei bis drei Sätze, keine Überschrift in Prosa.

$ für deine KI kopieren

Erklär mir in einfachen Worten, warum ein Design-System die Farben in Variablen hält, statt sie an jeder Stelle einzeln hinzuschreiben — und was genau schiefgeht, wenn eine einzelne Stelle die Variable nicht benutzt.

$ mit dem Hinweis, der bei Finanzthemen Pflicht ist

Erklär mir, welche Fristen im Schweizer Krankenversicherungssystem an ein Kalenderjahr gebunden sind und worauf man dabei achtet.

Lade keine Dokumente hoch — dieser Prompt braucht sie nicht.

Terminal und Tabellen

$ npm run build
 building client (vite)
 ✓ built in 1.2s

Ein grüner Status ist kein Nachweis. Was behauptet wird, wird gezählt oder gemessen — sonst wird es als ungeprüft benannt.

Die drei Schalter

Sie stehen oben rechts im Kopf — eine Monospace-Zeile, kein Steuerpult. Zum Prüfen: Erklärungen ausschalten und beobachten, ob die Prompt-Boxen stehen bleiben. Sie müssen es, das ist ihr einziger Zweck.

Voreinstellungen: Farbschema folgt dem System · Erklärungen ein · Sprache de