Xenon UI Architecture

A minimalistic, closed-source UI kit engineered for web (React DOM) and React Native (Expo) from a single token core and two bespoke renderers.

v1.0.0 ArchitectureApple HIG StandardsHairline Precision

Core Philosophy

Xenon is a quiet design system. It earns trust through geometry, negative space, and mathematical restraint instead of decoration. Depth is achieved purely through 1px hairlines and subtle surface tone steps.

1. Hairline Clarity

Every border and divider is strictly 1px. Focus states hug the 1px perimeter smoothly without detached outlines.

2. Flat Depth

Zero shadows. Zero gradients. No cards inside cards. Surfaces step up gracefully from AMOLED black.

3. Concentric Geometry

Shapes nest with mathematically derived radii: R_child = max(0, R_parent - padding).

4. Apple-Grade Motion

Zero snappy changes. Every state disclosure glides through 280ms cubic-bezier and physics spring curves.

Banned Invariants

Xenon enforces non-negotiable architectural constraints across all components:

Banned Pattern	Required Alternative
box-shadow, drop-shadow	1px hairline border, stepped surface tones
linear-gradient, mesh blobs	Flat surface tone hierarchy (--x-surface-0 to 2)
Emoji or raw ASCII chrome	Phosphor Thin icons via Xenon Icon wrapper
Card nested inside card	Hairline dividers and optical negative space
Font weights >= 500	Light typography (200, 300, 400 only)
Instant snappy transitions	Apple-grade 280ms fluid ease and spring dynamics

Quickstart

Run the initializer inside any React 19 app (Vite or Next.js App Router). It installs the kit, imports the stylesheet, wraps your root in XenonProvider, and writes AGENTS.md so coding agents follow the design rules.

bash

npx @xenon-kit/cli init

Or set it up by hand:

bash

npm install @xenon-kit/web @phosphor-icons/react

app/layout.tsxtypescript

1import "@xenon-kit/web/styles.css";
2import { XenonProvider } from "@xenon-kit/web";
3
4export default function App({ children }: { children: React.ReactNode }) {
5  return (
6    <XenonProvider defaultTheme="dark" defaultAccent="lime" defaultRadius={5}>
7      {children}
8    </XenonProvider>
9  );
10}

For AI Agents

Point your coding agent at these machine-readable endpoints. The design rules are as binding as the components, so agents should read them before writing UI.

llms.txt	Index: setup, hard rules, and every component at a glance.
llms-full.txt	Full specification with the design guidelines and complete prop tables.
/r	JSON registry. Each component at /r/<name>.json with props, accessibility, and usage.

Example prompttext

Use the Xenon UI kit to build a settings page.
Start by reading https://xenon.hi-ashwin.xyz/llms.txt

Banned Pattern

Required Alternative

box-shadow, drop-shadow

1px hairline border, stepped surface tones

linear-gradient, mesh blobs

Flat surface tone hierarchy (--x-surface-0 to 2)

Emoji or raw ASCII chrome

Phosphor Thin icons via Xenon Icon wrapper

Card nested inside card

Hairline dividers and optical negative space

Font weights >= 500

Light typography (200, 300, 400 only)

Instant snappy transitions

Apple-grade 280ms fluid ease and spring dynamics

1import "@xenon-kit/web/styles.css"; 2import { XenonProvider } from "@xenon-kit/web"; 3 4export default function App({ children }: { children: React.ReactNode }) { 5 return ( 6 <XenonProvider defaultTheme="dark" defaultAccent="lime" defaultRadius={5}> 7 {children} 8 </XenonProvider> 9 ); 10}