Circuit v0.0.1 — live showcase, importing the real src/* package files
design system showcase

erisera / circuit · v0.0.1 — pre-release

Circuit — the erisera OSS design system

One system, six tools. Circuit is a single set of tokens — neutrals, type, spacing, components — with exactly one dimension that changes per project: an accent hue. This page imports src/index.css and src/palette.js directly — every component below is the real, shipped thing.

Three rules hold the system together: neutrals are hue-stable so scaffolding never clashes with whichever accent is active; semantic color is fixed (success/warning/error/info never rotate); syntax highlighting is fixed. Only --accent moves. See README.md for the full writeup.

Color

Semantic states

Success
Warning
Error
Info

Hue registry

9 products
one wheel
ProductHueStatus

Accent scale — live preview

Typography

Body scale

Spacing & elevation

Spacing scale

Corner radius

Elevation

Syntax theme

example.ts
import { createClient } from "@mcp-query/core";

// reactive client, typed against a live server contract
interface QueryOptions {
  ttl: number;
  retry: boolean;
}
keywordstring functiontype numberboolean comment

Components

Buttons

primary
secondary
ghost
disabled

Input field

default
Enter a valid email address.

Badges

accentdeployed
degradedfailed

Tabs

OverviewReferenceExamples

Admonitions

Note. Uses the live accent.

Tip. Always success-green.

Warning. Always amber.

Danger. Always error-red.

API parameter list

providersProvider[]required

Backends to route through, in priority order.

fallback"cascade" | "race"= "cascade"optional

Try providers in order or race them.

Code groups

Terminal / output block

$ npm install @erisera/circuit
✓ added @erisera/circuit@0.0.1

Search / command palette

Mounted here via createCommandPalette() from palette.js — press / or click the box.

Real component, real behavior — not a mock.

Logo & marks

Loaded from src/marks/*.svg — standalone files, tool hue baked in.

Favicon system

OG image template

erisera / matey
Write once, run anywhere — a universal client for 12+ model providers
Quickstart guide · matey.erisera.com
circuit design system · erisera.com
1200 × 630 · rendered at 50%