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.
Know one mark and you know them all — in greyscale, on a printout or as a tiny symbol in a browser tab. 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.
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 stay legible as text, not only as a filled shape — usable for buttons, links and emphasis 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: 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 — sharp 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.
The fourth state is progress: where a duration is known, the outer ring becomes the scale.
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.
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.