For Developers & AI

One source, many outputs.

Every color, font, size, shadow, and easing curve in this guide is defined once in a design tokens file. The CSS, JSON, and Tailwind files below are generated from it, so they always agree with each other and with these pages.

For AI assistants. Every page of this guide is also available as Markdown — add .md to the page address (for example, /color.md). Start with /llms.txt, or read the whole system at once in /design-system.md.

CSS variable names follow the token path: --color-primary-500, --color-neutral-200, --color-accent-ochre, --font-family-display, --radius-default, --shadow-3xl. Semantic aliases such as --color-text-body and --color-surface-dark point at the base colors.

Sizes are in rem at renovare.org’s 18px root (1rem = 18px); each token’s description lists the pixel value.