Nodus Design System

Category

Status

Since

Getting Started

Overview
Why Nodus
CLInew
Roadmap
Changelognew
API Docs↗
Awards

About

Philosophy
Principles
Brand Foundationsnew
Heuristics

Foundation

Overview
Taxonomy (v2)new
Playgroundnew
Migration Guidenew
Compliancenew
White-Labelingnew

Motion
Iconography
Guides

Accessibility
Internationalization (i18n)new
i18n Demonew
i18n Interactivenew
Responsive Breakpointsnew
User Journey Mapsnew

A2UI Architecturenew
Component Graphnew
Page Structure Specnew
Release Notesnew
Versioningnew
Agent Processnew

Agentic Design Language

Overview
Agent Identitynew
Trust & Provenancenew
LLM Latency Statesnew
Multi-Agent Coordinationnew

Onboardingnew
Error Handlingnew
Real-timenew
Collaborationnew
Interruptionnew
Capabilitynew
Gesturenew
Haptic Feedbacknew

Components

Button
IconButton
ThemeToggle

Input
TextField
TextArea
Select
Checkbox
CheckboxGroup
RadioGroup
Switch
Slider
NumberInput
DatePicker
DateRangePicker

Icon
Badge
Tag
DataTag
StatusDot
ModelTag
Timestamp
DataFreshness
CostIndicator
TokenCounter
Meter
Avatar
Table
DataList

Callout
EmptyState
Skeleton
StreamingDot
FeedbackSignal
Progress
Spinner
Toast
DeprecationBanner

Card
Box
Flex
Grid
Container
Section
Separator
ScrollArea
ProgressiveDisclosure

ResponsiveNav
Tabs
SegmentedControl
LocaleSwitcher
KeyboardShortcutsPanelbeta
Breadcrumbs
Stepper

Dialog
AlertDialog
Modal
DropdownMenu
Popover
Tooltip
GlossaryTooltip
Accordion
TableOfContents
ConfirmDialog
Command

Text
Heading
Code
Kbd
Link
Blockquote
Em
Strong

ApprovalGate
CeremonyGate
IntegritySeal
GroundingIndicator
LearnedFromBadge
InstallBlock
MFAInput
PasswordStrength
RoleBadge
APIKeyDisplay

NodePrimitive
EdgePrimitive
GraphLayout

NumberCell
DeltaCell
CompactTable
StatusBadge
CurrencyPair
PositionSummary
RiskGauge
ThresholdAlert
SparkLine
CurrencyFlag
DateRange
Watermark
MiniBar
SortableHeader
DrilldownCell
Pagination
FilterBar
SpreadIndicator
FXRateCard
FXRateTicker
CurrencyPairSelector
DerivativeExposureBar
ForwardContractCard
FXRateGrid
FXOptionPricer
CashPositionCard
PaymentStatusTracker
CashForecastChart
CounterpartyRiskCard
SweepRuleVisualizer
ApprovalStepIndicator
LearningSignalCard
PeriodCloseTracker
MatchWaterfall
CovenantGauge
VaRDecomposition
MaturityLadder
ComplianceScreeningCard
AgingBucketChart
PoolHierarchy
FlywheelHealth
BulkExecutionTimeline
ApprovalPipeline
CovenantDashboard
IntradayTimeline
LearningMultiplierGraph
HedgeEffectivenessGauge
TrialBalanceTree
ScreeningResultCard
LimitBreachTimeline
DecisionTestCard
RatioBar
TrendBadge
DataFootnote
ReportHeader
RiskDisclosure
SummaryMetrics
ForecastTable
ScenarioComparison
WaterfallChart
VaRCard
VaRGauge
ExposureLimitBar
RiskScoreCard
BreachAlert
GreeksPanel
ConcentrationRisk
RiskHeatmap
FactorHeatmap
CashPoolCard
LCRDashboard
NSFRPanel
HQLAComposition
OrderBook
TradeBlotter
OrderTicket
PaymentTracker
PaymentQueue
TCAReport
ExecutionAnalytics
AllocationDonut
AttributionTable
HoldingsTable
AccountingMetrics
JournalEntry
HedgeBook
TrialBalanceSummary
ComplianceChecklist
SurveillanceQueue
RegulatoryReport
SanctionsCheck
ReconWaterfall
ReconSummary
ExceptionQueue
MatchPair
ConnectionStatus
CreditLineUtil
SettlementTimeline
NettingPosition
ConfirmationCard
SettlementTracker
PaymentLifecycleTracker
DualControlPanel
SanctionsCheckBadge
SettlementNetCard
StablecoinTable
WalletCard
TreasuryDashboard
RiskDashboard
ComplianceDashboard
PaymentStatusBadge
ClearingNetworkIndicator
ForecastRow
OrderBookRow
PaymentQueueTable
LineChart
AreaChart
GroupedBarChart
DivergingBarChart
ScatterPlot
Treemap
SankeyDiagramexperimental
ISINChip
TenorChip
CurrencyAmount
LEIBadge
InstrumentTypeTag
CounterpartyCard
DebtMaturityProfile
FundingCostBreakdown
RepoRateTable
CommercialPaperTracker
CapitalStructureWaterfall
BenchmarkComparisonChart
DurationConvexityPanel
YieldCurveViewer
TrackingErrorGauge
PnLAttributionSummary
ExpectedShortfallCard
CreditRatingBadge
StressTestResults
BacktestingChart
CutOffTimer
CorrespondentBankChain
KYCStatusCard
AMLAlertCard
RegulatoryCapitalGauge
BreakAnalysisTable
STPRateGauge
AdaptiveChartContainer
VolatilitySurface
OptionsPricingCard
TenorLadder
HedgeRatioGauge
FXExposureHeatmap
WebGLChartProvider
CandlestickGL
DepthChartGL
VolumeProfileGL
OrderFlowGL
MatchQueue
ExceptionManager
BreakAnalysisPanel
AgedItemsList
ReconciliationSummary
SunburstChartbeta
ChordDiagrambeta
ForceGraphbeta
BoxViolinPlotbeta
ParallelCoordinatesbeta
ChoroplethMapbeta
CirclePackingbeta
ContourDensityChartbeta
HorizonChartbeta
StreamGraphbeta
BumpChartbeta
RadialBarChartbeta
BarChart
HeatmapChart
ScatterChart

StreamingArtifact
ContextWindowMeter
ModelSelector
FunctionCallVisualizer
GenerativeFormFill
AuthorityScope
ReversalWindow
ActionLedger

Patterns

AgencyIndicator
AgencyStack
AgentCard
AgentGraph
AgentTimeline
AgentIdentityBadge
AmbientAgentStatus
AgentActivityFeed
AgentConfidenceBar
AgentThinkingIndicator

MCPToolCall
MCPServerStatus
ToolResult

ChatMessage
StreamingResponse
ContextWindow
CitationCard
ModelSelector
VoiceInputButton
TranscriptionDisplay
AudioPlayer

ApprovalQueue
ConsentFlow
CorrectionFlow
EscalationBanner
GuardrailIndicator
ErrorBoundaryCard
AgentRecoveryFlow
PartialSuccessPanel
StateBadge
StateIndicator
ScenarioScript
AgentPauseControl
RedirectPanel
OverrideConfirmation
AgentCapabilityMatrix
CapabilityGrant
CapabilityRevokeFlow
OverrideJustification
ReviewRequestCard
HumanInputRequest

AuditTrail
ProvenanceChain
ProvenanceFrame
UnknownComponentFallback
VaultBoundary
PermissionMatrix
ConfidenceMeter
TemporalScale
ConfidenceSpectrum
ActionProvenanceCard
AgentSourceCitation
DataLineageTag
TrustScoreDisplay
ValidationChain
ReconciliationDiff
AuditSignature

A2UISurface
A2AHandoff
TaskQueue
useAgentStream
usePositionFeed
useAgentHeartbeat
MultiAgentOrchestrationView
TaskStateBadge
RunLifecycleRail
StateDeltaInspector
A2ATaskPanel
ArtifactViewer

ReasoningTree
ThoughtEntry
ThinkingState
IterationDiff
AgentDecisionTree

LearningLedger
EvalRadar
RetryLedger

SimilarityCloud
RetrievalRanking
CostDashboard
DeadlineCountdown
RelativeTimestamp
ScheduleGridView

LoginCard
SessionTimeoutDialog
AccessDenied
UserProfileCard
AvatarStack

A2UI

Introduction
Architecture
Interaction Statesnew

Spec Librarynew

Composed Flowsnew

Overviewnew
Morning Brief
Agent Chat
Approval Flow
Observability
Cash Position Dashboardnew
FX Risk Monitornew
Multi-Agent Orchestrationnew
Agent Approval Gatenew

Charts & Data Viz

Chart Catalog

NumberCell
DeltaCell
CompactTable
StatusBadge
CurrencyPair
PositionSummary
RiskGauge
ThresholdAlert
SparkLine
CurrencyFlag
DateRange
Watermark
MiniBar
SortableHeader
DrilldownCell
Pagination
FilterBar
SpreadIndicator
FXRateCard
FXRateTicker
CurrencyPairSelector
DerivativeExposureBar
ForwardContractCard
FXRateGrid
FXOptionPricer
CashPositionCard
PaymentStatusTracker
CashForecastChart
CounterpartyRiskCard
SweepRuleVisualizer
ApprovalStepIndicator
LearningSignalCard
PeriodCloseTracker
MatchWaterfall
CovenantGauge
VaRDecomposition
MaturityLadder
ComplianceScreeningCard
AgingBucketChart
PoolHierarchy
FlywheelHealth
BulkExecutionTimeline
ApprovalPipeline
CovenantDashboard
IntradayTimeline
LearningMultiplierGraph
HedgeEffectivenessGauge
TrialBalanceTree
ScreeningResultCard
LimitBreachTimeline
DecisionTestCard
RatioBar
TrendBadge
DataFootnote
ReportHeader
RiskDisclosure
SummaryMetrics
ForecastTable
ScenarioComparison
WaterfallChart
VaRCard
VaRGauge
ExposureLimitBar
RiskScoreCard
BreachAlert
GreeksPanel
ConcentrationRisk
RiskHeatmap
FactorHeatmap
CashPoolCard
LCRDashboard
NSFRPanel
HQLAComposition
OrderBook
TradeBlotter
OrderTicket
PaymentTracker
PaymentQueue
TCAReport
ExecutionAnalytics
AllocationDonut
AttributionTable
HoldingsTable
AccountingMetrics
JournalEntry
HedgeBook
TrialBalanceSummary
ComplianceChecklist
SurveillanceQueue
RegulatoryReport
SanctionsCheck
ReconWaterfall
ReconSummary
ExceptionQueue
MatchPair
ConnectionStatus
CreditLineUtil
SettlementTimeline
NettingPosition
ConfirmationCard
SettlementTracker
PaymentLifecycleTracker
DualControlPanel
SanctionsCheckBadge
SettlementNetCard
StablecoinTable
WalletCard
TreasuryDashboard
RiskDashboard
ComplianceDashboard
PaymentStatusBadge
ClearingNetworkIndicator
ForecastRow
OrderBookRow
PaymentQueueTable
LineChart
AreaChart
GroupedBarChart
DivergingBarChart
ScatterPlot
Treemap
SankeyDiagramexperimental
ISINChip
TenorChip
CurrencyAmount
LEIBadge
InstrumentTypeTag
CounterpartyCard
DebtMaturityProfile
FundingCostBreakdown
RepoRateTable
CommercialPaperTracker
CapitalStructureWaterfall
BenchmarkComparisonChart
DurationConvexityPanel
YieldCurveViewer
TrackingErrorGauge
PnLAttributionSummary
ExpectedShortfallCard
CreditRatingBadge
StressTestResults
BacktestingChart
CutOffTimer
CorrespondentBankChain
KYCStatusCard
AMLAlertCard
RegulatoryCapitalGauge
BreakAnalysisTable
STPRateGauge
AdaptiveChartContainer
VolatilitySurface
OptionsPricingCard
TenorLadder
HedgeRatioGauge
FXExposureHeatmap
WebGLChartProvider
CandlestickGL
DepthChartGL
VolumeProfileGL
OrderFlowGL
MatchQueue
ExceptionManager
BreakAnalysisPanel
AgedItemsList
ReconciliationSummary
SunburstChartbeta
ChordDiagrambeta
ForceGraphbeta
BoxViolinPlotbeta
ParallelCoordinatesbeta
ChoroplethMapbeta
CirclePackingbeta
ContourDensityChartbeta
HorizonChartbeta
StreamGraphbeta
BumpChartbeta
RadialBarChartbeta
BarChart
HeatmapChart
ScatterChart

ChartTooltip
ChartAnnotation
ChartComparisonBar

Finance

Finance Catalog
Reconciliation

Community

Overviewnew
Contributingnew
Sprint 22 Case Studynew
Claude API Case Studynew
GOVERNANCE.md↗
Component Proposal↗
GitHub Discussions↗

Experimental

Overviewexperimental
Sandboxexperimental
Theme Builderexperimental
Agentic Playgroundexperimental
∞ Canvas Gridexperimental
3D / Splineexperimental
Colour Palettesexperimental