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 center. Read outward it radiates; read inward it is a distribution settling 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 colors have no light-mode equivalent, and inventing one would be a second brand to keep in sync.

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.

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 must not carry a second one. In the app the round lamp after the word is instrumentation: it lights while the model works (a generation, a refit), and is a live reading of something true. Set anywhere it cannot light, a lamp is a light that is always on, and a light that pulses without meaning is worse than no light. An amber E is that second lamp, below.

The mark carries the lamp; the logotype is silk. The lit lamp 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. Where a lockup carries words, they are the line: the tagline under the wordmark, and on the social card, the descriptor under the tagline.

Construction

Clear space is one mark-height. Everything else scales from the cap.

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

The icon set

Five shapes, for five things the product already names.

The set is five: play, evolve, taste, teach, and active. They are a different kind of object from the mark: single color, currentColor, no tile, 24px grid, 2px stroke. A UI icon has to take the color of the control it sits in, and the two-phosphor split belongs to the brand mark alone: an icon that insists on its own colors is a sticker, not an icon.

The first four are the guide's own chapters: views/play.md (PATCH), views/evolve.md, views/taste.md, and 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 stylized E.

Taking the color of the control, which is the whole point:

active is the only icon in the set allowed to move, and only while a fit is actually running. It also honors prefers-reduced-motion, as everything here does.

Type, space, and motion

One ratio, seven steps, three speeds.

The instrument is set on one scale. Its type runs up from the size of a value by a single ratio, 1.2: 12 × 1.2ⁿ, rounded, is 12, 14, 17, and 21, and 52 at the eighth step. Labels sit just under the scale at 11 px, the floor for text in a page. The rack, drawn to its zoom, keeps sizes of its own, and a lone glyph is sized to its button. Text a canvas draws is never under 12 px. Every specimen here is set with the token it names, from tokens.json, so the page cannot stop matching what ships.

The voice size is the model's alone, in Newsreader italic, as the family is. A title is a sound's name or a card's heading; the display is one per level.

Space is a 4 px grid up to 16, then wider. Under the first step, 1 to 3 px is an optical nudge rather than a space, and is written as it is.

Motion has three durations: a press (90 ms), a state changing (180 ms), and something moving (320 ms), arriving on the settle curve. Point at the lanes, or tab to them. Under prefers-reduced-motion every duration is 0 ms and the dots jump; a loop's period is none of these.

Wrong

Four ways to break it.

Where it all lives

One source, copied at build time.

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.