/design
Komponenten
Jeder Baustein in jedem Zustand, hell und dunkel. Diese Seite ist die Art, wie die Gestaltung geprüft wird, ohne die halbe App zu öffnen — und sie ist der Grund, warum der nächste Baustein zum Rest passt.
Farben
Die einzige Quelle ist design/tokens.css. Hier wird keine Farbe erfunden.
Marke: Navy und Türkis
- 18,22:1
--bp-navy-900#021530 - 16,31:1
--bp-navy-800#07203f - 13,87:1
--bp-navy-700#0d2d52 - 11,02:1
--bp-navy-600#163d69 - 14,32:1
--bp-navy-100#dbe5f2 - 16,34:1
--bp-navy-50#eef3fa - 4,65:1
--bp-teal-600#0e8f91 - 7,62:1
--bp-teal-500#13babc - 9,69:1
--bp-teal-400#3fd0d2 - 16,88:1
--bp-teal-50#e7fafa
Neutrale
- 18,22:1
--bp-n-0#ffffff - 17,15:1
--bp-n-50#f7f8fa - 15,97:1
--bp-n-100#eef0f4 - 14,15:1
--bp-n-200#dfe3ea - 11,16:1
--bp-n-300#c4cbd6 - 5,71:1
--bp-n-500#5d6778 - 9,84:1
--bp-n-700#3a4454 - 17,09:1
--bp-n-900#151c28
Funktionale
Reserviert: als gestohlen gemeldet, Kette verändert. Sonst nirgends.
- 5,41:1
--bp-green-600#0e7a43 - 16,29:1
--bp-green-50#e6f6ed - 7,41:1
--bp-amber-700#7a4b00 - 8,75:1
--bp-amber-500#f0a500 - 16,93:1
--bp-amber-50#fff6e0 - 8,82:1
--bp-stop-700#8f1d2creserviert - 6,93:1
--bp-stop-600#a8283areserviert - 15,91:1
--bp-stop-50#fbeceereserviert
Kontrast, gerechnet
Die Werte kommen aus contrastRatio() — derselben Funktion, die npm test über jede Zeile laufen lässt. Keine Zahl auf dieser Seite ist abgeschrieben.
Hell
| Paar | Aa | Verhältnis | Anforderung |
|---|---|---|---|
--bp-text / --bp-bg | Aa | 16,08:1 | Text (AA, 4,5:1) erfüllt |
--bp-text / --bp-surface | Aa | 17,09:1 | Text (AA, 4,5:1) erfüllt |
--bp-text-muted / --bp-surface | Aa | 5,71:1 | Text (AA, 4,5:1) erfüllt |
--bp-text-muted / --bp-surface-sunk | Aa | 5,01:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-text / --bp-primary | Aa | 7,62:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-text / --bp-primary-hover | Aa | 4,65:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-edge / --bp-bg | Aa | 3,69:1 | Bedienelement (3:1) erfüllt |
--bp-link / --bp-surface | Aa | 13,87:1 | Text (AA, 4,5:1) erfüllt |
--bp-focus / --bp-bg | Aa | 17,15:1 | Bedienelement (3:1) erfüllt |
--bp-border-strong / --bp-surface | Aa | 4,35:1 | Bedienelement (3:1) erfüllt |
--bp-border-strong / --bp-surface-sunk | Aa | 3,81:1 | Bedienelement (3:1) erfüllt |
--bp-ok-text / --bp-ok-bg | Aa | 4,83:1 | Text (AA, 4,5:1) erfüllt |
--bp-warn-text / --bp-warn-bg | Aa | 6,88:1 | Text (AA, 4,5:1) erfüllt |
--bp-neutral-text / --bp-neutral-bg | Aa | 10,90:1 | Text (AA, 4,5:1) erfüllt |
Dunkel
| Paar | Aa | Verhältnis | Anforderung |
|---|---|---|---|
--bp-text / --bp-bg | Aa | 15,50:1 | Text (AA, 4,5:1) erfüllt |
--bp-text / --bp-surface | Aa | 13,88:1 | Text (AA, 4,5:1) erfüllt |
--bp-text-muted / --bp-surface | Aa | 6,24:1 | Text (AA, 4,5:1) erfüllt |
--bp-text-muted / --bp-surface-sunk | Aa | 5,30:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-text / --bp-primary | Aa | 9,69:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-text / --bp-primary-hover | Aa | 4,65:1 | Text (AA, 4,5:1) erfüllt |
--bp-primary-edge / --bp-bg | Aa | 9,69:1 | Bedienelement (3:1) erfüllt |
--bp-link / --bp-surface | Aa | 8,67:1 | Text (AA, 4,5:1) erfüllt |
--bp-focus / --bp-bg | Aa | 9,69:1 | Bedienelement (3:1) erfüllt |
--bp-border-strong / --bp-surface | Aa | 4,23:1 | Bedienelement (3:1) erfüllt |
--bp-border-strong / --bp-surface-sunk | Aa | 3,60:1 | Bedienelement (3:1) erfüllt |
--bp-ok-text / --bp-ok-bg | Aa | 8,24:1 | Text (AA, 4,5:1) erfüllt |
--bp-warn-text / --bp-warn-bg | Aa | 8,61:1 | Text (AA, 4,5:1) erfüllt |
--bp-neutral-text / --bp-neutral-bg | Aa | 9,25:1 | Text (AA, 4,5:1) erfüllt |
Zwei Grenzen, absichtlich
Keine Fehler, sondern Verwendungen, die nicht gehen. Sie stehen mit ihrer Zahl hier, damit sie niemand ein zweites Mal entdeckt.
- Aa--bp-border / --bp-surface — 1,29:1
- Aa--bp-teal-600 / --bp-surface — 3,92:1
Knöpfe
Berührfläche 48 px. Kein Zustand hängt allein am Zeigergerät: auf einer Tablet gibt es kein Hover.
Hell
Primär
Sekundär
Unauffällig
Dunkel
Primär
Sekundär
Unauffällig
Eingabefelder
Das Etikett steht immer da. Ein Platzhalter als Etikett verschwindet beim Tippen.
Hell
Am Rahmen eingeschlagen, meist unter dem Tretlager.
Diese Nummer gehört zu keinem Rad in dieser Werkstatt.
Am Rahmen eingeschlagen, meist unter dem Tretlager.
Dunkel
Am Rahmen eingeschlagen, meist unter dem Tretlager.
Diese Nummer gehört zu keinem Rad in dieser Werkstatt.
Am Rahmen eingeschlagen, meist unter dem Tretlager.
Karten
Hell
Tenway CGO800s
Letzter Service
Inspektion, Bremsbeläge hinten, Kette. Eingetragen von Zweirad Huber, München.
Dunkel
Tenway CGO800s
Letzter Service
Inspektion, Bremsbeläge hinten, Kette. Eingetragen von Zweirad Huber, München.
Zustands-Plaketten
Drei, und keine rote: das Rot ist auf Diebstahl und veränderte Kette festgelegt. Farbe ist nie das einzige Signal — jede Plakette trägt ein Zeichen.
Hell
Dunkel
Listen
Jede Zeile ist 48 px hoch und ganz anklickbar, nicht nur ihr Text.
Hell
- Tenway CGO800sgeprüft
- VanMoof S3ungeprüft
- Cube Reaction Hybrid
Dunkel
- Tenway CGO800sgeprüft
- VanMoof S3ungeprüft
- Cube Reaction Hybrid
Untere Hülle
Auf einem Telefon kommt eine Frage von unten, wo der Daumen ist — nicht aus der Mitte. Escape schließt, der Fokus bleibt drin, dahinter bewegt sich nichts.
Dieselbe Hülle, offen und ohne JavaScript — damit sie hier auch geprüft werden kann.
Hell
Eintrag zurücknehmen?
Löschen geht nicht. Stattdessen kommt ein Gegen-Eintrag in den Verlauf, der sagt, dass dieser hier falsch war — sichtbar für alle, die das Rad später ansehen.
Dunkel
Eintrag zurücknehmen?
Löschen geht nicht. Stattdessen kommt ein Gegen-Eintrag in den Verlauf, der sagt, dass dieser hier falsch war — sichtbar für alle, die das Rad später ansehen.
Ladegerüst
Nur wo die Form schon bekannt ist. Bei „weniger Bewegung“ pulsiert nichts und bleibt alles sichtbar — die klassische Falle ist ein Gerüst, das in opacity: 0 hängen bleibt.
Hell
Dunkel
Leere Zustände
Der Zustand, den man am Anfang am häufigsten sieht. Er bekommt deshalb so viel Arbeit wie der volle.
Hell
Noch keine Einträge
Für dieses Rad hat noch keine Werkstatt etwas geschrieben. Der erste Eintrag ist deiner.
Dunkel
Noch keine Einträge
Für dieses Rad hat noch keine Werkstatt etwas geschrieben. Der erste Eintrag ist deiner.
Mit der Tabulatortaste durchgehen: jeder Halt muss zu sehen sein.