For the agent-readable index of this site, see /llms.txt.
Figma
Figma is the canvas-tool that defined modern collaborative design. The brand's identity has been carried more by what the product does than by what the logo asserts — a multi-user vector editor that runs in the browser, where the brand-mark sits at the corner of a toolbar most users encounter for hours per day rather than at the top of a landing page they scroll through once. The four-color rainbow mark (cyan, red-orange, magenta, violet, green) reads as visual signature without ever dominating the chrome.
Dark Edition
Figma's in-product dark register — cool slate-graphite canvas carrying the cyan #1abcfe and red-orange #f24e1e directly from the rainbow logo mark into the editor chrome, without flooding the chassis with the full four-color identity. Tool-canvas tightness held through the brand profile (2-8px radii, snappy 140ms canvas-tool ease, panel-compact density at 0.94) — the chrome reads as the designer-at-work voice: professional vector tool with brand-mark colors as accent and the canvas inside it left to whatever artwork it hosts. Distinguished from framer-canonical-dark (the launch slate's other design-builder register) by motion signature and chromatic identity: Figma asserts snappy canvas-tool ease where Framer asserts spring physics, and the cyan + red-orange rainbow-mark here reads distinct from Framer's sky-blue monochrome. A study in how a design-builder brand carries its rainbow identity into the working surface without competing with the artwork the user came to make.
Install at runtime
Run this snippet in any browser console where Void Energy is loaded (or paste it into your app's bootstrap). The atmosphere registers with the engine and renders immediately as a temporary preview — it persists in the visitor's preferences only if they Apply it site-wide.
Physics: flat
Mode: dark
Density: x0.94
Live preview
A believable product moment rendered against the active atmosphere. Hover, focus, and toggle the controls — typography weight, button tracking, corner radii, and motion timing all carry the brand's identity.
Workspace settings
Welcome back
Configure how you collaborate, then jump back into the channels you were active in.
Search by name or email — Combobox with descriptions.
Recent channels
Typography
Headings, body, and signal text rendered against the active atmosphere.
Typefaces
The active heading and body families — brand override first, atmosphere default second.
Heading · --font-heading
Inter
Body · --font-body
Inter
Heading scale
Six levels, each picking up the brand's weight, tracking, and transform tokens.
h1 — Figma
h2 — Dark Edition
h3 — Subsection
h4 — Section header
h5 — Subheading
h6 — Minor subheading
Body & secondary text
Standard reading copy and supporting metadata.
Paragraph — body typography, dim color. Standard readable text for descriptions and content.
Small — small typography, mute color. Used for captions and metadata.Caption — caption level utility class.
Brand overrides
Beyond the typeface, brand profiles can tune weight, tracking, and text-transform per
role. Display covers h1/h2, Heading covers h3/h4, Body covers paragraphs and small
text, Button covers all .btn-* labels. Anything not declared
inherits from the atmosphere's defaults.
Supported overrides & this brand's values
A brand profile can override 4 weights, 4 trackings, and 3 transforms (Body has no transform — prose never gets uppercased).
- Display weight (h1, h2) ·
--weight-display… - Display tracking (h1, h2) ·
--tracking-display… - Display transform (h1, h2) ·
--text-transform-display… - Heading weight (h3, h4) ·
--weight-heading600 - Heading tracking (h3, h4) ·
--tracking-heading… - Heading transform (h3, h4) ·
--text-transform-heading… - Body weight (p, small) ·
--weight-body… - Body tracking (p, small) ·
--tracking-body… - Button weight (.btn-*) ·
--weight-button… - Button tracking (.btn-*) ·
--tracking-button… - Button transform (.btn-*) ·
--text-transform-button…
Palette & shape
The color palette, corner geometry, and motion curves under the active atmosphere. Atmospheres change the values; the architecture never moves.
Energy — Brand axis
The two colors that change most per atmosphere. Primary drives CTAs, focus rings, and headings. Secondary tints hovers, press feedback, toggle thumbs, and the selected channel in the live preview above.
energy-primaryenergy-secondarySurfaces
Background layers from the depth model. Canvas is
the floor — sunk and spotlight are its recess and ambient variants. Surface is where floating elements live. Every tile carries --border-color at var(--physics-border-width), so the border tier is
visible on each outline.
bg-canvasbg-sunkbg-spotlightbg-surfaceSignal — Text hierarchy
Three emphasis levels for information hierarchy.
Color extensions
Two additional palettes layered on top of the five-layer system. Neither is a brand-axis variable, so they don't change much per atmosphere.
Semantic — success, error, premium, and system carry the same meaning on every brand. Most brands inherit the defaults; the rare override applies when a brand's primary hue would clash (e.g. a green primary forces a different success green).
Positive outcome
Destructive, failure
Attention, cost
Informational
Data palette — 8 categorical slots derived from primary
Hue-rotated 45° per step from --energy-primary in
OKLCH. Cool atmospheres yield cool-leaning palettes; warm yield
warm-leaning. Use for chart series, chips, tags, kanban columns,
avatar fallbacks, and calendar categories — anywhere
unrelated-by-severity data needs distinct identity. Not for severity (data-3 means
"third slot," not "success"). Auto-contrast handles text color on
any bg-data-* tile.
data-1data-2data-3data-4data-5data-6data-7data-8Radii — corner geometry
All five radius levels, rendered with the active atmosphere's tokens. Brand-overridden values are emphasized.
--radius-sm 2px--radius-md 4px--radius-lg 6px--radius-xl 8px--radius-full …Motion
Brand profiles can also override the system's speeds and easing
curves. The square below uses --speed-slow and --ease-spring-snappy — both carried by the brand axis
when set, otherwise inherited from the active physics preset. Hover the demo to play.
Supported overrides & this brand's values
A brand profile can override 3 speed levels and 4 easing curves. Anything not declared inherits
from the active physics preset (glass / flat / retro). Cascade
delays (--delay-cascade, --delay-sequence) are physics-only and not part of
the brand axis.
- Fast ·
--speed-fast140ms - Base ·
--speed-base… - Slow ·
--speed-slow… - Flow ·
--ease-flow… - Spring (gentle) ·
--ease-spring-gentle… - Spring (snappy) ·
--ease-spring-snappycubic-bezier(0.2, 0, 0, 1) - Spring (bounce) ·
--ease-spring-bounce…