Karten auf hell
Die Bildkachel traegt die Landing-Page: .dt-card--media nimmt der Karte die Polsterung, das Bild sitzt randlos an der Oberkante, .dt-card__body hält die Innenränder. .dt-card--row stellt dasselbe ins Querformat.
Eine Gestaltung für Landing-Page, Admin und jedes Projekt.
Eine Seite bindet das System mit einer Zeile ein — auf jeder Subdomain, gleiche Origin:
<link rel="stylesheet" href="/_ui/v1/byrichard.css?v=2">
Die Version steckt im Pfad. v1 bleibt eingefroren; ein Redesign wird v2,
und kein laufendes Projekt bricht dabei.
Genau ein Akzent für alles Anklickbare. Eine zweite Akzentfarbe gibt es bewusst nicht. Statusfarben sind kein Akzent — sie beschreiben Maschinenzustand und sind nie interaktiv.
SF Pro auf Apple-Geräten, sonst Inter — selbst gehostet, kein fremder CDN. Fließtext ist 17px bei Zeilenhöhe 1.47. Überschriften wiegen 600. Gewicht 300 nur für bewusst luftige, große Flächen. Gewicht 500 existiert nicht.
Hero Display · 56
Display Large · 40
Display Medium · 34
Lead · 28
Lead Airy · 24 · Gewicht 300
Tagline · 21
Body Strong · 17 · Gewicht 600
Body · 17 · der Standard für Fließtext.
Caption · 14
Fine Print · 12
Mono · für Ports, Container-IDs, Pfade, Logs
Die Bildkachel traegt die Landing-Page: .dt-card--media nimmt der Karte die Polsterung, das Bild sitzt randlos an der Oberkante, .dt-card__body hält die Innenränder. .dt-card--row stellt dasselbe ins Querformat.
Die Sektion setzt den Kontext, die Komponenten folgen. Links werden automatisch
--dt-primary-on-dark; auf heller Fläche kann das gar nicht passieren.
Zwei verschiedene Dinge: die Sektionsrolle (hell, Pergament, dunkel) gliedert die Seite — der Farbwechsel ersetzt den Trennstrich. Die Fassung gilt für die ganze Seite. Die Fassung hebt die Rollen nicht auf, sie verschiebt sie: in der dunklen Fassung wird aus der hellen Leinwand die tiefste Fläche, aus der dunklen Sektion die angehobene. Der Wechsel bleibt, er rutscht die Helligkeitsskala hinunter.
Zum Ausprobieren: der Schalter oben rechts in der Leiste.
Die Wahl liegt in einem Cookie auf .dreamteam.r-grosskopf.de und gilt
dadurch auf allen Projekten — localStorage wäre je Subdomain
getrennt und würde die Landing-Page nie verlassen.
Es gilt prefers-color-scheme des Systems.
Das Cookie gewinnt, auch gegen die Systemvorgabe — bis es zurückgeschaltet wird.
<link rel="stylesheet" href="/_ui/v1/byrichard.css?v=2"> <script src="/_ui/v1/theme.js?v=2"></script> <button class="dt-theme-toggle" data-theme-toggle></button>
Das Skript ohne defer in den <head> — sonst blitzt beim
Laden kurz die falsche Fassung auf.
Ausführlich mit Begründung: /srv/shared/ui/DESIGN.md
