Skip to content
Protocore Design Systemv1.6.9
Protocore Design System

Protocore Design System

Protocore’s design language, systematized — tokens, 101 components, and the patterns that hold them together. Dark-first, near-monochrome, hairline-drawn, with a single reserved signal.

pnpm add @protocore/pds
Live components

The system, rendered

Every tile below is a real @protocore/pds component running in this page — the same code you ship. Follow any tile through to its full documentation.

Button
Badge
DeployedPendingFailedQueuedDraft
Chip
Tabs
Service is healthy.
Sparkline
StatCard
Requests / min
47.2K+12.4%
Toast
    Foundations

    Rules before pixels

    The system is doctrine first: how color, type, and motion behave — and how machines read it — before any component exists.

    01 · Color
    Color
    Near-monochrome ramps, five accents, one strict signal budget.
    02 · Type
    Typography
    Two families — sans for humans, mono for machine signals.
    03 · Motion
    Motion
    Calm, physical easing; the draw-in signature; reduced-motion honored.
    AI · Machine-readable
    Built for agents
    llms.txt, a queryable component registry, and an MCP server for coding agents.