Introduction

This site documents azucar's design system. The foundations pages give the rules behind it. The components pages give the parts that pages are built from. Most parts live in packages/azucar/src/ui/. A few sit next to it as app components that carry their own data. Only Inacio designs components. Everyone else, human or agent, uses them to build pages. This site shows what exists, what each part is for, and when to use it.

Every component page shows the canonical usage as code. Live examples are editable in place. What you copy from a page is what you paste into a route.

Add a page

1. Add an .mdx file to apps/azucar-docs/content/design/ with title frontmatter.
2. Add its file name to the pages array of the nearest meta.json.
3. The sidebar follows the folder structure. There is no route wiring.

Pages are plain Markdown plus a small set of mapped elements: headings, paragraphs, lists, links, inline code, block quotes, and fenced code blocks. Component pages can also use LiveDemo for editable examples. Elements outside this set are not styled. If a page needs a new element, that is a docs component change, not a content change.

Rules for every page

• Raw <button>, <input>, <p>, and <span> are not allowed outside packages/azucar/src/ui/. Pages compose components. They do not restyle primitives.
• Only the colors defined in azucar.css exist. There is no other palette.
• All spacing sits on the 4px grid. Off-grid values fail the build. See spacing.
• Only humans add or edit packages/azucar/src/ui/ and azucar.css, with explicit review.