For the agent-readable index of this site, see /llms.txt.

Void Energy

The frontend engine AI builds inside of.

Components, theming, and guardrails that hold as models change and codebases grow.

2 Modes 3 Physics Presets Runtime Theming Density Scaling

Switch the atmosphere — every element on this page adapts.

Create Your Own

Type a vibe, get a complete atmosphere. AI-powered theme generation.

Physics

Mode

Glass requires dark mode. Leave on Auto to let the AI decide.

— or build from your brand colors —

Primary (brand color)
Customize Colors
Identity
Presets

Physics

Mode

Glass requires dark mode.

Backgrounds
Canvas
Base page color
Spotlight
Gradient glow over Canvas. Match both for a plain look
Surfaces
Surface
Cards, panels, floating elements
Sunk
Recessed areas, inset containers
Energy & Border
Primary
Secondary
Border
25%
Text
Main
Dim
Mute
Semantic Colors
Premium
Credits, badges, caution
System
AI features, platform alerts
Typography
Brand Character

Shape the chrome character — spacing density and corner softness. Defaults inherit from the system.

Density 1.00× (default)
Compact Airy

Roundness

Get early access to the full system.

Building a platform? Contact us

Your Components. Our Materials.

These elements are standard HTML — buttons, inputs, cards. Void Energy applies the surface physics, palette, and typography. Switch the atmosphere and watch the same markup transform.

Try an 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

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.

Density Scaling

Every spacing value flows through a global density coefficient. One setting — every gap, padding, and control height adapts.

Density

Sample Card

This card's padding, gaps, and control heights all scale with the density setting above. The content stays the same — only the whitespace changes.

Primary text Secondary text Tertiary text

Use Cases

  • Compact — data-heavy dashboards, admin panels, tables with many rows
  • Standard — balanced default, general-purpose applications
  • Relaxed — reading experiences, accessibility, content-focused layouts

Density is a user preference, independent of the active atmosphere. All atmospheres respect the same density setting.

How It Works

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 (compact / standard / relaxed)
  • 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

Interactive Sandbox

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

Feedback Patterns

Chip Variants

Spacing

Typography

Color

For developers and teams. We'll notify you when it's ready.

Building a platform? Contact us

From the makers of CoNexus — an AI-powered interactive storytelling platform where the UI adapts to the mood of the story.

Explore the Component Library