One design system, distributed as a swappable token contract.
Every surface in the org — sites, docs, dashboards — is cast in the same form: one contract of CSS custom properties, filled by an interchangeable ground and accent, so each product reads as itself while sharing the same bones.
@shuttering/starlight · the one public member
A theme is the set of custom properties that give an app its look. Fill the seams and you have a complete, drop-in theme — and because they're orthogonal, any ground composes with any accent, both flipping light ↔ dark at runtime.
- ground (
data-ground) — the near-neutral surface set: background, card, popover, muted, border, and the rest - accent (
data-palette) — primary, ring, and a brand gradient - fonts — bring-your-own via
--font-*-face, so a system takes the theme without inheriting a typeface - radius + scrollbar — the corner feel and a reveal-on-intent overlay bar
Reference grounds (paper · void · slate) and palettes (eucalyptus · indigo ·
amber · rose · slate · emerald) ship built in; author your own by filling the same
seams.
A monorepo of scoped packages, each a single concern, consumed across the org:
- tokens — the theme contract above: grounds, palettes, and the identity-neutral base plumbing (reset, scrollbar, focus ring, reduced-motion)
- motion — canvas + DOM motion primitives that self-inject their own CSS
- ui · charts · signature — components, data-viz, and brand marks
- starlight — a Starlight docs theme cut from the contract; the one member on public npm, so any docs site pulls it without a token
@shuttering/starlight is public. The rest is an internal design system, published
to GitHub Packages and consumed by the org's apps — nanohype.dev,
rackctl, and their tenants — so they share one form
while keeping their own face.
