Design System

THE STRUCTURE
IS THE AESTHETIC.

Bauhaus made industrial structure visible. Nodus makes algorithmic structure visible. A design system grounded in legibility as the 21st-century aesthetic problem.

$npm install @nodus/design-system
14
UI Components
14
Pattern Archetypes
0px
Border Radius
3
Primary Colors
Color Semantics

Three colors. Three meanings.
No exceptions.

AGENCY
#FF0000

Authority. Active state. AI acting. Red means something is happening now.

TEMPORAL
#0000FF

Processing. Information. Time passing. Blue is computation in flight.

VALIDATION
#FFD700

Enrichment. Caution. Confirmation. Yellow marks moments requiring attention.

Six Principles

Legibility as aesthetic program.

01

Visibility Over Invisibility

Make the algorithm present, not hidden. Default to revealing what's happening, not concealing it.

02

Ceremony Over Efficiency

Important actions feel weighty. Granting AI access to your calendar is a decision, not a checkbox.

03

Auditability as Aesthetic

Beautiful systems are inspectable systems. The ability to trace what happened is a design value.

04

Temporal Honesty

Represent time accurately. If computation was instant, show instantaneity. Don't collapse time into a false 'now'.

05

Sovereignty as Feeling

Your data, attention, agency — perceptible in the interface, not buried in a privacy policy.

06

Agent Legibility

When AI acts on your behalf: who, what, when, under what authority — always visible.

Live Pattern

Agency Indicator

Five levels of AI agency — each with its own color, label, and interaction weight. Click a level.

RECOMMEND
AI ranks — you choose
2

The structure is always there.
We choose to show it.