01Why we publish it
Craft is a claim you can verify.
Synthetic research only earns trust if the work around it is exact. So we hold the interface to the same bar as the method: one token set, one type system, one icon hand — documented in public, used everywhere, with nothing improvised on the page.
The design system is the receipt. It’s the same components that render this site and the app, so what you see here is what you get inside the product.
The palette
Aa
Serif · the argument
Aa
Sans · the work
Aa
Mono · the evidence
02Foundations
What lives in the system.
Tokens, type, icons, films and the marketing blocks — each documented, versioned and shared across every product.
Tokens & color
A single token set — ink, paper, blueprint, gold, line — drives every surface, light and dark. One source, no drift between products.
Typography
A serif for the argument, a sans for the work, a mono for the evidence. The same three voices carry from a hero headline to a council transcript.
An icon language
A hand-drawn, single-weight icon library — every method, format and surface has its mark, so the product reads as one hand drew it.
Cinematic films
Product films rendered from the real UI — angled in 3D, depth-of-field, token-exact backdrops — so a page can show the engine breathing, not a flat screenshot.
Marketing blocks
The navbar, hero, footer and section grammar on this very site ship from the system — the website and the app speak the same language by construction.
Themed by default
Light and dark are not an afterthought; every token, film and component is authored as a matched pair. Switch the theme and nothing breaks.
The whole system is online.
Browse the live tokens, type scale, icon library and film gallery on design.sonaloop.com — search it, toggle the theme, read the source.