Lily Design System and Adobe Spectrum

Adobe Spectrum is a design language with visuals, tokens and Adobe-maintained React and Web Components code, whereas Lily Design System is an unstyled component contract implemented in eight headless framework libraries plus Alpine snippets, with no visual language of its own. It matters because choosing Spectrum means taking Adobe's look and release schedule, while choosing Lily means your team owns every visual decision and relies on one unaudited maintainer. Choose Spectrum if you want a ready-made design language, and Lily if you need the same accessible structure across many frameworks under your own design.

A design language versus a component contract

Spectrum's home page calls it "the system behind Adobe experiences, a shared language for turning ideas into products", and says it offers foundations, tokens, patterns and guidance. Its code page covers typography for Spectrum Web, iOS and Android. The decisions are visual as well as structural: hierarchy, type styles, scales and colour.

Lily makes no visual decisions in its headless layer. It ships semantic HTML, ARIA, focus and keyboard behaviour, and a kebab-case class hook per component. Lily does include a theme called adobe-spectrum.css among the 63 stylesheets in its themes/ directory. That is a reference stylesheet aimed at Lily's class hooks. It is not Spectrum, it carries no endorsement from Adobe, and it is not a substitute for Spectrum's guidance.

Lily's own survey (429 rows, compare/compare.tsv) marks 152 rows as matching an Adobe component. Lily is 429 of 429 by construction, because the survey is built from Lily's catalog (607 rows in components.tsv). Read the 152 as overlap, not as a score for Spectrum.

Implementations and who maintains them

Spectrum's home page says dedicated React and Web Components areas are "available in beta", and that iOS, Android and other platforms are planned. Two repositories matter for code. The Spectrum Web Components README calls it "a library of web components implementing Adobe's Spectrum design system", developed by "a core team in Adobe Design Engineering", under Apache-2.0. The React Spectrum repository contains React Spectrum (ready-made components), React Aria (unstyled hooks and components), React Stately (state hooks) and Internationalized, also under Apache-2.0. The pages I read did not name who maintains the iOS or Android work, and did not state a maintenance or support commitment for any of them.

Lily has seven full-catalog headless libraries (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks), a Web Components library covering a subset of the catalog, and an Alpine.js library of markup snippets plus one plugin. Each follows the same names and class hooks. Maintenance is one person, per Lily's own COMPARE.md, which says there is no vendor relationship, SLA or support contract.

The practical difference: Spectrum has a corporate team behind two web implementations, but nothing for Vue, Angular, Blazor or server-rendered templates in what I read. Lily covers more frameworks, with a much smaller team and far less production history.

Tokens and theming

In Spectrum Web Components, an sp-theme element supplies design tokens to its DOM scope; the docs say "these tokens are made available as CSS Custom Properties". It takes a scale (medium or large), a colour (light or dark) and a system (spectrum, express or spectrum-two). So theming changes within Adobe's own language, and the component styling comes with the package.

Lily's headless components carry no styles. Its theming is a flat token object that becomes --theme-* custom properties through an optional ThemeProvider, plus data-theme variants. Its 63 reference stylesheets target the class hooks, and the theme-picker helper swaps them at runtime. You write or adapt the stylesheet. If you want a finished, consistent look, Spectrum gives you more; if you need a look that is not Adobe's, Lily gets in the way less.

Accessibility and internationalisation

The React Spectrum repository states that "Accessibility and behavior is implemented according to WAI-ARIA Authoring Practices", that components support keyboard navigation and screen readers, and that "Support over 30 languages is included out of the box", with right-to-left and locale-aware date and number formatting. These are the project's own claims. The Spectrum Web Components docs say "Accessible by default"; the home page of spectrum.adobe.com and the SWC README state no accessibility position, and I found no conformance statement in what I read.

Lily targets WCAG 2.2 AAA and follows the APG patterns, with automated axe checks, but has never been audited, as its COMPARE.md says. Its internationalisation rule is different in kind: components contain no user-facing strings at all, and every label is a prop. That avoids shipping translations that might be wrong, but it hands the work to you. Lily offers 64 label packs for its grid-like helpers, of which 63 are unreviewed machine drafts. If you want locale handling built into the components, the React Spectrum libraries look further along.

Scope, maturity and licence

Spectrum's pages I read list beta areas for React and Web Components, and the Web Components docs list 91 navigation entries under Components, some of which may be utilities. The Web Components migration guide is dated "2024/10/31 (v1.0.0)". The spectrum.adobe.com home page gives no component count. Lily lists 607 components in its catalog, a wider surface than a typical design system, but each is newer and less proven in real use.

Both Spectrum code repositories I checked show Apache-2.0. Lily's licence is a choice among several, expressed as MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause. The Spectrum design language itself (foundations, guidance) has no licence stated on the pages I read, so check Adobe's terms before reusing anything beyond the code.

Sources

All comparisons