01Principle
Signal over decoration.
Every visual decision earns its place.
Color direction, beyond palettes
Give a product
the right tone.
Translate intent into a coherent visual grammar: color, contrast, geometry, depth, typography and motion — then hand the result directly to code or AI.
02
See it in context
Whitespace, restrained chroma and soft edges. Designed to feel calm without becoming sterile.
sample.tone
A considered digital system
Make the interface
feel intentional.
Design direction with enough structure to stay coherent from the first screen to the hundredth.
02System
One visual grammar.
Color, shape and motion speak together.
03Note
“The quieter the system, the clearer the hierarchy.”
Studio note · 04
16.6:1Body contrast
5.1:1Accent contrast
11pxRadius system
198msBase motion
03Hand the direction
From taste to specification
Hand the direction
to anything.
Tone exports the decisions behind the look, not just six hex values. Paste the AI brief into a coding agent, or use the same tokens directly in your codebase.
Tone DNA
:root {
--tone-canvas: #f9f9f8;
--tone-surface: #fdfdfc;
--tone-surface-strong: #eeeeee;
--tone-text: #171a1d;
--tone-text-soft: #767879;
--tone-accent: #527565;
--tone-accent-soft: #dae0dd;
--tone-accent-ink: #ffffff;
--tone-border: #e4e5e4;
--tone-radius: 11px;
--tone-shadow: 0 12px 42px rgba(8, 12, 18, 0.12);
--tone-tracking: 0.012em;
--tone-motion: 198ms;
}