Void Energy UI

The problem

AI now writes frontend. Nobody solved what comes after.

01

Output ships. Codebases decay.

AI builds the page. Eighteen months later, nobody can change it without rewriting it.

02

Every AI app looks the same.

Generic palettes, spacing, motion. AI generates against nothing in particular.

03

Output ships faster than review.

AI velocity outruns human review. Unreviewed code lands in production, and the consequences land with it.

04

Frontend still needs specialists.

AI multiplies how much frontend gets shipped. The team that has to maintain it doesn't change shape.

Atmosphere generator

Create your own atmosphere

Type a vibe, get a complete atmosphere — AI-powered generation paired with a full token customizer.

Live proof

Your Components. Our Materials.

These elements are standard HTML — buttons, inputs, cards. Switch the atmosphere, then scale the density: the markup never changes, the system does.

Compact suits data-heavy dashboards; Airy suits reading. Every gap, padding, and control height re-derives from one density coefficient. Picking a density applies it across every atmosphere — overriding densities that brand atmospheres declare for themselves — and Default hands that control back to the atmosphere.

Surface Card

This card uses surface-raised — a floating surface with physics-aware shadows, borders, and optional backdrop blur.

Primary text Secondary text Tertiary text

Success Error Premium System

Interactive Elements

Auto-play

Shuffle

Every button, input, and chip reads from the same CSS custom properties. The atmosphere changes the values — the components never change.

Active physics: glass — Translucent surfaces, glow shadows, spring easing, backdrop blur. Each atmosphere defines its own physics preset and typography.

No re-render. No theme flicker. No framework involvement. The active state lives on <html> as data attributes, set by an inline script from localStorage before first paint.

Atmosphere catalog

One system. 146 atmospheres.

Five starters cover every physics-and-mode combination; the catalog interprets iconic brand languages on top — click a tile to step into that atmosphere.

Editorial studies of public design language — not affiliated with or endorsed by the brands they reference.

Architecture

Three layers. One contract.

Take the engine alone, take the full system, or let your AI tools read the contract directly — each layer stands on the one below.

L0 · THE ENGINE

Tokens + physics, framework-free

A Tailwind v4 preset and a small runtime. Atmosphere, physics, mode, and density are four runtime axes that drop behind any component library you already use.

import { setAtmosphere } from
  '@void-energy/tailwind/runtime';

setAtmosphere('frost');
// every component repaints — no re-render

L1 · THE SYSTEM

The full design system

A Svelte 5 component library on the same tokens — 55 cataloged components, shipped site chrome (navigation, modals, toasts), charts, and physics-aware transitions.

<div class="surface-raised p-lg
            flex flex-col gap-md">
  <h3>Revenue</h3>
  <p class="text-dim">Up 12% this quarter.</p>
  <button>Report</button>
</div>

L2 · THE INTERFACE

The contract AI tools read

Agent-readable rules, a component registry, and an MCP server. The five laws are enforced where AI actually works — at generation time.

## Law 2 — Token Law
No raw values (px, #hex, rgb).
Only semantic tokens.

CORRECT: color: var(--text-main);
WRONG:   color: #ffffff;

Pick your entry point

Both tiers are free. L0 is the Lite path — same tokens, same atmospheres, your components.

	@void-energy/tailwind (L0)	void-energy (L1)
Framework	Any — React, Vue, plain HTML	Svelte 5 + Astro
Ships	Tokens, 3 physics presets, the full atmosphere catalog + AI-generated custom atmospheres, runtime switching	Everything in L0, expressed as a full component system
Components	Bring your own — shadcn / Radix / Mantine bridges included	55 cataloged primitives + shipped site chrome
AI integration	Class registry, build recipe, MCP resources	Full agent shell — rules, registry, exemplars, MCP server
Price	Free — source-available (BSL)	Free — source-available (BSL)

Beyond the free tiers, two premium packages ship the immersion layer: kinetic-text (37 narrative text effects) and ambient-layers (an ambient mood + environment-grading engine). Building a platform? Get in touch.

Enforcement

Compile time. Merge time. Generation time.

The five laws aren't a style guide — they live in the type system, the check chain, and the agent protocol. Each layer catches what the others miss.

Compile time

Off-system values don't type-check.

voidEngine.setPreferences({
  density: 'spacious'
});
//       ~~~~~~~~~~~
// Type '"spacious"' is not assignable
// to type 'VoidDensity'.

Merge time

The check chain gates every PR.

$ npm run check
✓ check:atmosphere-spec
✓ check:counts
✗ check:registry
  Selector.svelte drifted from
  component-registry.json
✗ 1 gate failed — merge blocked

Generation time

Agents validate before they write.

> void_check_class('text-sm')
INVALID — numeric type scale is
not in the vocabulary.
Use text-caption / text-small.

> void_check_class('z-modal')
INVALID — no such z token.
Semantic names: z-header,
z-dropdown, z-overlay…

Style-guide enforcement collapses at AI velocity. Types and gates don't.

How It Works

Register an atmosphere, switch it at runtime, and let your styles read the tokens.

Register & Switch

// Register a custom atmosphere
voidEngine.registerTheme('brand', {
  mode: 'dark',
  physics: 'glass',
  palette: {
    'bg-canvas':      '#060816',
    'bg-surface':     'rgba(20, 24, 44, 0.72)',
    'energy-primary': '#6ee7ff',
    'text-main':      '#f8fafc',
  }
});

// Switch — every component adapts instantly
voidEngine.setAtmosphere('brand');

Your Component Styles

/* Your existing CSS — just use the tokens */
.card {
  background: var(--bg-surface);
  border: var(--physics-border-width) solid
    var(--border-color);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-float);
  color: var(--text-main);
}

.card:hover {
  border-color: var(--energy-primary);
  box-shadow: var(--shadow-lift);
}

What You Get

5 built-in atmospheres with complete palettes
3 physics presets (glass, flat, retro)
Runtime theme engine with scoped & temporary themes
Density scaling (five steps, Compact through Airy)
Token pipeline & build tooling
Physics-aware transitions & animations

What You Build

Token aliasing — map your CSS properties to Void's semantic tokens (--bg-surface, --energy-primary, etc.)
Component style mapping — update your component styles to read from CSS custom properties instead of hardcoded values
Custom atmospheres — define palettes that match your brand identity using the token contract

Adoption

L0 drops behind whatever you already ship.

React + shadcn / Radix / MUI

Keep your components. Gain runtime atmosphere, physics, and density. Zero rewrite.

@import 'tailwindcss';
@import '@void-energy/tailwind/theme.css';
@import
  '@void-energy/tailwind/bridges/shadcn.css';

Vue + Element / Naive UI

Same engine. Same atmospheres. Same constraint surface.

import { setAtmosphere } from
  '@void-energy/tailwind/runtime';

setAtmosphere('graphite');

Plain HTML + vanilla CSS

No framework required. The engine is CSS custom properties plus three data attributes.

<html
  data-atmosphere="frost"
  data-physics="glass"
  data-mode="dark"
>

The Svelte component library on top (L1) is an upgrade path, not a prerequisite.

Interactive Sandbox

Try the components below. Modals, toasts, animated chips — all reacting to the active atmosphere.

Feedback Patterns

Chip Variants

Spacing

Typography

Color

Style

Tag

Downstream

One substrate. Many products.

Once first-try output is structurally reliable, a whole surface of products becomes buildable on the same architecture.

Agent-built frontend, enforced

Point any coding agent — Claude Code, Cursor, Copilot — at the system. The rules, the component registry, and the MCP server are the interface; the output composes against the five laws and passes the same gates as a human PR. This page is the proof: it was composed by an AI agent inside the system it describes.

Multi-brand & white-label SaaS

Atmosphere swap per customer at runtime. One codebase, unlimited brand identities.

Expressive interfaces

Kinetic typography and ambient mood layers for the moments that need to perform — marketing heroes, music and lyrics, social reactions, storytelling.

Accessibility as a structural primitive

Density, text scale, and reduced motion are first-class, user-tunable axes — not afterthoughts.

Internal tools at scale

Admin panels and CRUD surfaces composed by agents against the registry — constraint-respecting on the first try, themed to match the rest of the stack.

Contact

Talk to us.

Available for license, integration, or partnership. You've seen it live — every section of this page runs on the system it describes.