Farbe
Cremepapier, warmes Tinte und ein lebhaftes Orange. Feitio verwendet wenig Farbe absichtlich: Raffinement liegt darin, wie viele Farben draußen bleiben.
Auf dieser Seite
Die Rollen
Kein Komponente kennt eine Farbe; es kennt eine Rolle: Oberfläche, Text, Akzent. Jedes Thema füllt dieselben Rollen aus, weshalb das Umschalten von Themen oder Tag auf Nacht nichts bricht.
Auch: on-accent (Text auf dem Orange), line (Haarlinien), shadow (der Papier-Schatten) und eine Oberfläche für jeden Status (ok-surface, warn-surface, error-surface).
Regeln
Eins Orange pro Bildschirm
Der Akzent geht auf die Hauptaktion und nichts anderes. Links und Notizen verwenden das starke Orange, dunkler, was als Text gelesen wird.
Do
Eins Orange auf die Aktion; der Link im starken Orange, der nicht konkurriert.
Don’t
Title und Button in Orange: das Auge weiß nicht, wohin es gehen soll.
Farbe spricht nie allein
Ein Status kommt immer mit einem Icon und einem Wort für Menschen, die Farben nicht unterscheiden können, und für Schwarz-Weiß-Drucke.
Do
Icon, Wort und Farbe zusammen.
Don’t
Zwei Punkte: Für Menschen, die Farben nicht unterscheiden können, sind sie gleich.
Fehler ist Wein, nie Orange
Der Wein wurde vom Orange entfernt, damit ein Fehler nie wie die Hauptaktion aussieht.
Keine Farbe von Hand geschrieben
Immer die Rolle, var(--feitio-color-…). Eine von Hand geschriebene Farbe ändert sich nicht nachts oder in einer Fassade.
Tag und Nacht
Nacht ist nicht der umgekehrte Tag. Jede Rolle hat ihren eigenen Wert im Dunkeln: das Papier wird zu warmem Kohlegrau, das Creme wird zum Tinte und das Orange der Links leuchtet auf, um lesbar zu bleiben. Das Orange der Hauptaktion ist in beiden Modi gleich, tief mit cremefarbenem Text. Ohne Wahl von der Seite folgt Feitio dem Systemmodus.
Creme, fast-schwarze Tinte, Orange.
surface: oklch(96% 0.018 80)
Warmes Kohlegrau, Creme als Tinte, dasselbe Orange.
surface: oklch(22% 0.016 55)
Fassaden
- Außenbereich (eine Shop-Seite) bekommt eine Fassade: ein Theme, das nur die Farben ändert und dieselben Rollen füllt.
- Schriftart, Form, Raum und Bewegung bleiben Feitio vorbehalten.
- Eine Fassade wird tagseitig geboren und erhält eine Nachtversion, wenn die Arbeit dies erfordert.
- Der Kontrasttest gilt ebenfalls: Eine Fassade, die scheitert, darf nicht eindringen.
Kontrast
Jedes Paar mit Text oder Bedeutung erfüllt WCAG 2.2 AA, tagsüber und nachts: 4,5 für Text, 3 für Formen. Feitios Test prüft jedes Paar und versagt den Build, wenn eines fällt.
| Paar | Nutzung | Tag | Nacht | Minimum |
|---|---|---|---|---|
text / surface | Haupttext | 13,9 | 14,1 | 4,5 |
text-soft / surface | unterstützender Text | 6,4 | 8,1 | 4,5 |
accent-strong / surface | Links und Notizen | 5,8 | 8,0 | 4,5 |
on-accent / accent | Hauptbutton-Text | 5,0 | 5,0 | 4,5 |
accent / surface | main button, focus | 4,8 | 3,2 | 3 |
warn / warn-surface | attention notice | 4,8 | 7,5 | 4,5 |
WCAG 2 überschätzt dunklen Text auf gesättigten Mitteltonfarben: das alte Orange mit dunklem Text wurde mit 5,2 bestanden und ermüdet weiterhin die Augen. Deshalb ist das Orange tief und der Text darauf Creme; die Wahrnehmungsmaßnahme (APCA) stimmt überein, mit Lc 79 gegenüber 40 zuvor.