Krado Design System — Modern Code for Modern Times v2.6.1 • Production Ready • Fully Tested • Accessible

Krado is a design system that automatically turns your design decisions into usable code.

Think of it as a bridge between designers and developers. Change a color in Figma → it updates everywhere in your app automatically. No more manually copying hex codes, no more hardcoded spacing values. Your design system stays synchronized between design and code without manual intervention.

Major Feature & Documentation Release

• Advanced Token Ingestion — Full support for W3C DTCG formats and CLI-driven token builds via @akrade/krado-tokens.
• Documentation Architecture — Reorganized into a clear docs-public/ structure with role-based navigation (Developer, DevOps, Manager).
• Improved Performance — Optimized build pipelines and token transformation logic with 112+ new tests passing.
• Zero Breaking Changes — Full backward compatibility for existing production environments.

View Full Release Notes →

Install the package that matches your needs. Each package works independently or together as part of the complete system.

# Full component library with React components
npm install @akrade/krado-ui

# Design tokens only (works with any framework)
npm install @akrade/krado-tokens

# React hooks for custom components
npm install @akrade/krado-ux

# Developer experience toolkit (CLI)
npm install @akrade/krado-dx

# AI prompt engineering engine
npm install @akrade/krado-ai

Full Installation Guide with Examples →

Krado is architected as a five-layer system where each layer solves a specific problem. You can use any layer independently or combine them for the full experience.

Most design systems force you to use everything or nothing. Krado lets you choose your level of adoption:

• Use just the tokens if you have existing components but want automated design sync from Figma
• Use tokens + hooks if you want Krado's behavioral patterns but need custom visual styles (e.g., for Tailwind CSS)
• Use the full stack if you want production-ready components that just work
• Use just the DX toolkit if you want to automate releases and setup for any project
• Use the AI engine if you want structured prompts and preferences for LLM-assisted development

Deep Dive into Architecture →

• Installation & Setup - Step-by-step installation for each package with code examples
• Architecture Guide - Understand how the three-layer system works and why we built it this way
• Component Documentation - Interactive Storybook with live component examples and API documentation

• Style Dictionary Guide - How the token transformation pipeline works (Figma → CSS/JS/TS)
• Automation Guide - CI/CD setup for automated Figma token syncing
• Storybook Automation - Visual regression testing setup with Chromatic
• Developer Experience Guide - CLI commands for releases, setup, and DevOps automation
• Performance Report - Detailed metrics, benchmarks against competitors, and quality analysis

• Release History - Complete version history with migration guides for major updates
• Phase 5 Roadmap - Upcoming features
• Phase 6 Overview - Advanced token pipeline (Conceptual)
• DevOps Overview - Infrastructure, tooling, and development workflow
• Full Changelog - Granular change log following Keep a Changelog format

Traditional design systems require manual synchronization between Figma and code. Designers update a color, developers copy-paste hex codes, bugs happen, things drift out of sync.

Krado eliminates manual work entirely. Our token extraction pipeline connects directly to the Figma Variables API. When a designer changes a design value in Figma, the next build pulls those changes automatically and regenerates your CSS variables, JavaScript exports, and TypeScript types. Your codebase stays perfectly synchronized with your design source of truth.

Most UI libraries use arbitrary easing curves or duration values. Krado uses real physics calculations via spring-easing to generate animations that feel natural. Every motion follows spring physics with configurable stiffness and damping, then gets compiled into CSS linear() easings for optimal performance. The result: animations that feel responsive and alive without manual timing tuning.

Every component in Krado achieves WCAG 2.1 Level AA compliance through comprehensive testing:

• Automated accessibility testing with axe-core integrated into the test suite
• Manual screen reader testing (NVDA, JAWS, VoiceOver)
• Keyboard navigation patterns following ARIA Authoring Practices
• Focus management and visual focus indicators
• Semantic HTML with proper ARIA attributes

This isn't an afterthought or optional feature. It's baked into the architecture through our use of Radix UI primitives, which handle the complex accessibility patterns so you don't have to.

Radix UI provides unstyled, accessible components that handle the hard parts: keyboard navigation, focus management, screen reader support, and ARIA compliance. Krado builds visual styles and behavioral enhancements on top of this solid foundation. This gives you:

• Best-in-class accessibility without implementing complex ARIA patterns yourself
• Composability via the asChild prop, letting you customize DOM structure without losing functionality
• Framework compatibility - works anywhere React runs (Next.js, Remix, Astro, Create React App)
• Future-proof architecture - Radix's stable primitives mean fewer breaking changes

Krado supports three distinct theming modes to match different development workflows:

This flexibility means you can adopt Krado incrementally or switch styling approaches without rewriting your component logic.

View Live Examples in Storybook →

To contribute or run the codebase locally:

# Clone the repository
git clone https://github.com/akrade/krado.git
cd krado

# Install dependencies (requires pnpm 8+)
pnpm install

# Run development environment (starts Storybook and file watchers)
pnpm dev

# Build all packages with Turbo caching
pnpm build

# Run full test suite (unit tests + accessibility tests)
pnpm test

Krado uses pnpm workspaces for package management and Turbo for orchestrating builds across the monorepo. This setup provides:

• Dependency deduplication - shared dependencies are installed once at the root
• Build caching - Turbo caches build outputs, skipping unchanged packages
• Parallel execution - tasks run concurrently across packages when possible
• Atomic versioning - Changesets manage version bumps and changelog generation

Contributing Guide →

Krado is designed for production use with strict performance requirements. Here's how we measure up:

• Test Coverage: 166 tests covering unit tests, integration tests, and accessibility validation with axe-core
• Build Time: Complete monorepo build (all packages) completes in under 2 seconds thanks to Turbo caching
• Bundle Size: Production bundle including all 11 components weighs 64.4KB gzipped, staying well under the 100KB budget
• Accessibility: Every component passes automated axe-core scans and manual screen reader testing
• Quality Score: Composite score based on test coverage, build performance, bundle size, accessibility compliance, and documentation completeness

Full Performance Report with Benchmarks →

We're expanding the component library from 11 to 35+ production-ready components, all built on Radix UI primitives with full Krado integration.

Target Release: @akrade/krado-ui v2.0.0 (March 2026)

Planned Components by Category:

• Form Controls (9 components): OTP Field, Password Toggle Field, enhanced Select with search, multi-step forms, file upload, date picker, time picker, color picker, rich text input
• Content Display (8 components): Tooltip, Hover Card, Avatar, Badge, Chip, Skeleton, Empty State, Stat Card
• Navigation (7 components): Dropdown Menu, Context Menu, Menubar, Navigation Menu, Breadcrumbs, Pagination, Drawer
• Dialogs & Feedback (4 components): Dialog, Alert Dialog, Toast, Popover
• Layout & Data (4 components): Scroll Area, Separator, Collapsible, Progress, Table, List

Key Features for v2.0.0:

• All components follow Radix UI composition patterns
• Full support for three-mode theming (default/headless/extended)
• Physics-based animations via Framer Motion
• Comprehensive test coverage (unit + accessibility)
• Interactive Storybook documentation
• TypeScript support with generated types

View Detailed Roadmap →

We are focusing on streamlining design-to-code workflows with enhanced automation and synchronization capabilities for the Krado token pipeline.

Key Objectives:

• Advanced token synchronization strategies
• Visual design analysis and automated token extraction
• Enhanced developer experience with robust management tooling
• Streamlined CI/CD integration and conflict resolution

View Phase 6 Overview →

Krado is currently maintained by the Akrade Design Ops Team as an internal project. We welcome feedback, bug reports, and feature requests from the community.

• Report Issues: GitHub Issues - Bug reports, feature requests, and questions
• Read Contributing Guide: CONTRIBUTING.md - Detailed guidelines for code contributions
• Review License: Apache 2.0 License - Understand usage rights and restrictions

Apache License 2.0

Copyright 2024-2025 Akrade Design Ops Team

You CAN:

• Use Krado commercially in your projects (including proprietary software)
• Modify the source code to fit your needs
• Distribute modified or unmodified versions
• Use Krado in products you sell
• Use in closed-source projects (no copyleft requirement)

You MUST:

• Include the original Apache 2.0 license text in distributions
• Include the copyright notice from the LICENSE file
• State significant changes you made to the code
• Include the NOTICE file if it exists

You CANNOT:

• Hold the authors or copyright holders liable for damages
• Use Akrade's trademarks without explicit permission
• Claim the software comes with warranties (it's provided "as is")

The Apache 2.0 license is permissive and business-friendly. You can integrate Krado into commercial products without worrying about viral copyleft provisions.

Full License Text →

• npm Package: @akrade/krado
• GitHub Repository: akrade/krado
• Component Library: Storybook Documentation
• Visual Testing: Chromatic Dashboard
• Child Packages:
  • @akrade/krado-ui - React components
  • @akrade/krado-ux - React hooks
  • @akrade/krado-tokens - Design tokens
  • @akrade/krado-dx - Developer experience toolkit
  • @akrade/krado-ai - AI prompt engineering engine

Built with ❤️ by Akrade