Stilblatt

Logo

Das Zeichen ist die Vorlage des Riffelglases selbst: sieben stehende Zylinderlinsen, die zusammen einen Kreis ergeben. Für kleine Auftritte gibt es die Fassung mit fünf Rillen, deren Fugen auch bei 16 px nicht zulaufen.

quer · Farbe

quer · Negativ

hoch

Schutzraum · eine halbe Zeichenbreite

Kopf 34 px · Favicon · App-Icon

Farben

Zehn Farben, mehr braucht die Seite nicht: ein heller warmer Grund, drei Abstufungen Schrift, eine Linie, ein Akzent und drei Farben, die nur in den Zeichnungen vorkommen.

Grund und Flächen

Schrift und Linien

Akzent

Zeichnungen

Schrift

Zwei Schriften: Bricolage Grotesque in 800 für Titel und Knöpfe, Instrument Sans für alles Gelesene. Die Titelgrössen wachsen mit dem Fenster, deshalb steht bei jeder ein clamp().

Bewegung

Vier Kurven, eine Feder und sechs Zeiten, mehr braucht die Seite nicht. Die Werte stammen aus den Notizen: ease für jeden Farbwechsel, zwei Kurven für alles, was sich bewegt, und eine lange für Menü und Riffelglas. Dazu eine Feder: Sie schwingt gut 5 Prozent über und wippt einmal aus — daran fassen sich Knöpfe und Marke an. Ein Klick auf eine Kurve spielt sie ab.

Zeiten

Auftritt

Der Auftritt aus den Notizen: 16 px herauf, Deckkraft 0 auf 1, 650 ms auf --ease-ui-2. Daneben derselbe Auftritt mit der Feder: kürzer, dafür schwingt er über. Beide laufen nur, wenn im System nicht weniger Bewegung eingestellt ist.

Icons

Material Symbols Rounded von Google, Strichstärke 300, ungefüllt — dieselbe Linie wie die Zeichnungen. Der Name unter dem Zeichen ist der Name im Stylesheet.

Flächen

Milchiges Glas über farbigen Lichtern, dazu wenige Radien. Die Ecken sind Squircles, keine Kreisbögen — Browser ohne corner-shape zeigen weiter den runden Radius. Das Riffelglas in der Kopfleiste ist dieselbe Optik wie im Rahmen: eine Verschiebungskarte, kein Bild.