Wir wollten eine Identität, die ein kleines Studio auch pflegen kann: niemand fürs Illustrieren auf Abruf, keine Asset-Pipeline, kein Ordner voller PNGs, die von der Marke wegdriften. Also haben wir die Randbedingungen so eng gesetzt, dass sich das System den grössten Teil selbst zeichnet.
Ein Raster#
Jede farbige Marke auf dieser Website ist eine Zeichenkarte von 20×20. Zwanzig ist klein genug, dass eine Form entschieden statt beschrieben werden muss, und gross genug für ein Randlicht und ein Detail als Akzent. Die Karten liegen als .pxl-Textdateien, und damit prüft sich ein Icon wie Code. Ein Redesign hat ein Diff.
Der Build-Schritt fasst benachbarte Zellen gleicher Farbe zu Läufen zusammen, aus einer Karte von zwanzig mal zwanzig werden also vielleicht dreissig Rechtecke statt vierhundert. Das macht es billig genug, das ganze Icon ins HTML zu legen und die Anfrage komplett zu sparen.
Ein Licht#
Das Licht fällt von oben links, immer. Das klingt banal und ist die eine Regel, die fünfzehn Icons aus verschiedenen Monaten wie ein Set aussehen lässt: Glanzlicht auf den oberen und linken Flächen, der Farbton selbst in der Mitte, die abgedunkelte Stufe unten und rechts.
- Stufe 1: die Aufhellung. Randlicht und die Oberseite von allem Isometrischen.
- Stufe 3: der Farbton. Der Körper des Objekts, und der grösste Teil seiner Fläche.
- Stufe 5: die abgedunkelte Stufe. Rechte Flächen, Unterseiten und die ein Feld breite Kontur.
- Nie Stufe 2 und 4 nebeneinander: benachbarte Stufen fallen in Icon-Grösse zu einem Ton zusammen, und das Objekt liest sich nicht mehr als Objekt.
Eine Rampe, zehn Paletten#
Die Farben der Website sind Plätze, keine Werte. Komponenten malen in var(--c1) bis var(--c6); eine Palettendefinition füllt diese sechs Plätze, und ein Theme entscheidet, wie hell jeder davon sein muss, um seinen Untergrund zu überleben. Keine Komponente nennt je einen Hex-Wert.
[data-palette="arcade"]{
--c1:#2E5BFF; --c2:#16C2C2; --c3:#FFC53D;
--c4:#FF4D6D; --c5:#8A6BFF; --c6:#1B2340;
}
/* Dunkel braucht mehr Licht in den Mitteltönen, sonst verschwindet c6 */
:root[data-theme="dark"][data-palette="arcade"]{
--c1:#5E82FF; --c2:#33E0E0; --c3:#FFD35E;
--c4:#FF6E88; --c5:#A88BFF; --c6:#8E98C0;
}Der Schalter selbst ist eine eigene Geschichte. Der interessante Fall sind die monochromen Paletten: Sie füllen alle sechs Plätze mit Tönen eines einzigen Akzents. Was richtig auf der Rampe gebaut ist, wird dort tonal statt kaputt, und das ist ein nützlicher Test. Sieht eine Komponente in Monochrom falsch aus, hat sie sich auf einen Farbton verlassen, um etwas zu tragen, das der Helligkeitswert hätte tragen sollen.
Wo es aufhört#
Zwei Dinge ignorieren die Palette mit Absicht: die Pixel-Icons und das Wappen im Footer. Sie sind Marken mit fester Farbe, so wie eine Flagge, und sie müssen auf beiden Themes unverändert bestehen. Alles, was Chrome ist, folgt der Palette; alles, was Identität ist, nicht.