The idea
Form first, then colour.
Five marks, one circle, the same stroke. They are told apart not by colour but by where the ring opens.
That sounds like a detail and it is the whole point. Know one mark and you know them all. See them in greyscale, on a printout, as a tiny symbol in a browser tab — and you still tell them apart. Colour is the bonus. Form is the obligation.
Geöffnet — rechts
Geschöpft — unten
Gekerbt — Kern
Ausgetreten — oben rechts
Geteilt — zwei Hälften
What the opening says
Every mark states what its product does.
The axis is not decoration. It is the shortest summary of each product there is.
companion — open to the right
The open C. Ready to take something in. The umbrella never stands for a single application.
atrium — open below
Two bowls. The courtyard takes in what is brought to it — which is why the opening faces down.
fact — the core
An almost closed ring around a solid centre. The only mark without a second circle: an answer with evidence does not need one.
learn — the spark
At the upper right, one segment leaves the track. Material that gets made rather than administered.
school — two halves
Two equal arcs around a closed core: teacher and class. The calmest mark in the set.
Which means
A new product does not get a new visual language. It gets an opening that suits it — and belongs immediately.
Colour
Two tones that also hold up in the dark.
Every application has one tone for light surfaces and one for dark. Same hue, different lightness — the mark stays the mark and the contrast holds in both modes.
All ten tones are chosen so they stay legible as text, not only as a filled shape. That is the difference between a palette and a palette you can work with: they may be used for buttons, links and emphasis inside running text without anyone having to measure.
| 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.
Type
Two typefaces. That is all.
Space Grotesk for everything that gets read. IBM Plex Mono for everything that gets measured.
The names are always set in lower case. Not out of affectation — a product name in capitals shouts, and these products do not need to shout. Wordmarks are built from the mark and live text rather than shipped as an image: the name stays sharp in any language at any size, and a screen reader can read it.
Motion
Four states. And no fifth.
Only the rotation of the rings ever moves. Never the form, never the colour, never the size.
Wait and the rings run against each other. Open the application and the mark appears once. Move the pointer across it and you get a brief answer. And where a duration is known, the outer ring becomes the scale. Nothing more is needed — and anything beyond that is fidgeting.
Waiting
The rings run against each other. Only appears when it really takes a while.
Arriving
Once per session, without a bounce. An entrance, not a tic.
Answering
Fourteen degrees on contact. Enough to be noticed, too little to distract.
Anyone who has set “reduce motion” in their operating system sees none of it. That is not an exception we built in; it is the normal case we respect.
Not allowed
Five things that break it.
Where an application seems to force one of them, the application is set up wrongly — the mark is not being precious.
- Never rotate. The axis is the meaning. A rotated mark is a different product.
- Never distort, never mix stroke weights.
- No gradients, no foreign colours.
- Product colour inside only. The outer ring stays ink or paper.
- No round caps. The cuts stay blunt.