Overview
The colors, type, corners, shadows, and motion that every Gesso component is built from, and how to choose a value.
Foundations are the specimens you paint with. Each page shows one kind of value, names the utility to use for it, and says which values a look can change, so you can pick a token without reading the CSS. Theming covers the other direction, which is how a look retunes these values.
Gesso is a set of shadcn-style components with its own role names, such as bg-surface and text-fg-muted, and the shadcn names stay wired as aliases so a third-party block still themes.
Switch between Washi, ICS, Ramson, and Vistula in the sidebar while you read. Color, faces, corner radius, and stroke weight move with the look. Type sizes, shadows, and motion stay the same in every look.