Build consistent UIs
with Kuarls DS.
A lightweight, token-based CSS design system for building premium, dark-themed interfaces. No build steps required.
Why Kuarls DS
The Problem
AI is changing who builds products and how they're built. The linear handoff from design to development is collapsing—PMs, designers, and developers now work side by side, and AI tools are accelerating the process. But speed without structure leads to fragmented UIs, generic results, and brand inconsistency.
Design Systems as the Context Coefficient
As Figma's research puts it: "The clearer and more complete a design system is, the more likely AI is to produce on-brand results." Design systems are the connective tissue that guides AI tools toward better outcomes. They codify taste, craft, and brand identity so that every new surface—built by humans or AI—feels native and intentional.
AI as a New Consumer
Historically, designers and developers were the only consumers of design systems. Today, AI agents are a third consumer—reading your tokens, parsing your component documentation, and generating UIs from those same building blocks. The details that once felt optional—clear usage guidelines, complete documentation, and explicit links between design and code—become essential for keeping outputs on-brand and production-ready.
How Kuarls DS is Built for This
Kuarls DS is designed from the ground up to be consumed by both humans and AI agents:
Machine-Readable Tokens
Design tokens stored in W3C DTCG JSON format alongside CSS variables, so any agent can parse and apply spacing, colors, and typography without guessing.
LLM-Readable Documentation
Every component includes a .md
file with semantic HTML examples, usage guidelines, and variant descriptions
optimized for AI context windows.
Modular Architecture
Components are grouped by function (forms,
feedback, overlay, data-display, navigation) with predictable naming
(kds- prefix, BEM convention) so AI can compose layouts
confidently.
Zero Build Step
Pure CSS with no bundler, preprocessor, or
framework dependency. Any agent can include kuarls.css and start
building immediately—no toolchain setup required.
The Vision
Give an AI agent the design.md file, point it to the component documentation,
and it can produce consistent, brand-aligned UIs out of the box. No guessing, no
misinterpretation—just structured context that bridges the gap between design intent and
code output. That's the promise of an agent-ready design system.
Installation
Simply include the stylesheet in your project. No npm, no build process.
Token-Based
Built on a comprehensive set of CSS variables for colors, spacing, and typography.
Accessible
Components are designed with ARIA attributes and keyboard navigation in mind.
Dark Mode First
Native dark mode support with a refined, high-contrast palette.