Der Grundgedanke
Erst Form, dann Farbe.
Fünf Zeichen, ein Kreis, dieselbe Strichstärke. Unterschieden werden sie nicht über die Farbe, sondern darüber, wo sich der Ring öffnet.
Wer eine Marke kennt, erkennt alle — auch in Graustufen, auf einem Ausdruck oder als winziges Symbol im Browserreiter. Farbe ist die Kür, die Form ist die Pflicht.
Geöffnet — rechts
Geschöpft — unten
Gekerbt — Kern
Ausgetreten — oben rechts
Geteilt — zwei Hälften
Was die Öffnung erzählt
Jedes Zeichen sagt, was sein Produkt tut.
companion — offen nach rechts
Das offene C, bereit aufzunehmen. Die Dachmarke steht nie für eine einzelne Applikation.
atrium — geöffnet nach unten
Zwei Schalen. Der Hof nimmt auf, was ihm zugeführt wird — darum liegt die Öffnung unten.
fact — der Kern
Ein fast geschlossener Ring um einen festen Mittelpunkt. Das einzige Zeichen ohne zweiten Kreis.
learn — der Funke
Oben rechts verlässt ein Segment die Bahn. Material, das entsteht, statt verwaltet zu werden.
school — zwei Hälften
Zwei gleich starke Bögen um einen geschlossenen Kern: Lehrkraft und Klasse. Das ruhigste Zeichen im Set.
Und deshalb
Ein neues Produkt bekommt keine neue Bildsprache, sondern eine Öffnung, die zu ihm passt.
Farbe
Zwei Töne, die auch im Dunkeln stimmen.
Jede Applikation hat einen Ton für helle und einen für dunkle Flächen. Gleicher Farbton, andere Helligkeit — die Marke bleibt dieselbe, der Kontrast stimmt in beiden Modi.
Alle zehn Töne bleiben auch als Text lesbar, nicht nur als Fläche — verwendbar für Schaltflächen, Links und Auszeichnungen, ohne nachzumessen.
| Produkt | Tagton | auf Papier | Nachtton | auf Tinte |
|---|---|---|---|---|
| companion | #3A5CD8 | 5,20:1 | #93AEFF | 8,27:1 |
| atrium | #6B3FD4 | 5,85:1 | #B49BFF | 7,71:1 |
| fact | #0B7A6A | 4,80:1 | #4FD8BE | 10,11:1 |
| learn | #C0341A | 5,13:1 | #FF8A6B | 7,73:1 |
| school | #3D7A2E | 4,78:1 | #8FD07A | 9,74:1 |
Alle zehn Produkttöne liegen über 4,5:1 gegenüber ihrem Untergrund und erfüllen damit WCAG 2.2 AA für Text; für grafische Elemente wären 3:1 gefordert. Sie dürfen deshalb auch für Buttons, Links und Auszeichnungen im Fließtext verwendet werden.
Schrift
Zwei Schriften, mehr nicht.
Space Grotesk für alles, was gelesen wird. IBM Plex Mono für alles, was gemessen wird.
Die Namen stehen immer klein: Ein Produktname in Versalien ruft, und diese Produkte müssen nicht rufen. Wortmarken werden aus Zeichen und echtem Text gebaut, nicht als Bilddatei — so bleibt der Name scharf und vorlesbar.
Bewegung
Vier Zustände. Und keinen fünften.
Bewegt wird ausschließlich die Drehung der Ringe. Nie die Form, nie die Farbe, nie die Größe.
Warten
Die Ringe laufen gegeneinander. Erscheint erst, wenn es wirklich dauert.
Ankommen
Einmal je Sitzung, ohne Nachfedern. Ein Auftritt, kein Tic.
Antworten
Vierzehn Grad auf Berührung. Genug, um bemerkt zu werden, zu wenig, um abzulenken.
Der vierte Zustand ist der Fortschritt: Ist eine Dauer bekannt, wird der Außenring zur Skala. Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, sieht nichts davon.
Was nicht geht
Fünf Dinge, die das Ganze zerstören.
- Nicht drehen. Die Achse ist die Bedeutung. Ein gedrehtes Zeichen ist ein anderes Produkt.
- Nicht verzerren, keine Strichstärken mischen.
- Keine Verläufe, keine fremden Farben.
- Produktfarbe nur innen. Der Außenring bleibt Tinte oder Papier.
- Keine runden Enden. Die Schnitte bleiben stumpf.
Fürs Archiv
Die Maße, falls Sie sie brauchen.
Alles sitzt auf einem Raster von hundert Einheiten. Außenring 42, Innenring 27, Strich 9, Schutzraum rundum 18. Kleiner als 16 Pixel wird das Zeichen nicht verwendet.
Weil die Unterbrechungen bei kleiner Wiedergabe zulaufen, gibt es drei fertige Fassungen statt einer skalierten: unter 48 Pixel wächst der Strich auf 10 Einheiten, unter 24 auf 12.