Canvas
--canvasoklch(0.968 0.012 75)FOUNDATIONS / THE VISUAL GRAMMAR
Warmth with
working rules.
A complete semantic foundation for color, typography, shape, spacing, elevation, and motion—designed to stay expressive under real product pressure.
01
Color
Warm neutrals carry the product. Terracotta marks intent; secondary colors communicate state and data.
WARM LIGHTWARM DARK
Surface
--surfaceoklch(0.992 0.005 75)Ink
--inkoklch(0.235 0.016 48)Terracotta
--accentoklch(0.58 0.145 38)Moss
--successoklch(0.55 0.12 145)Focus blue
--focusoklch(0.58 0.16 245)02
Typography
Serif for editorial authority, sans for clear work, mono for system state and code.
LIVE TYPE LABFour voices, one system.
Thoughtful software has a point of view.
Content has visual authority.Interface typography should be calm under real product pressure, clear at small sizes, and companionable across long sessions.
Thoughtful software has a point of view.
Content has visual authority.Interface typography should be calm under real product pressure, clear at small sizes, and companionable across long sessions.
Thoughtful software has a point of view.
Content has visual authority.Interface typography should be calm under real product pressure, clear at small sizes, and companionable across long sessions.
Thoughtful software has a point of view.
Content has visual authority.Interface typography should be calm under real product pressure, clear at small sizes, and companionable across long sessions.
03
Shape & space
Small radii and thin borders preserve character without turning every object into a pill or card.
4
8
12
16
20
24
32
40
48
64
96
128
04
Motion
Movement explains continuity, change, and hierarchy. Hover the specimens to replay them.
1
enter-soft160ms2
reveal-line160ms3
shift-active220ms4
expand-panel220ms5
press-control140ms6
swap-content140ms--canvas · --surface · --ink · --accent · --border · --radius-md · --duration-base · --ease-enter · --measure-prose · --focus
INSTALL THE SYSTEMOwn the source.
Manner is a shadcn-compatible registry. One command installs source you can inspect, edit, and ship.
pnpm dlx shadcn@latest add @manner/manner-theme