Brand
One mark, on every ground the instrument shows up on.
This page is the specification. It is also the specimen: every
lockup below is drawn by the .lk rule in this file's own stylesheet,
so the spec cannot quietly stop matching what ships.
The vocabulary is the instrument's: the rack at #0c0d10, two
phosphors where green is sound and amber is the model's
mind, and AURACLE set in Jost 500. What follows is how they go together.
The files live in www/brand/ and are copied into every
consumer at build time by make site-brand. Nothing else in the
repo may hold a mark — one source, or the copies drift apart.
The mark
Three rings and a core. An aura outward, a posterior inward.
Deep green outside, bright green inside, amber at the centre. Read outward it radiates; read inward it is a distribution contracting onto one taste, which is the same picture the instrument draws of itself. Two phosphors and no third.
The tile is part of the mark. It stays dark on every ground, including paper — the phosphor colours have no light-mode equivalent, and inventing one would be a second brand to keep in sync.
96
64
32
24
16
The 16 in that row is not the same file.
At sixteen device pixels the outer ring is about half a pixel of deep green, and it
antialiases into a smudge that fills the gaps and turns three rings into one blob.
mark-16.svg is the same mark with that ring taken off and every edge
landing on a whole pixel. Use it wherever the output really is 16 square pixels, such
as an inline tab icon; use mark.svg everywhere else.
On paperthe tile does not invert
The logotype
Jost 500 caps, and exactly one lamp in the lockup.
AURACLE is Jost 500, all caps, on a tracking ramp. Jost is a geometric sans built for signage, which is what an instrument panel is — and it is the face the instrument itself is set in.
The mark is a lamp. The wordmark's final E must not be a second one. In the app that E is instrumentation — it lights while the model is fitting, and is a live reading of something true. Set anywhere it cannot light, it is a light that is always on, and a light that pulses without meaning is worse than no light.
AURACLE
Two lamps · neither one live
the green pulls right, off the mark
AURACLE
One lamp · the mark holds it
colour lands in exactly one place
The mark carries the lamp; the logotype is silk. The lit E belongs to the app alone, which keeps it special rather than ambient.
The lockups · four, no more
One primary, one stacked, and the two halves alone.
A logo system fails by having too many members. These four cover every surface Auracle has.
AURACLE
Primary · horizontalREADME, site bar, docs header, slides
AURACLE
A synthesizer that searches for your sound
Stacked · with descriptorsocial card, boot screen, splash, print
Mark alonefavicon, avatar, app icon
AURACLE
Logotype alone · lamp livethe app only, where the E means something
Construction
Clear space is one mark-height. Everything else scales from the cap.
AURACLE
Amber · the lockup's own bounding box
Dashed · the minimum clear space, one mark-height on all four sides —
nothing crosses it, including page gutters and card edges
| Quantity | Value | Why |
|---|---|---|
| Mark height | 1.28 × cap | A tile has to exceed the cap or it reads as sunk below the line |
| Gap, mark to word | 0.62 em | Wide enough to be a lockup, tight enough not to be two objects |
| Optical lift | −0.035 em | Caps sit high in the line box; without it the tile sags |
| Tracking, under 24px | 0.145 em | Small type needs air between letters to stay countable |
| Tracking, 24–48px | 0.115 em | The ramp — tracking comes off as size goes on |
| Tracking, over 48px | 0.095 em | Past this the word disintegrates into seven letters |
| Clear space | 1 × mark height | A rule that scales, rather than a pixel value that does not |
| Minimum, horizontal | 96 px wide | Below this the tracking closes up and the mark muddies |
| Minimum, mark alone | 16 px | And at exactly 16, use mark-16.svg |
The icon set
Five shapes, for five things the product already names.
The set is five: play, evolve,
taste, teach, active. They are
a different kind of object from the mark:
single colour, currentColor, no tile, 24px grid, 2px stroke. A UI icon
has to take the colour of the control it sits in, and the two-phosphor split belongs
to the brand mark alone — an icon that insists on its own colours is a sticker, not
an icon.
play
Two jacks and a cable. PLAY, the patch, wiring, the rack.
evolve
A peak at the mode. EVOLVE, the duels, a proposal.
taste
A posterior over the ground. TASTE, the model's mind.
teach
A meter. Teaching it, and what it learns from.
active
The mark's own ring, sweeping. The model is fitting.
The first four are the guide's own chapters
— views/play.md, views/evolve.md, views/taste.md,
teaching.md. That is the test of whether an icon set is real: it names
things the product already names, rather than inventing categories to fill a grid.
An icon with no chapter behind it does not belong in the set.
Every one of them is a shape, never a letterform. A letter cannot carry a
meaning in a toolbar — teach is a meter for that reason, not a stylised
E.
Taking the colour of the control, which is the whole point:
Resting
Where you are
The one action
Fitting
active is the only icon in the
set allowed to move, and only while a fit is actually running. It also honours
prefers-reduced-motion, as everything here does.
Wrong
Four ways to break it.
AURACLE
Do not re-tint the mark. Two phosphors, no third.
AURACLE
Do not squash or stretch. Set the tracking instead.
AURACLE
Do not reset the logotype. It is Jost 500, always.
AURACLE
Do not crowd the mark. One mark-height, minimum.
Where it all lives
One source, copied at build time.
| File | Goes to | By |
|---|---|---|
| mark.svg | site favicon, docs + reference favicons, this page | make site-brand |
| mark-16.svg | the app's inline tab icon, as base64 | by hand, documented |
| mark-active.svg | beside a running fit | — |
| favicon.png | the PNG fallback slot | make site-landing |
| apple-touch-icon.png | site root | make site-landing |
| og.png | site/assets/og.png | make site-landing |
| lockup.png | the README, which has no fonts | committed |
| icon-set/*.svg | site/brand/icon-set/, and this page | make site-extras |
Rasters are committed rather than built, so
that neither CI nor a contributor needs a renderer installed to build the site. After
changing mark.svg, run make brand-rasters — and see
www/brand/README.md for the two that a renderer cannot make, because they
set the logotype and need real Jost outlines.