THE REGISTRY — HOW THE FIRE IS BUILT

Style Guide.

The record of the Air & Ember design system: night forest meets retro-future terminal. Every color, face, and component on the site is registered here.

01 — PIGMENTS

The palette.

Pulled from the forest at night: ink sky, pine shadow, moonlit cream, and a live ember in three temperatures, cooled by a breath of night air.

INK--ink
#080511

PINE--pine
#172C16

PINE DEEP--pine-deep
#0B170B

CREAM--cream
#F4E7C5

EMBER--ember
#FF7A2F

EMBER DEEP--ember-deep
#A74918

EMBER GLOW--ember-glow
#FFB347

AIR--air
#9FD8CB

02 — VOICES

The typefaces.

Five voices around the fire: one to declare, one to explain, one to insist, one to compute, and one to whisper in the margins.

PLAYFAIR DISPLAY
--font-display
HEADLINES & TITLES

The forest meets the mainframe.

ZT NEUE RALEWE MED
--font-body
BODY COPY

Wind carries the idea. Fire makes it real.

ZT NEUE RALEWE XBD
--font-bold
BUTTONS & EMPHASIS

No salesmen. Just partners.

DIGITAL SYSTEM
--font-crt
EYEBROWS, TAGS & TERMINALS

> IGNITING EMBERS ........ OK

MONDAY COFFEE
--font-hand
MARGIN NOTES & WHISPERS

breathe in, scroll down

03 — HARDWARE

The components.

BUTTONS

Ember Button ↠ Ghost Button ↓ CARD TAG / CRT PILL

ELEMENT CARD

🔥

Element Card

Tilts toward the cursor, glows where you point. Used for services, values, and facts worth a frame.

EMBER / FORGE

FORM FIELDS

CRT TERMINAL

> STYLE_GUIDE.SYS ............. OK

> GREEN PHOSPHOR #7DFF9A ...... OK

> ERROR TONE #FF6B5E .......... DEMO

> SCANLINES + ROVING GLOW ..... OK

> BOOTS ON SCROLL-INTO-VIEW ... OK

> REGISTRY COMPLETE ........... SAVED█

A&E TERMINAL 1979→2099

04 — LAWS OF THE FOREST

Motion & rules.

🌬️

Ambient Layers

Every page carries the ember canvas, film grain, cursor glow + ring, and the flame scroll-progress track. Particles thin out on touch devices.

EMBER-PAGES.JS

🔥

Reveals

Content enters with .reveal + data-reveal="up|left|right", driven by IntersectionObserver — transform and opacity only.

SCROLL / OBSERVER

🧭

The Trail Map

Site nav lives behind the matchstick. Light spreads from the strike, waypoints hike in, and "YOU ARE HERE" marks the current page.

TRAILNAV.CSS / .JS

♿

Reduced Motion

Every animation collapses under prefers-reduced-motion: cursor restored, grain removed, reveals visible, information never lost.

A11Y / ALWAYS