Spectre Design System PHCDevworks

Spectre Design

Tokens define it. UI builds it. Astro ships it.

npm install @phcdevworks/spectre-ui-astro

Packages

Three packages. Each with one job.

  1. 01

    Package

    Spectre Tokens

    @phcdevworks/spectre-tokens

    --sp-* CSS variables and the Tailwind v4 preset. The source of truth for every visual decision downstream.

    npm install @phcdevworks/spectre-tokens
  2. 02

    Package

    Spectre UI

    @phcdevworks/spectre-ui

    Transforms tokens into CSS bundles and component class recipes consumed by framework adapters.

    @import "@phcdevworks/spectre-ui/index.css";
  3. 03

    Package

    Spectre UI Astro

    @phcdevworks/spectre-ui-astro

    Typed Astro components — SpCard, SpButton, SpBadge, and more.

    import { SpCard, SpButton } from '@phcdevworks/spectre-ui-astro'

Usage

Three packages. One import chain.

npm install @phcdevworks/spectre-tokens @phcdevworks/spectre-ui @phcdevworks/spectre-ui-astro

// global.css
@import "@phcdevworks/spectre-ui/index.css";

// Component.astro
import { SpCard, SpButton } from '@phcdevworks/spectre-ui-astro'

PHCDevworks

The contract is already defined at the token layer.

Install once. Import anywhere. No custom token system to maintain.

View the full system