v2026.08.17 — Theme Studio, AI Agent Guidelines, and Component Refinements

Interactive OKLCH palette editor, standardized machine-readable context endpoints for AI assistants, and refinements to Stat and Switch primitives.

Tuning color systems across complex dashboards is frustrating when perceptual contrast shifts unexpectedly between different hues. This release introduces the interactive Theme Studio, dedicated machine-readable context endpoints for AI coding assistants, and structural refinements to the Stat and Switch components.

Traditional RGB and HSL models distort lightness when hue changes; a pure yellow appears significantly brighter than a pure blue at the same nominal lightness. OKLCH fixes this by matching how the human eye actually perceives luminance.

Predictable contrast. Consistent legibility.

Interactive Theme Studio

The Theme Studio (/theme) provides a live workbench for configuring and previewing color palettes built on the perceptual OKLCH color space:

OKLCH Palette Tuning: Adjust primary hue, chroma multiplier, surface lightness, and border contrast in real time.
Preset Palettes: Instant reference presets including Modern Violet, Oceanic Cyan, Emerald Forest, Rose Amber, and Slate Minimal.
Live Component Testing: Real-time preview panels rendering stat cards, tables, charts, buttons, form controls, and alerts under the active color scheme.
Direct CSS Variable Export: Generate CSS custom property declarations, JSON token objects, and StyleX overrides with a single click.

Machine-Readable AI Agent Guidelines

To improve code generation accuracy across modern AI coding tools (Cursor, Windsurf, Claude, Copilot, Antigravity, and ChatGPT), I added dedicated context endpoints:

/AGENTS.md: Core conventions, React Aria event signatures (onPress over onClick), compound patterns, and common anti-patterns.
/llms.txt: Concise documentation index and package quickstart adhering to the standard llmstxt.org specification.
/llms-full.txt: Consolidated single-file reference containing complete API signatures and code recipes for every component.
/docs/llms: Setup guide with ready-to-use configuration rules for popular AI IDEs.

Providing structured, unambiguous context prevents hallucinated prop names and saves developers from correcting repetitive import mistakes.

Stat Component

The Stat component now uses a composable structure:

Surface Variants: Added support for default, flat, glass, and elevated backgrounds.
Slot Composition: Dedicated slots for icon, description, structured headers, and custom children.
Trend Indicators: Upgraded trend badges with directional indicators and semantic token mapping (trendUp, trendDown, trendNeutral).

Switch Component

Kinematics & Alignment: Refined track padding and thumb translation with logical property alignment.
Focus Rings: Accessible keyboard focus rings complying with WCAG 2.2 contrast standards.

Typography Scaling

Replaced fixed rem font sizes with responsive --brand-font-scale multiplier tokens in tokens.stylex.ts, enabling fluid dashboard typography scaling.

Documentation Updates

Multi-Package-Manager Tabs: Updated documentation code examples with one-click switching between bun, pnpm, npm, and yarn.
Visual Polish: Refined navigation hierarchy, terminal code blocks, and layout spacing across documentation pages.

On Precision and Predictability

A good tool gets out of the way. It gives you immediate feedback without making you guess what CSS properties were altered behind the scenes.

By pairing perceptual color math with explicit agent context rules, the system becomes more reliable for humans and machines alike¹.

Precision in the foundation creates freedom at the surface.

OKLCH color computations run client-side via native CSS variables without runtime JavaScript math dependencies, maintaining zero bundle overhead. ↩