Designsprache

Zeichenfläche, Ebenen, Konturen, Farbe, Zeichen und Bewegung, die alle Icons gemeinsam haben. Maße sind in Einheiten der Zeichenfläche angegeben.

Zeichenfläche

Icons werden auf einer Zeichenfläche von 31×29 Einheiten gezeichnet, mit dem Motiv zentriert auf (15,5, 12,5). Vier Keylines, also Hilfsformen, die Icons optisch gleich groß halten, legen die äußeren Grenzen fest: ein Kreis mit 23 Einheiten Durchmesser, ein Quadrat von 20,6 Einheiten, ein Querformat-Rechteck von 23×18,4 und ein Hochformat-Rechteck von 18,4×23. Icons sind zentriert, nicht unten ausgerichtet.

Ebenen

Ein Icon hat ein mitteltoniges hinteres Teil mit Schlagschatten und meist ein helleres vorderes Teil mit einem weichen Glanzlicht entlang der Oberkante. Weißer Inhalt wie ein Symbol oder Linien kann zwischen beiden liegen. Bei einem Icon ohne vorderes Teil ist der weiße Inhalt groß genug, um eine zweite Ebene zu bilden. Die oberen Ecken des vorderen Teils sind einzeln abgerundet, sodass an den Ecken das hintere Teil sichtbar wird.

Konturen und Ecken

Konturen sind 1 Einheit breit und liegen außerhalb der Füllung. Der Eckenradius beträgt 2,2 für den Körper eines Icons (3,2 mit Kontur) und 1,2 für Inhalte. Ein farbiges Band innerhalb einer Kontur ist mindestens 2 Einheiten breit oder entfällt.

Farbe

Jeder Ton wird anhand eines Referenzblaus entworfen und dann auf die Akzentfarbe verschoben, wobei seine Helligkeit relativ zu diesem Akzent erhalten bleibt. Zeichen sind auf mitteltonigen Teilen weiß und auf hellen Teilen dunkel.

Zeichen

Zeichen sind die Linien und Symbole, die auf ein Icon gezeichnet werden. Inhaltslinien haben eine Strichstärke von 1,6, Richtungszeichen wie Pfeile 2,2 und Konturen 1. Zeigerartige Teile sind eine Ausnahme und verwenden 2,6 oder 2,0. Das kleinste Element misst 2,4 Einheiten. Pfeilspitzen sind ausgefüllte Dreiecke.

Bewegung

Eine Bewegung hat zwei Keyframes, die Ruhepose und die Hover-Pose, und dauert 460 ms. Ein Icon spielt nur ab, was das reale Objekt tut: Ein Ordner öffnet sich, ein Umschlag wird entsiegelt, ein Kalender blättert eine Seite um. Bewegung steht nicht stellvertretend für eine abstrakte Idee.

Die vollständigen Regeln stehen in PROMPT.md, die auf Vereinfachtem Chinesisch verfasst ist.

Kubai Icons ist kostenlos nutzbar. Das Projekt unterstützen