Xenon Design System · v1.0

The UI kit your AI can’t break.

Strict finite tokens, deterministic types, and zero guesswork for humans and agents. Mathematically polished with concentric curves and 1.00px hairlines—customize globally with two tokens, install via registry, and ship across Web and Expo.

$ npx xenon init

Act I · Architecture & Agent Ecosystem

Deterministic rails for the agent era.

AI models write brilliant logic but hallucinate atrocious CSS. Xenon gives models strict architectural rails: finite token scales, exhaustive types, and zero mystery blur.

01 / Agent Determinism

The UI kit your AI can’t break.

Prompting Cursor, Claude, or Copilot for UI usually results in 25 arbitrary Tailwind utility classes, hallucinated hex values, and 48px blur mud that breaks in production. Xenon replaces prompt roulette with rigid type contracts. The model physically cannot invent unauthorized styles.

Strict finite token grammar — no rogue hexes or blur

Exhaustive TypeScript types in *.types.ts with zero any

Mathematical concentricity baked directly into every surface

Prompt Execution

// Prompt: "Add an action button for confirming transfer"

Authorize Payment

</Button>

Live OutputToken-bound & type-checked

✓ 100% Type-Safe✓ 1.00px Hairline✓ Concentric Radius✓ Zero Hallucinations

02 / Architecture & Distribution

Own your code. Keep the foundation.

Traditional UI kits force a painful choice: NPM packages lock your UI in a closed black box where you can’t modify internal markup, while raw copy-paste templates rot over time without an upstream engine. Xenon solves this with a clean dual architecture.

@xenon/core · The Invariant Engine

Sub-pixel hairline math, concentric clamp formulas, spring kinematics, and headless logic remain centralized and unshakeable.

npx xenon add <primitive> · Registry Ownership

Drops fully typed, unminified source code directly into your repository. You own every line, customize freely, and never deal with vendor lock-in.

Select Registry PrimitiveCLI Registry

$ npx xenon add button

# Your Project Tree:

├── node_modules/@xenon/core (headless physics & math)

└── components/ui/

└── button.tsx (your editable source)

└── button.types.ts (100% strict types)

03 / Instant Customization

Two variables. Infinite coherent brands.

No 300-variable CSS theme files. No sprawling configuration files. Xenon is configured with strictly two global knobs: 1 Accent Hue and 1 Radius Stop Scale (0 Sharp to 6 Pill). Every child radius, hairline border, and focus state updates coherently across Web and Expo while preserving concentric curvature.

ACCENT COLOR (1 OF 6)lime

GLOBAL RADIUS STOPStop 5: 20px

Live System MorphConcentric Locked

⌘K

Concentric Geometryr = max(0, R − P)

Act II · Mathematical Foundations & Optical Invariants

Four physical invariants. Zero compromises.

Every curve, hairline, and motion curve is derived from mathematical first principles. No cosmetic gradients, no murky shadows, no visual clutter.

Act II · 01 / Concentric Geometry

No bee-stung corners.

When nested radii copy the parent boundary without subtracting inset padding, inner curves swell outward into optical eggs. Xenon computes true parallel arcs where the inner and outer curves share the exact same geometric center.

Outer (R)

28px

−

Padding (P)

10px

Concentric (r)

18px

Adjust Outer Radius (R)28px

Adjust Inset Padding (P)10px

Act II · 02 / Flat Depth Architecture

Flat depth. No muddy shadows.

CSS box-shadow turns AMOLED blacks into murky gray fuzz. Xenon builds depth purely from 1px hairline edges (StyleSheet.hairlineWidth on native) and stepped tone contrast.

Legacy Blur (σ)

24px

Hairline Edge

1.00px

Luminance Delta

+6.7%

Vector caliper inspection ready

Diffuse Gaussian blur · σ = 24px · Muddy halo bleed

1.00px Dirac vector step · StyleSheet.hairlineWidth · Zero GPU overhead

Act II · 03 / Fluid Kinematics

Fluid physics. Zero snap.

No UI state transition in Xenon is ever abrupt or instantaneous. Disclosures, switches, drawers, and active indicators glide through Apple-grade damped harmonic spring physics (stiffness 300, damping 30, mass 1).

Stiffness (k)

300

Damping (c)

Mass (m)

1.0

Press Scale

0.98

Release spring physics trace

0ms binary cliff · Δt = 0 · Infinite jerk (j → ∞)

Damped harmonic spring · k = 300, c = 30 · Exponential envelope decay

Act II · 04 / Directed Affordance

One sharp accent. Calm canvas.

90% calm neutral architecture, 10% laser focal draw. In accordance with Don Norman's signifier principle, interactive affordances must never compete for ocular saccades. One global acid accent draws the eye decisively to the primary task.

Active Accent Swatchlime

Canvas Depth

Attentional entropy · 6 competing ocular vectors · High cognitive load

Coherent focal vector · 90% neutral architecture · Directed affordance

Act III · Cross-Platform Parity

One token core. Identical contracts.

Every component ships with identical prop interfaces across Web React DOM and React Native Expo. Shared mathematical formulas live in @xenon/core.

Web (React DOM)

typescript

import { Button, ButtonGroup } from "@xenon/web";
<ButtonGroup size="md">
  <Button variant="outline">Inspect</Button>
  <Button variant="filled">Launch</Button>
</ButtonGroup>

Native (Expo React Native)

typescript

import { Button, ButtonGroup } from "@xenon/native";
<ButtonGroup size="md">
  <Button variant="outline">Inspect</Button>
  <Button variant="filled">Launch</Button>
</ButtonGroup>

Ready to get your weekends back?

Free forever for open source contributors, students, and personal builders worldwide. $5/month for commercial teams. Zero vendor lock-in.