Color

Our color system uses OKLCH — a perceptually uniform color space that ensures consistent lightness across hues. Colors are defined as CSS custom properties and mapped to Tailwind utility classes via shadcn's token layer.

Brand Palette

Three signature hues embody our duality. Green for Life, violet/pink for Virtual, and blue as the Bridge between them. These appear in our gradient title, wavy background, and accent moments.

Semantic Tokens (Dark Mode)

Semantic tokens are the bridge between brand colors and component usage. They are defined as CSS custom properties and consumed through shadcn's Tailwind mapping. Every component references semantics, never raw values.

Semantic Tokens (Light Mode)

Light mode tokens are applied via the html.light class. They maintain the same semantic names but shift values for readability on light backgrounds. Primary colors become darker; surfaces become lighter.

Status Colors

Status colors are consistent across modes — they're designed to be accessible on both dark and light backgrounds. In light mode, darker variants (--success, --warning) are used for better contrast against white surfaces.

Surface Scale

Surfaces layer from darkest (canvas) to lightest (elevated card) in dark mode, and from lightest to elevated in light mode. Each step is subtle — about 7% lightness change — creating depth without hard edges.

Typography

Our type system uses TT Rounds Neue — a geometric rounded sans-serif by TypeType Foundry — as the primary typeface. It pairs with a monospaced face for technical precision and a serif for rare prose moments. The system supports theme-level font overrides.

Type Scale

Base size is 0.825rem (~13.2px) — slightly smaller than the browser default to increase information density without sacrificing readability. The scale uses --text-scaling for user preferences and Tailwind's built-in classes.

Prose Headings (Rich Content)

Wordmark

The wordmark is a fixed asset, not a style you compose per product. Two faces carry one continuous colour sweep: a humanist Virtual against a geometric Life, washed by a slow tide of pink into green.

Anatomy

Three colours, each in exactly one contiguous zone, read left to right: pink, then foam, then green. Green lands on “Life” and never appears on the left. The zones drift, but they cannot trade places — a colour that reappears on the far side of the word is the failure mode this construction exists to prevent.

The gradient and the background clip live on the parent element. Both words paint through one background box, so the tide runs continuously across the join. Moving the gradient onto the two children is the single mistake that breaks the mark: it restarts the sweep at “Life” and you get two marks sitting next to each other.

Type pairing

“Virtual” is Lato, a humanist face; “Life” is TT Rounds Neue, geometric and rounded. The name's own contrast, made visible. This is the only place in the system where two faces meet inside one line — do not borrow the pairing for UI text.

Motion

omTide walks the whole boundary across the word and back over 22 seconds. It is ambient, not a loading state: nothing about it should read as progress or invite waiting. The two stop positions are registered custom properties so they interpolate; their initial values are the resting frame, which means the mark is complete and correct with no animation running at all.

Under prefers-reduced-motion the tide keeps running, switched to omTideCalm: about a third of the travel, at 40s instead of 22s. It is not stopped, because nothing in this animation moves — the letterforms are fixed and only the colour beneath them shifts. The vestibular trigger the setting exists to defuse is displacement through space, not hue, and this file already treats looping animations that way elsewhere: calm them, don't kill them. Surfaces that genuinely need stillness opt in with .vl-wordmark-static, which stops it outright.

Usage

<span class="vl-wordmark">
  <span class="vl-wordmark-virtual">Virtual</span><span class="vl-wordmark-life">Life</span>
</span>

Size it by setting font-size on .vl-wordmark; everything else scales from there. It is one line by design and never wraps. Add .vl-wordmark-static for screenshots, email and print.

Spacing

Spacing follows Tailwind's 4px base grid. We favor a constrained set of values for consistency: the 4-8-12-16-24-32-48 scale handles virtually all layout needs.

Spacing Usage Guidelines

Border Radius

Rounded corners are fundamental to VirtualLife's soft, approachable feel. The base radius (--radius: 0.625rem) ripples through the system via calc() expressions. Themes can override the base to shift the entire system's roundness.

Radius Assignment

Elevation

Elevation is communicated through shadow depth and backdrop blur. In dark mode, shadows are more subtle and surface lightness shifts do most of the layering work. The glass effect replaces heavy drop shadows for most surfaces.

Glass & Transparency

Glass morphism is VirtualLife's signature surface treatment. Translucent backgrounds combined with backdrop blur create depth and visual interest while letting the wavy background pattern breathe through the interface.

Glass Recipes

The app canvas

The wave fan is the system default behind every content area, not a decoration you opt into. Three stacked layers: the eleven-path wave fan, two low-opacity brand auras bleeding in from opposite corners, and Surface 0 underneath. It is available as one token — --canvas-app — and that is how content areas get it.

The wave pattern is VirtualLife's most distinctive visual element. It represents the flowing connection between human and AI creativity — organic curves rendered with digital precision.

Specimens

Tokens

Rules

Theming

VirtualLife supports swappable themes that override the semantic token layer without changing component structure. Each theme is a JSON file with light/dark CSS variable overrides plus optional font and radius changes.

Theme Architecture

Available Themes

Light & Dark Mode

Dark mode is the primary design surface — optimized for immersive creative work where generated images pop against deep backgrounds. Light mode is a first-class alternative, not an afterthought. The .dark class on <html> toggles the active variable set. Each theme provides both dictionaries.