Container
.vapor-site
Top-level page shell. Max-width constraint and vertical padding.
Vaporsoft Theme
Component Reference
Reusable surfaces, containers, and layout patterns from the Vaporsoft design system.
Accent
Typography
Display Syncopate
Headings Space Grotesk
Body Manrope
Accent Zen Kaku Gothic New
Surfaces
Dark #07080b
Light #f2ede6
Corners Rotated by depth
Catalogue
Classes and containers.
Surface
.vapor-frame
Primary bordered surface with corner brackets. Used for hero and ledger blocks.
Surface
.vapor-panel
General-purpose card or module container with corner brackets.
Layout
.vapor-hero
Two-column hero layout. Pairs .vapor-copy with .vapor-aside.
Layout
.vapor-card-grid
Three-column content grid for compact information blocks.
Layout
.vapor-band
Two-column callout section pairing copy with a visual element.
Data
.vapor-ledger
Stacked metadata rows for tokens, specs, or project information.
Element
.vapor-button
Action element. Variants: --primary (carmine) and --secondary (neutral).
Element
.vapor-rule
Horizontal divider with centered kanji accent text.
Variant
.vapor-light
Theme override. Converts all surfaces and text to light-mode presentation.
Utility
.vapor-noise
Radial gradient overlay for atmospheric texture on dark surfaces.
Utility
.vapor-signal-map
Decorative circuit-board visual with routes, nodes, and pulse animation.
Live Preview
Surfaces in context.
Sample Hero
Primary page composition.
Frame + copy + aside panel. Corner brackets rotate at each nesting depth.
.vapor-panel
Compact module
Reusable surface for service notes, features, or process items.
.vapor-card-grid
Grid parent
Three-column layout with consistent spacing.
.vapor-ledger
Spec module
Technical metadata rows rather than marketing bullets.
.vapor-band
Two-column section pattern.
Pairs editorial copy with structured visual content on the right.