Doxt Atomic Design System
Welcome to the Doxt component and design system library documentation. This standalone portal serves as the single source of truth for all foundations, atomic UI primitives, molecular patterns, organisms, and page layout shells used across our ecosystem.
Component Hierarchy & Layers
6 SectionsDesign Tokens & Foundation
Color ramp, semantic tokens, radius scales, spacing units, icon registry, and responsive layouts.
Atomic UI Primitives
Foundational, indivisible components built with accessibility, states, and dark-mode tokens.
Molecular Components
Composed atomic primitives acting as interactive units with localized states.
Organism Modules
Complex, reusable UI sections combining atoms and molecules into feature-complete widgets.
Page Shells & Layouts
Structural scaffolds providing responsive framing, navigation sidebars, headers, and footers.
Production Templates
Complete view compositions demonstrating live, production-ready screen assembly.
Doxt Technology Stack
High-performance, edge-native architecture built with React 19, React Router v7, Vite 6, and Cloudflare Workers.
Concurrent rendering, nested layouts, client-side loaders, and instant Vite HMR.
Atomic utility engine, dual light/dark themes, and zero-latency variable fonts.
Global serverless execution with sub-50ms TTFB and immutable asset caching.
Row-Level Security (RLS), OAuth/Magic Links auth, and serverless Edge Functions.
Client-side coordinate PDF parsing, serverless PDF sealing, and SHA-256 audit trails.
Cached build pipelines, shared @doxt/ui package, and topological execution.
Zero-Fork Architecture
All applications consume from the shared @/design directory. Primitives and patterns are rendered directly from canonical components without drift.
Semantic Labeling
All UI primitives adhere to strict UI element type naming (Nav Link, Action Button, User Avatar) to preserve maximum reusability.