Brand
Brand
How Sonari is drawn, coloured, set, moved and written.
Download this document · PDF · 753 KB · 18 pages
The mark
The mark is an S that is also a sonar wave: a C whose trajectory the wavefront shares, flowing into a second bowl that curls outward. The S is the letter and the wave is the signal - two colours doing two jobs, which is the one thing to understand before using it.
The wordmark sets the name in Outfit at 600, tracked −0.03em:
Side by side:
Writing the name
- Sonari, one word, capital S and nothing else capitalised. Never SONARI, never sonari, never Sonari.pro in prose.
- The product is an application, so “Sonari” is a thing you open rather than a company you deal with.
- The site is sonari.pro. Lower case, including at the start of a sentence - rewrite the sentence rather than capitalise the domain.
- The wave in the mark is the sonar return / a soundwave. You can use both when describing it.
Logo files, in both colourways and as a zip, are on the press page. This document is how the identity works.
Construction
Two tangent circles on a horizontal axis. The stroke runs most of the way round the large one - the C, and the wavefront's trajectory - crosses the tangent point, then runs most of the way round the small one in the opposite rotational direction. Reversing the bend at the tangent is what makes it an S rather than a C with a hook.
radius + tailRadius from the first, so shrinking the tail moves it left as well as making it smaller.The mark is exact circular arcs with no optical correction - joins unteased, stroke unmodulated where the curve tightens, terminals uncut.
Clear space, size and misuse
Clear space
One stroke width on every side, measured from the mark’s outermost ink - which on the left is the sonar’s arc, not the S. The stroke is the only measurement inside the mark that a reader can see without being told where to look, so the rule can be checked by eye at any size.
Minimum size
Below this the wave stops being a wave. It is set at 0.34 opacity so that it reads as passing behind the S rather than as a bar drawn across it, and that is exactly the quality that fails first as the mark shrinks.
Misuse
Six things not to do. Each panel is the real mark with the mistake applied.
Colour
Twenty tokens in four groups. Every value is used in different ways, for different things.
Ink
The ground and the surfaces on it. Nothing here is ever text - --color-ink-700 is a divider and is the one pairing in the contrast table with no minimum.
--color-ink-950#0b0a0b--color-ink-900#121013--color-ink-800#1b181c--color-ink-700#2a262c
Text
Three levels and no more. Primary, secondary, and the muted level meta lines are set in - every one of them scored against every ground it is allowed on.
--color-white#fafafa--color-mute-200#c9c4cc--color-mute-400#8e8694
Plum
The brand ramp. The lower half is ground and fills, the upper half is interactive colour and the mark’s wave. Desaturated at constant hue so the accent reads as wine rather than as hot pink.
--color-plum-950#240017--color-plum-900#43002b--color-plum-800#61053f--color-plum-700#8d0b5e--color-plum-600#a83d80--color-plum-500#c25596--color-plum-400#d67ab2--color-plum-300#edaad0
Bloom
Colors used in the website, not part of the brand. They are painted at low opacity behind everything and are the reason each act has its own temperature. Useful if you need variety - not to be used for main elements.
--color-bloom-magenta#d6187f--color-bloom-violet#6e3bff--color-bloom-cyan#14c8c0--color-bloom-amber#ff9a3d--color-ground-mid#14000d
Usage, and what it measures
Our palette is always measured and checked for readability. Every colour needs to pass our metrics based on its use, background, etc.
| Pairing | Used for | Level | Ratio |
|---|---|---|---|
Aawhite on ink-950 | Primary text on the page ground | AA, body text | 18.94:1 |
Aawhite on ink-900 | Primary text on a raised surface | AA, body text | 18.14:1 |
Aawhite on ink-800 | Primary text on an inset surface | AA, body text | 16.85:1 |
Aawhite on plum-900 | Primary text over the brand ground | AA, body text | 15.80:1 |
Aawhite on plum-800 | Primary text over a section wash | AA, body text | 12.56:1 |
Aamute-200 on ink-950 | Secondary body text | AA, body text | 11.53:1 |
Aamute-200 on ink-900 | Secondary body text, raised | AA, body text | 11.04:1 |
Aamute-200 on plum-900 | Secondary body over brand ground | AA, body text | 9.62:1 |
Aamute-400 on ink-950 | Muted / meta text | AA, body text | 5.64:1 |
Aamute-400 on ink-900 | Muted / meta text, raised | AA, body text | 5.40:1 |
Aaplum-300 on ink-950 | Links, hover, focus ring | AA, body text | 10.60:1 |
Aaplum-300 on ink-900 | Links on a raised surface | AA, body text | 10.15:1 |
Aaplum-400 on ink-950 | Primary interactive colour, as text | AA, body text | 6.86:1 |
Aawhite on plum-700 | Button label on the primary fill | AA, body text | 8.59:1 |
Aawhite on plum-600 | Button label, primary hover | AA, body text | 5.52:1 |
plum-500 on ink-950 | Primary button border vs ground | AA, non-text | 4.74:1 |
plum-500 on plum-900 | Primary button border vs top stop | AA, non-text | 3.95:1 |
Aaplum-500 on ink-950 | Display-size accent type (>=24px) | AA, large text | 4.74:1 |
plum-400 on ink-950 | Focus indicator against the ground | AA, non-text | 6.86:1 |
ink-700 on ink-950 | Decorative divider - never text | decorative - tracked only | 1.33:1 |
Aawhite on ground-mid | Primary text, mid ground stop | AA, body text | 19.43:1 |
Aamute-200 on ground-mid | Secondary text, mid ground stop | AA, body text | 11.83:1 |
Aamute-400 on ground-mid | Muted text, mid ground stop | AA, body text | 5.78:1 |
Aamute-400 on plum-900 | Muted text, worst-case top stop | AA, body text | 4.70:1 |
Aaplum-300 on plum-900 | Links over the top stop | AA, body text | 8.84:1 |
Aaplum-400 on plum-900 | Interactive colour over the top stop | AA, body text | 5.72:1 |
One row has no minimum. --color-ink-700 on the ground is about 1.3:1. That one is a divider, and it is tracked here precisely so that nobody sets text in it (as it would render it unreadable).
Type
Satoshi sets everything, at weights 300–900. Outfit sets one word - the logotype - and is subset to its six letters, about 2 KB. It falls back to Satoshi rather than to a system font, so a failed load still degrades to something recognisably Sonari.
Never miss a release again.
The feed that stays in order
Follow an artist once
It watches every artist you care about.
A paragraph of a long document.
Copy inside a section.
9 September 2026 · 4 min read
PRESS
Display type is set at 1.05 line height, −0.03em. Reading copy is its own pair: --text-prose runs 16px to 20px and --measure-prose is derived from it, holding the line to about 80 characters at any width.
Motion
Four durations, two curves, three staggers. Nothing on this site invents a timing: a component that needs one calls a timeline factory, and the numbers live in one file.
| Name | Seconds | Used for | Hover to run |
|---|---|---|---|
micro | 0.15 | Hover, focus, a toggle flipping | |
ui | 0.3 | A control changing state | |
section | 0.6 | A section entering | |
hero | 1 | The largest move on the page |
The two curves are cubic-bezier(0.16, 1, 0.3, 1) for anything entering or settling, and cubic-bezier(0.65, 0, 0.35, 1) for something that leaves and returns. Staggers are 0.075s between characters, 0.125s between words and 0.3s between the steps of a sequence.
Scroll-linked sections use a smoothed scrub of 1 second and start at top 75%. The scrub is never raw: tying a timeline to the scroll position frame for frame exposes every dropped frame the device has.
Artwork
The artwork on this site is album covers we do not own. Album artwork and artist photography are the property of their respective rights holders.
So the direction is a treatment rather than a look. Covers appear inside the device mockups at the size and crop the app itself uses. The colour behind them is the brand plum as a radial, and the app's own artwork-driven tint stays present throughout.