ZeyOS XENON DESIGN SYSTEM

Dependency-free UI for composable business applications

Xenon brings foundations, accessible components, enterprise patterns, and application layouts into one shared language. Zx is its plain-JavaScript implementation — no framework, no build step, and no runtime dependencies.

Explore the docs Learn more about ZeyOS

System architecture

More than a component catalogue

Xenon unifies shared foundations, reusable controls, task-level patterns, and layout guidance into one coherent language for modern front ends. It was developed through demanding ZeyOS workflows, while its components and contracts remain product-agnostic.

01

Foundations

Semantic tokens, typography, spacing, motion, icons, themes, and accessibility rules.

Explore foundations

02

Components

Keyboard-complete inputs, overlays, navigation, forms, and data controls with one consistent API.

Browse components

03

Patterns

Guidance for finding, editing, approving, filtering, and communicating in dense business workflows.

Read the guidance

04

Application layouts

Complete application templates — mail, issues, a knowledge base, invoicing, a CRM — and the screen patterns inside them.

See layouts

Design principles

Coherent, adaptive, and made for real work

Every Xenon decision should reduce relearning across modules while keeping high-volume work fast. The system grows from documented behavior, not isolated visual treatments.

Durable by default

Plain ES2022 modules with no runtime package, bundler, or framework to maintain.

Inclusive by default

Keyboard-complete controls, semantic markup, and explicit screen-reader behavior.

Adaptive, not fragmented

Semantic light and dark themes, token-driven spacing, and responsive behavior across the same API.

Composed in layers

Foundations lead to components, patterns, and layouts instead of one-off screens.

Task and role focused

Dense enterprise flows prioritize the user’s next decision, not decorative chrome.

Incrementally adoptable

Current DOM and UI seams let existing application logic move one surface at a time.

Adoption

Start with the surface you need

Xenon does not prescribe a router, framework, or data layer. Use Zx directly, compose complete application shells, or connect the optional ZeyOS schema bindings.

Build a new surface

Load one stylesheet and import only the plain-JavaScript controls the screen needs.

Getting started

Bind existing schemas

Generate tables, forms, and pickers while keeping current records and service calls.

ZeyOS bindings

Compose an application shell

Combine navigation, launch, account, workspace, and data surfaces without adopting a framework.

Application layouts

Live components

Real components, running right here

This showcase imports Zx directly from source. Filter, sort, pick a date, and fire a toast — then switch the theme in the header and watch every token follow.

Toggle

Workflow is enabled.

Filterable select

Selected: Open

Datebox

Choose an invoice date.

Message

Floating messages share the same semantic theme.

Sortable table

Quick start

Use the Zx implementation directly

Import Xenon’s components in a modern application, or drop the Zx global bundle into an established ZeyOS screen. Both expose the same dependency-free API.

npm install @zeyos/zx or load dist/zx.global.js straight from jsDelivr — no install at all.

ES module

<link rel="stylesheet" href="/assets/zx.css">
<script type="module">
  import { Toggle } from '/assets/zx.esm.js';

  const toggle = new Toggle(null, {
    label: 'Notifications'
  });
  document.body.append(toggle.toElement());
</script>

Global script

<link rel="stylesheet" href="/assets/zx.css">
<script src="/assets/zx.global.js"></script>
<script>
  const toggle = new zx.Toggle(null, {
    label: 'Notifications'
  });
  document.body.append(toggle.toElement());
</script>

@zeyos/zx: The components, as ES modules.
@zeyos/zx/global: The same API on window.zx, for a classic script tag.
@zeyos/zx/zeyos: Tables, forms, and pickers generated from a live ZeyOS schema.
llms.txt: The machine-readable reference a coding agent reads first.

Getting started guide Browse the components