# For Devs

> Design tokens as CSS, JSON, and a Tailwind preset, plus Markdown versions of this guide for AI assistants.

*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.

- [/tokens/renovare.tokens.json](https://styleguide.renovare.org/tokens/renovare.tokens.json): Source tokens (W3C Design Tokens format) with descriptions, roles and legacy names.
- [/tokens/tokens.json](https://styleguide.renovare.org/tokens/tokens.json): Resolved token values as nested JSON.
- [/tokens/tokens.css](https://styleguide.renovare.org/tokens/tokens.css): CSS custom properties (--color-primary-500, --font-family-display, …).
- [/tokens/tailwind.preset.cjs](https://styleguide.renovare.org/tokens/tailwind.preset.cjs): Tailwind 3 preset with brand colors, fonts, shadows, radius and easing.
- [/llms.txt](https://styleguide.renovare.org/llms.txt): Index for AI agents.
- [/design-system.md](https://styleguide.renovare.org/design-system.md): The whole design system as one Markdown file.

**For AI assistants.** Every page of this guide is also available as Markdown — add `.md` to the page address (for example, [/color.md](https://styleguide.renovare.org/color.md)). Start with [/llms.txt](https://styleguide.renovare.org/llms.txt), or read the whole system at once in [/design-system.md](https://styleguide.renovare.org/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.