Skip to content

Design System

No other design systembuilt for the agent era.Nodus

Ship agent interfaces with 101pre-built patterns: streaming outputs, approval gates, audit trails, and consent ceremonies your team didn’t have to invent. 180 finance components cover FX, risk, payments, and compliance.

Color is semantic here: red means an agent is acting, blue means computation is in flight, gold means a human decision is required.

Private previewEvaluation by request · WCAG AA · render-verified

376
Components
180
Finance
101
AI Patterns
WCAG AA
All 376 verified

Find your path

Semantic color system

Three colors. Three meanings. No exceptions.

AgencyRed

Authority, action, AI acting. Red means something is happening — an agent is taking an action, a user is exercising control.

TemporalBlue

Processing, information, time. Blue is computation in flight — data loading, inference running, a clock ticking.

ValidationGold

Enrichment, caution, confirmation. Gold marks moments that need attention — a threshold crossed, a value confirmed.

Token demonstration

Color that means something.

NODUS · SEMANTIC SIGNAL TRACE
LIVE
Agency
Temporal
Validation

Where to start

Pick your path.

New here? Each path takes you from zero to productive in under five minutes. Pick the one that matches what you're building.

Building an AI product

  1. 01Getting Started
  2. 02AI Patterns
  3. 03Principles

Building a finance tool

  1. 01Finance Catalog
  2. 02Guides
  3. 03Roadmap

Designer joining the system

  1. 01Philosophy
  2. 02Tokens
  3. 03Guides

Auditing coverage or compliance

  1. 01Accessibility
  2. 02Heuristics
  3. 03Roadmap

Architecture

Four layers that compose.

Every component lives at exactly one layer. Patterns consume primitives. Finance components share primitive tokens. Foundation governs all. Nothing leaks between layers.

Read bottom-up: Foundation supports everything above it.

04
AI Patterns101 patterns

Purpose-built interaction patterns for agent interfaces: agency gates, tool call chains, consent ceremonies, audit trails.

Agency & ControlTool ExecutionConversationTrust & Provenance
03
Finance Components180 components

Domain-specific UI for treasury: FX, payments, risk, compliance, recon, portfolio. The densest, most data-intensive layer.

Cash & LiquidityFX & HedgingPaymentsRisk Analytics
02
UI Primitives95 components

Universal interface building blocks: forms, tables, overlays, navigation, feedback, typography. Composable and token-governed.

ActionsData EntryData DisplayOverlaysNavigation
01
Foundation8 sections

The design language. Tokens, motion, typography, color, principles, heuristics, accessibility. Everything else inherits from here.

TokensMotionTypographyPrinciplesAccessibility

Component showcase

Composable. Dense. Precise.

Actions

Status indicators

ActivePendingActionWarning

7 outcome tokens · positive, caution, negative
3 semantic signals · agency, temporal, validation

Finance data table — 32px compact density

IDInstrumentNotionalCCYStatus
FX-0142USD/EUR Forward2,400,000USDActive
FX-0138GBP/JPY Spot850,000GBPPending
FX-0131EUR/CHF Option1,200,000EURAction

A2UI — Agent-to-UI

An agent emits a spec. Nodus renders it.

A treasury agent emits a structured decision brief — counterparty, FX rate, risk flags — and Nodus renders it as a compliant, accessible interface. No layout decisions, no component wiring required.

PlanningDecisionGovernance
Try the A2UI generator →
{
  "type": "approval_gate",
  "agent": "TreasuryAgent",
  "action": "Execute $12M USD→EUR sweep",
  "requires": "human_decision"
}

Rendered output from the spec above — the real ApprovalGate component.

Why Nodus

No other DS has
a language for AI.

Most design systems were built for humans filling forms. Nodus is built for humans working alongside agents — where trust, legibility, and sovereignty are interface requirements, not afterthoughts.

01

Agent-first primitives.

101 patterns purpose-built for AI interaction: agency levels, tool call chains, provenance visualization, ceremony gates. Not adapted from form builders. Built for agents.

See the evidence →
02

Semantic color discipline.

Three colors mapped to three meanings. Red is agency. Blue is temporal. Gold is validation. Every component uses this vocabulary. No exceptions.

See the evidence →
03

Finance depth.

180 domain-specific components covering treasury, FX, payments, risk, compliance, and recon. The finance layer no other design system has.

See the evidence →
Read the full philosophy →

Built with Nodus DS

Templates ready to ship.

167 end-to-end interface templates across treasury, AI agent workflows, and finance domains. Copy, configure, and deploy — fully token-governed and WCAG AA compliant.

Browse all 167 templates →

Start building

What are you building?

Design principles

Legibility as
aesthetic program.

  1. 01Visibility Over Invisibility
  2. 02Ceremony Over Efficiency
  3. 03Auditability as Aesthetic
  4. 04Temporal Honesty
  5. 05Sovereignty as Feeling
  6. 06Agent Legibility
  7. 07Learning Acceleration
Explore all principles →

Recognition

One achievement. Two submissions in review.

AccessibilityVerified

WCAG AA compliance

All 376 components pass contrast requirements. Contrast documented per token. Keyboard navigable throughout. Screen-reader tested. 10px font floor.

Design SystemsSubmitted · Mar 2026

Awwwards — Site of the Day

Submitted March 2026 for semantic color discipline and agent pattern depth. Under review.

Finance UXSubmitted · Mar 2026

CSS Design Awards

Submitted March 2026 — the 180-component finance layer spanning FX, risk, payments, and compliance. Under review.

Nodus Design System v1.1

Three token layers. 376 components. One way to build.

Governance model shipped. Voice, theming, and realtime collaboration live. 376 components, 101 agent patterns, 180 finance components.