Spectre Design
The core layers of the Spectre design system.
Tokens define it. UI implements it. Astro delivers it. Three layers that stay aligned through one shared contract.
Packages
Three layers. One shared contract.
- 01
Spectre Tokens
The design-token package. Defines every --sp-* CSS variable and the Tailwind preset that downstream packages and apps consume as the source of truth.
- 02
Spectre UI
The implementation layer. Transforms tokens into CSS bundles, component class recipes, and Tailwind configuration consumed by framework adapters.
- 03
Spectre UI Astro
The Astro adapter. Exposes the Spectre UI contract as typed Astro components — SpCard, SpButton, SpBadge, and more — ready to use in Astro applications.
Why it matters
Keep the system legible from design decision to shipped code.
Spectre Tokens define the source contract. Spectre UI carries that contract into implementation. Spectre UI Astro exposes it cleanly to Astro applications.
Together they make the system usable in production instead of leaving it trapped in documentation.
PHCDevworks
One contract. Three layers. Everything stays aligned.
Build downstream apps without inventing your own rules. The contract is already defined at the token layer.