Skip to content

Awards & Recognition

The only
design system
built for the agent era.

Nodus Design System ships with purpose-built primitives for Claude API integrations: streaming artifacts, context window meters, function call visualizers. No other design system speaks the language of agentic AI. This page documents our Awwwards SOTD and CSS Design Awards submissions — updated for v1.4.0.

Claude APISprint 25Sprint 26v1.4.0AI-Native

Flagship Innovation

5 components. 1 stack. Built for Claude.

Sprint 26 ships the AI-Native Component Pack — five primitives that complete the Claude API integration story. Together they form a full rendering pipeline for agent-driven interfaces.

StreamingArtifact

Token-by-token output rendering with streaming state machine. Handles partial JSON, markdown, and code artifacts from Claude API responses.

ContextWindowMeter

Real-time visualization of Claude context consumption. Segmented bar with token budget warnings, model-specific limits, and threshold alerts.

FunctionCallVisualizer

Renders tool_use blocks as structured cards — function name, arguments, and result in a collapsible inspector with syntax highlighting.

ModelSelector

Dropdown for Claude model variants with capability comparison: context window, vision support, speed tier, and cost per token.

GenerativeFormFill

AI-assisted form completion using structured output. Fields populate progressively as the model generates JSON — users see values appear in real time.

Claude API + Nodus DSTypeScript
import { StreamingArtifact, ContextWindowMeter } from "nodus-design-system";
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

async function streamResponse(prompt: string) {
  const stream = client.messages.stream({
    model: "claude-opus-4-6",
    max_tokens: 2048,
    messages: [{ role: "user", content: prompt }],
  });

  // Token budget tracked in real time
  stream.on("message", (msg) => {
    updateContextMeter(msg.usage.input_tokens + msg.usage.output_tokens);
  });

  return stream; // → feeds <StreamingArtifact stream={stream} />
}

Submission Status

AWWWARDS
SOTD

Site of the Day

Pending

Submitted
CSS
DESIGN
AWARDS

WotD Nominee

Pending

Submitted
Awwwards SOTDSubmitted March 2026
CSS Design AwardsSubmitted March 2026
Submission URLdesign.dana.xyz
Version submittedv1.4.0 (Sprint 26)
AI-native showcaseIncluded in package

Submission Package

URLhttps://design.dana.xyzPrimary submission URL
CategoryDesign System / Developer ToolBest-fit Awwwards category
DescriptionNodus DS is the only design system built for the agent era — 233 components, 5 AI-native Claude API components, 72 A2UI templates, and a semantic color vocabulary that makes algorithmic structure legible. Bloomberg Terminal meets modern accessibility. Built by a multi-agent design team.255 chars
Tagsdesign-system, ai-native, claude-api, finance, accessibilityAwwwards tag cloud
TechnologiesNext.js, TypeScript, Anthropic SDK, CSS Custom Properties, WebGLTech stack
Versionv1.4.0 — Sprint 26 releaseSubmitted March 2026

Self-Assessment

Four criteria. Four strengths.

Design9.5

Bauhaus-influenced visual language. Color is semantic, not decorative. Typography hierarchy at Bloomberg density. Dark mode is the primary surface. Every pixel earns its place.

Usability9.0

WCAG AA across all 233 components. WCAG AAA push for Sprint 25 additions. 10px font floor. Keyboard-navigable. Semantic HTML. Skip-to-content. Screen reader tested. Contrast ratios documented per token.

Creativity9.8

No other design system has a language for Claude API. StreamingArtifact, ContextWindowMeter, FunctionCallVisualizer — purpose-built primitives for the Anthropic SDK. 72 A2UI templates spanning treasury, agentic, and AI-native workflows. Entirely novel problem domain.

Content9.0

Extensive documentation: token tables, prop APIs, TypeDoc, Storybook stories, philosophy, principles, accessibility guides, RFC governance, live playground, and a component relationship graph.

Judge Readiness

Optimized for review.

Awwwards and CSS Design Awards judges evaluate on desktop. We prepared specifically for judge experience: fast cold start, rich first impression, no layout shifts.

Performance

  • ✓All pages server-rendered (Next.js App Router)
  • ✓No client JS on static docs pages
  • ✓CSS custom properties — zero runtime theming overhead
  • ✓WebGL charts: GPU-accelerated with OffscreenCanvas fallback

Mobile Experience

  • ✓Responsive sidebar collapses to hamburger at <1024px
  • ✓Touch-friendly tap targets (44px minimum)
  • ✓Mobile command palette via touch-accessible search button
  • ✓Fluid typography: clamp() on all hero headings

Animations

  • ✓Subtle: sidebar hover, nav transitions, badge fades
  • ✓No motion unless meaningful (respects prefers-reduced-motion)
  • ✓TokenDemoSection: live color variable demo on hover
  • ✓StreamingArtifact: real Claude API token stream simulation

Recognition Track

Awwwards SOTDSubmitted

Design System category. v1.4.0 — March 2026.

CSS Design AwardsSubmitted

AI-Native Component Showcase. March 2026.

WCAG AA ComplianceAchieved

All 233 components pass contrast requirements.

NPM PublicationLive

nodus-design-system v1.4.0 on npm registry.

Finance UXSubmitted

72 A2UI templates. Treasury UX category.

Claude API IntegrationShipped

5 AI-native components. Full Anthropic SDK support.

Social Assets — v1.4.0 Launch

Launch distribution package.

Coordinated social launch for v1.4.0 across Twitter/X, LinkedIn, and Product Hunt. All assets use the updated AI-native visual language.

Twitter / X
1200 × 675pxReady

We built 5 new components specifically for @AnthropicAI Claude API. StreamingArtifact, ContextWindowMeter, FunctionCallVisualizer — the design primitives the agent era needs. Nodus DS v1.4.0 ships today. design.dana.xyz

LinkedIn
1200 × 627pxReady

Nodus Design System v1.4.0 — the first design system with native Claude API component support. 5 new AI-native primitives, 72 A2UI templates, Design Tokens v2. Built by a multi-agent team at Dana.

Product Hunt
5 screenshotsReady

Gallery updated: StreamingArtifact demo, ContextWindowMeter, FunctionCallVisualizer, QuantDashboard GL, and the new White-Label Theme Builder.

OG Image
1200 × 630pxReady

design.dana.xyz — updated to show AI-native component pack with agent-era tagline.

Updated March 2026 · v1.4.0