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

Wrap your application root with XenonProvider to activate automatic theme, accent, and radius coordination:

app/layout.tsxtypescript

1import { XenonProvider } from "@xenon/web";
2
3export default function App({ children }: { children: React.ReactNode }) {
4  return (
5    <XenonProvider theme="dark" accent="lime" radius={3}>
6      {children}
7    </XenonProvider>
8  );
9}

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 { XenonProvider } from "@xenon/web"; 2 3export default function App({ children }: { children: React.ReactNode }) { 4 return ( 5 <XenonProvider theme="dark" accent="lime" radius={3}> 6 {children} 7 </XenonProvider> 8 ); 9}