Alles, woraus diese Seite gebaut ist: Farben, Schrift, Formen, Bausteine und Bewegung. Die Muster verwenden die echten Klassen und Variablen aus stil.css – sie zeigen immer den aktuellen Stand, auch im dunklen Modus.
Grundtöne als CSS-Variablen. Die Muster links folgen dem aktuellen Modus, rechts stehen die Werte für Hell und Dunkel. Vorbild ist design.google: cremiges Papier, warmes Schwarz.
--papier#fdfdf5#12110c--flaeche#f1f0e6#1d1c16--flaeche-tief#e3dccb#32302a--linie#dddbcf#32302a--linie-stark#b9b6a9#4a473f--tinte#10120e#fdfdf5--tinte-weich#5f6368#b3b0a5--tinte-zart#8f918a#7d7a70--akzent#ff9a4d#ffae6b--akzent-hell#ffe0c4#4a2b12--signal#b3261e#ffb4ab--warn#7a5900#f2c94cSechs Pastelltöne mit je einem tiefen Partnerton für Akzentlinien. Jeder Eintrag bekommt fest eine davon, aus seinem Slug berechnet – auf der Übersicht, in der Navigation und in den Vorschaukarten dieselbe.
#9fd8ff#0b57d0#a6e8b8#146c2e#ffd766#7a5900#ffb3a8#b3261e#d4c2ff#6750a4#ffc38f#9a4a00Jede Kategorie trägt ihre Farbe als Pille – in den Titeln der Übersicht und in den Chips der Navigation.
#9fd8ffInteraktion & Motion #ffb3a8Typografie & Layout #ffd766Farbe & Wahrnehmung #d4c2ffTempo & Formulare #a6e8b8Barrierefreiheit & Web-Technik #ffc38fMaterial & Visuals #9ee3dcVorlagen #e3dccbOffizielle Markenzeichen aus Simple Icons (CC0), einheitlich als Badge. After Effects in Adobes Hausfarben, weil Simple Icons Adobe gestrichen hat.
Keine Webfonts – die Systemschrift wird breit und extra fett gesetzt (font-stretch: 120%, Gewicht 800). Auf dem Mac ist das SF Pro, das diese Breite kann; anderswo fällt es auf die normale Breite zurück.
--font: "Roboto Flex", "Google Sans Text", -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif
--font-mono: "Roboto Mono", "SF Mono", ui-monospace, Menlo, monospace
Radien in wenigen Stufen, Konturen nur wo nötig – Flächen tragen die Gliederung, nicht Rahmen. Abgerundete Rechtecke haben leichte Squircle-Ecken (corner-shape: superellipse(1.5), Chromium); Pillen und Kreise bleiben echte Kapseln (.ecke-rund, gesetzt von thema.js). Andere Browser zeigen normale runde Ecken.
Die wiederkehrenden Elemente der Detailseiten, mit ihren echten Klassen.
Drei nebeneinander fassen ein Prinzip in Schritten.
Oben eine feine Linie, keine Box.
Auf dem Handy untereinander.
Merksatz · .merk: Fläche in der Kachelfarbe des Eintrags, ohne Streifen und ohne Kontur.
Demo-Box · .demo – darin flache Felder:
Feld · .feld
flach, ohne Kontur
Zweites Feld
Radius 20px
Öffnet weich, wo der Browser es kann. Der Chevron dreht beim Öffnen.
Wenige Kurven, überall gleich. Antippen spielt sie ab. Bei «Bewegung reduzieren» wird ersetzt statt entfernt – etwa Blende statt Fahrt.
cubic-bezier(.2,.9,.3,1)700–900mscubic-bezier(.3,1.6,.5,1)280mscubic-bezier(.4,0,.2,1)500msFeder k = 520ζ = 0,85