# Lily Design System™

> Free, open-source, headless design system: a canonical catalog of 571
> accessible components implemented across seven frameworks (HTML, Svelte,
> React, Vue, Angular, Blazor, Nunjucks), paired with fully styled example
> apps that demonstrate the same catalog end to end.

This is the public documentation site. Every link below is a page on this
site (https://lilydesignsystem.com/) unless marked otherwise; the
GitHub-marked links go to the canonical source monorepo, where the
specification, design-principle rules, and every framework implementation
actually live.

## Start here

- [Home](https://lilydesignsystem.com/): what Lily is, in brief, with
  the current component count and framework list.
- [Why Lily](https://lilydesignsystem.com/why/): the case for
  Lily — headless components you style yourself, WCAG 2.2 AAA accessibility
  built in, no hardcoded strings, seven frameworks, one catalog, free
  forever.
- [About](https://lilydesignsystem.com/about/): what Lily is, the
  principles behind it, and the design systems it draws inspiration from.
- [Help](https://lilydesignsystem.com/help/): install the headless
  package for your framework, copy a component, style it, theme it, ship
  it. Troubleshooting, FAQ, and support.

## Components and examples

- [Components](https://lilydesignsystem.com/components/): the full
  searchable catalog of all 571 components, each linking to its own
  `/components/{slug}/` detail page (description, usage, props, ARIA,
  keyboard, references).
- [Tutorials](https://lilydesignsystem.com/tutorials/): step-by-step
  guides — your first component, styling, ready-made themes, and
  preference helpers — for HTML, Svelte, React, Vue, Angular, Blazor, and
  Nunjucks, each under `/tutorials/{framework}/`.
- [Examples](https://lilydesignsystem.com/examples/): worked example
  apps showing how to style Lily components in every supported framework.
- [Comparisons](https://lilydesignsystem.com/comparisons/): how Lily
  compares with other design systems on headlessness, framework coverage,
  accessibility, and license.

## Project status and policy

- [Accessibility statement](https://lilydesignsystem.com/accessibility/):
  what targeting WCAG 2.2 AAA means here — what is verified, by what, what
  is not verified by anything, and how to report a problem.
- [News](https://lilydesignsystem.com/news/): announcements, release
  highlights, project status, and press contacts.
- [Roadmap](https://lilydesignsystem.com/roadmap/): what the project
  is working on and planning next.
- [Lily + Figma](https://lilydesignsystem.com/lily-figma/): there is
  no maintained Lily Figma library or plugin; the 45 reference themes'
  design tokens are published in DTCG format and can be imported into
  Figma today with an existing community plugin.
- [Lily + Claude Code](https://lilydesignsystem.com/skills/):
  26 Claude Skills — general, per-framework umbrella, and per-subproject
  headless/helpers — give Claude Code a curated, loadable entry point
  into Lily; how to add one, and links to all 26.

## Source (GitHub)

- [spec/index.md](https://github.com/LilyDesignSystem/lily-design-system/blob/main/spec/index.md):
  the specification — vision, scope, architecture, naming conventions,
  composition patterns, acceptance criteria, roadmap.
- [AGENTS.md](https://github.com/LilyDesignSystem/lily-design-system/blob/main/AGENTS.md):
  binding design-principle rules for AI coding agents.
- [components.tsv](https://github.com/LilyDesignSystem/lily-design-system/blob/main/components.tsv):
  the canonical 571-component catalog (slug, PascalCase name, description).
- [Canonical monorepo](https://github.com/LilyDesignSystem/lily-design-system):
  all 23 framework subprojects (8 headless, 7 example, 8 helper catalogs),
  the `bin/` tooling, and full change history.

## Optional

- [llms.json](https://lilydesignsystem.com/llms.json): this same
  curated map as structured JSON.

---

Lily™ and Lily Design System™ are trademarks.