/// getting-started

Introduction

The Protocore Design System (PDS) is Protocore’s design language, made buildable — a single React library of tokens, components, and patterns that renders every Protocore-grade product in one coherent voice.

What PDS is

PDS is an opinionated system, not a neutral toolkit. Where most libraries hand you a blank canvas and a thousand knobs, PDS encodes a point of view and removes the knobs that would let a product drift off-brand. Four rules carry the whole look:

Dark-first. Dark is the default theme the system is designed in; light is a first-class derivation, not an afterthought.
Near-monochrome. A deliberate colour budget — roughly 70% black, 29% white and gray, and under 1% colour. Restraint is the aesthetic.
Hairline-drawn. Structure comes from 1px rules and sharp corners, never from drop shadows or rounded pills. The one sanctioned shadow is reserved for floating layers.
One reserved signal. A single accent colour marks the few things that truly matter — focus rings, the one live number, the selected nav item. It is never a button fill and never a status.

The differentiation doctrine

Interactivity is legible from typography alone. Uppercase mono means actionable (buttons, chips). Sentence-case sans with a tone tint means status (badges, callouts). As-typed muted mono means metadata (tags, timestamps). You never have to guess whether a thing is a button — its case and family tell you.

Who it’s for

PDS is built for teams shipping Protocore products and dashboards — dense, data-forward interfaces where clarity and consistency matter more than decoration. It suits console UIs, admin surfaces, developer tools, and marketing pages that need to feel of a piece with the product. If your interface lives on numbers, tables, states, and controls, the system will feel like it was drawn for you, because it was.

It is deliberately less suited to expressive, illustration-led consumer brands that want bespoke colour and rounded warmth on every surface — PDS will fight you there, and that friction is intentional.

The packages

@protocore/pds

React DOM — available now

Stable · v1.0

101 components and 6 hooks for the web, built on React 18 and 19. Ships the token layer, dark/light theming, five accents, density, an optional charts subpath, and machine-readable AI endpoints.

@protocore/pds-mobile

React Native — planned

Planned

A React Native companion that speaks the same token vocabulary and component contract, so a screen reads identically on web and native. Docs pages carry mobile-tagged sections that light up when it lands.

Both packages share one token source and one component contract — the API vocabulary (variant, size, tone) and the differentiation rules are identical across platforms.

A note on licensing

PDS is proprietary. Every part of it — source, compiled artifacts, tokens, the visual language, and this documentation — is the exclusive intellectual property of Protocore, and no use is authorized without prior written approval. Read the full terms on the License & IP page before adopting the system in any project.

Ready to build? Continue to Installation.