Velvet Studio 2.0
Components Playground Design System Patterns Rust Docs
AREA 07 · BEHAVIOR & A11Y

Inclusive Design with Zero Runtime JavaScript

Native keyboard roving, high-visibility focus rings, and strict 7:1 contrast across all theme surfaces.

Rust docsResponsive studio
KEYBOARD TRAVERSAL

Universal Keyboard Shortcuts & Roving Focus

Built-in hotkeys operating seamlessly across both native desktop and web WASM runtimes

⌘K / Ctrl+KGlobal Command Palette: Instant jump to any component, route, or act.
Tab / Shift+TabLogical DOM focus order traversing all interactive controls and skip links.
Escape (Esc)Native light dismiss for popovers, drawers, and modal dialogs with zero JS.
Ctrl+ZTime-travel state rollback restoring previous store generation snapshot.
CONTRAST AUDIT

WCAG 2.2 AAA Contrast Certification

Verified ratio test results measured against foreground and background tokens

Normal Text: 14.8:1AAA Pass ✓ (Threshold: 7.0:1)
Large Display: 18.2:1AAA Pass ✓ (Threshold: 4.5:1)
UI Components: 6.4:1AA Pass ✓ (Threshold: 3.0:1)
Color contrast ratios are maintained automatically across Dark, Light and Midnight modes.
VALIDATION BENCH

HTML5 Constraint Validation Testbench

Test invalid field submissions and verify screen reader error announcements

Required Username
Browser validation prevents invalid form submission before wire payload is transmitted.

Command Palette

Jump to a room — ⏎ opens the first

The Rooms
02 · Component CatalogSpecimens 03 · PlaygroundInspector 04 · Design SystemTokens 05 · PatternsRecipes 06 · Responsive StudioViewport
Proofs & Reference
07 · A11y & BehaviorWCAG 08 · Rust DocsReference 09 · PerformanceBenchmarks 10 · Quality MatrixCI 11 · AuthenticationAuth
PREVIEW VELVET 2.0

Select an item

Select or hover an item to inspect live route details, contracts, and schema bindings.

Route: /components
Latency: < 0.9 ms (SSR)
Contract: Pure Rust
↵ Open Esc Close

Keyboard Shortcuts

Command Palette / Search⌘K / Ctrl+K
Time-Travel Undo (Rollback)Ctrl+Z
Toggle Light / Dark ThemeMod+Shift+L
Cycle Layout ShellMod+Shift+F
Cycle Density ScaleMod+Shift+D
DevTools Drawer⌘I / Mod+I
High Contrast (WCAG AAA)Mod+Shift+C
Reduced MotionMod+Shift+M

Velvet DevTools

WASM Active
Schema, Acts & Autonomous MCP
POST /__act POST /__mcp GET /act.schema.json GET /openapi.json
HomeAct::Ping → island: count
AuthAct::SignIn → island: session-hint
Proc::UserRows → island: user-rows (q: text)
MCP Tools/List → endpoint: /__mcp (JSON-RPC 2.0)
Engine Telemetry & Allocations
0 Heap Allocs / span 0.1 ms Paint 12 800 M/s
Live Session Tape (Flight Recorder)
[0.00s] boot_catalog 12 pages, 16 routes verified
[0.02s] session_init WASM active, 0 heap allocs
Interactive Act Dispatcher
View Schema Ready
Active Island Inspector (DOM Morph Target)
No active islands on current page
Browser Self-Check (what YOUR browser runs)
waiting…
Autonomous MCP Tool Console
View Act Schema 
Ready
Color Contrast & Accessibility
Text to Background 14.8:1 (AAA Pass ✓)

Settings

Språk / Language
Theme Mode
Design Style
Color Palette
Layout Shell
Density
Accessibility (WCAG AAA)