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 LIGHT
WARM DARK

Canvas

--canvasoklch(0.968 0.012 75)

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.

DISPLAY / FRAUNCES 420

Thoughtful software
has a point of view.

72 / 66 · −4% tracking
INTERFACE / GEIST

Content has visual authority.

Typography, spacing, and hierarchy should carry the design. Decorative containers remain secondary, and controls stay quiet until they are needed.

16 / 26 · readable measure 64ch
METADATA / IBM PLEX MONOSTATUS: STABLE
BUILD: 0.1.0
CONTRAST: AA
MOTION: REDUCED
03

Shape & space

Small radii and thin borders preserve character without turning every object into a pill or card.

xs · 4
sm · 6
md · 10
lg · 14
xl · 20
48121620243240486496128
04

Motion

Movement explains continuity, change, and hierarchy. Hover the specimens to replay them.

1
enter-soft160ms
2
reveal-line160ms
3
shift-active220ms
4
expand-panel220ms
5
press-control140ms
6
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