Skip to content
Conductor
Overview
Dark-first · tokens → css → react

Conductor Design System

Reusable tokens, a layered stylesheet and Radix-based React primitives for focused operational interfaces. Dark is canonical, light is a first-class second palette, and every colour ships with its contrast verdict.

Get startedBrowse components
app.tsx
import "@conductor-by-89soone/css";
import { Button } from "@conductor-by-89soone/react";

<Button variant="primary">Deploy</Button>
pnpm add @conductor-by-89soone/react

Live showcase

web-consoleDeploying
ServiceStatusDuration
web-consoleDeploying1m 12s
event-workerHealthy42s
search-indexAwaiting approval18s
Rolloutcanary · warns at 80%
72%
Auto-promote is on
The release moves to 100% once the canary stays healthy for 15 minutes.
  1. ValidatedAll 14 checks passed
  2. DeployingRolling out to the canary group
  3. Traffic shiftStarts once the rollout settles
Auto-promotePromote when every check passes

Everything above is live DOM from @conductor-by-89soone/react — switch the theme to see the tokens swap.

  • 76ComponentsRadix-based React primitives
  • 322TokensOne source, both palettes
  • 244/244Contrast checksWCAG 2.1 AA, measured per theme
  • 2Themes0 runtime requests

Packages

Three packages, one visual contract

Dependencies flow one way, tokens → css → react, and the docs site you are reading is the first consumer.

@conductor-by-89soone/tokensThe token source with its build and contrast CLIs. Emits CSS custom properties and typed keys for both themes.Tokens reference@conductor-by-89soone/cssA framework-agnostic stylesheet organised in cdt.* cascade layers. Works with any markup that uses the class contract.Getting started@conductor-by-89soone/reactRadix-based primitives that compose the stylesheet. Focus, roles and keyboard handling are delegated, never hand-rolled.Browse components

Principles

Settled decisions, not open questions

The architecture records are closed; what follows is how the packages behave because of them.

  • One token source

    Every colour, length and duration is a --cdt- custom property generated from one TypeScript source. A theme swaps values, never keys.

  • Keyboard-first, by Radix

    Dialogs, menus, selects and tabs delegate focus, roles and keys to Radix UI. Status is never colour alone.

    Tab
    Next control
    ShiftTab
    Previous control
    Enter
    Activate
    Esc
    Close an overlay
    ↑↓
    Move in menus and lists

  • Cascade layers, never !important

    Unlayered consumer rules win by layer order.

    @layer cdt.reset, cdt.base, cdt.layout, cdt.component, cdt.utility;

  • Motion that steps aside

    Entrances settle on a spring, exits accelerate away, and prefers-reduced-motion turns every motion token to 0s.

  • Zero runtime requests

    Static CSS and components that fetch nothing and track nothing; 244 of 244 colour pairs pass WCAG 2.1 AA at build time.

  • Ready for AI agents

    The build writes a DESIGN.md with every token per theme, an llms.txt index and a Markdown page per component, all from the same sources as these pages.

    DESIGN.mdllms.txt

Quick start

Up and running in three steps

One command, one import, one component. The rest is reading the current theme.

  1. Install the package

    The full guide lists the tokens and stylesheet packages alongside it.

    pnpm add @conductor-by-89soone/react

  2. Import the stylesheet once

    Its first line declares the cascade layers, so your own rules always win.

    import "@conductor-by-89soone/css";

  3. Render a component

    Every variant reads the current theme from the html attribute.

    <Button variant="primary">Save</Button>
Read the full guide

Ready to build with Conductor?

Install the package, import the stylesheet once, and every component picks up the current theme.

Get startedBrowse components