Far From Equilibrium

The Design System

A living reference for visual consistency across the seasonal card experience. The wheel turns; the tokens endure.

✦ ✦ ✦

I Color Tokens

Core Palette

Background --bg
#0a0a08

Panel --bg-panel
#141412

Text --text
#e8e0d0

Text Dim --text-dim
#9a9080

Gold --gold
#c9a84c

Gold Dim --gold-dim
rgba(201,168,76,0.35)

Gold Glow --gold-glow
rgba(201,168,76,0.18)

Gradient Applications

Panel Sheen

Section Rule

Centered Rule

Scene Ambient

Texture — Grain Overlay

Base

+ Grain (0.35)

Panel Gradient

II Typography

Heading — Cinzel Decorative

Aa Bb
Cc Dd

Weight 400 · 700 · 900
Used for: card headings, titles
ABCDEFGHIJKLMNOP
QRSTUVWXYZ
0 1 2 3 4 5 6 7 8 9

Body — Cormorant Garamond

Aa Bb Cc
Dd Ee Ff

Weight 300 · 400 · 600
Used for: UI, body, labels, buttons
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9

Narration — IM Fell English

Aa Bb Cc
Dd Ee Ff

Italic · Regular
Used for: narration, display, numerals
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
I II III IV V VI VII VIII IX X

Card Heading — Cinzel Decorative Weight 400 · 700 · 900 · --gold / --text

Seek Equilibrium The Season of Harvest Far From Equilibrium

Card Numeral IM Fell English · ~9rem · var(--text)

I VII XIV XX

Display — Hero Title IM Fell English · clamp(3rem, 8vw, 6.5rem)

Far From
Equilibrium

Display — Gold Italic IM Fell English Italic · clamp(2rem, 5vw, 4rem) · --gold

Seek Equilibrium

Narration IM Fell English Italic · clamp(1.15rem, 2.6vw, 1.85rem) · 1.8 leading · 0.02em tracking

The seed knows nothing of the flower it will become, yet turns unerringly toward the light.

Scene Label Cormorant Garamond · 1rem · 0.28em tracking · uppercase · --gold

The Season of Harvest

UI / Button Text Cormorant Garamond · 0.78rem · 0.14em tracking · uppercase

← prev next →

Body — Weight 300 Cormorant Garamond · 1.05rem · 1.7 leading

The twenty cards trace the arc of the year — from the first tender shoots of spring through summer's abundance, the harvest yield, and winter's patient dark. Each card holds a reckoning.

Caption / Label Cormorant Garamond · 0.65rem · 0.2em tracking · uppercase · --text-dim

Spring · Card I of XX · The Seed

III Components

Narration Block — Full Context

What the caterpillar calls the end of the world, the master calls a butterfly. The wheel does not stop; it only seems to, at the turning.

Buttons — All States

Default

Hover (simulate)

is-ready (pulsing)

is-dimmed

disabled

Progress Dots

Card I of VII

Card III of VII

Card VII of VII

Scene Label

The Season of Blossom

fading out — opacity:0

— ✦ —

IV Seasonal Palette

Spring · Cards I – V

The Rising

Seed
Foundation
Growth
Emergence
Blossom

I · II · III · IV · V

Summer · Cards VI – X

The Burning

Expression
Connection
Preparation
Collection
Nourishment

VI · VII · VIII · IX · X

Autumn · Cards XI – XV

The Harvest

Abundance
Achievement
Energy
Harmony
Clarity

XI · XII · XIII · XIV · XV

Winter · Cards XVI – XX

The Resting

Reflection
Wisdom
Mystery
Surrender
Illumination

XVI · XVII · XVIII · XIX · XX

Seasonal CSS Variables

Spring --spring
#b86b6b

Summer --summer
#e8884a

Autumn --autumn
#5aa0ba

Winter --winter
#55a870

V Layout Patterns

Full-Bleed Scene Layout

The Season of Rest

Even the stars must set. In the darkest quarter, the roots go deepest.

page section → scene shell → scene text layer → scene label → progress dots → controls

Spacing Scale

6px · xs

dot gap, tight UI

9px · sm

progress dot gap

16px · md

button padding (7×16)

26–34px · lg

controls bottom/right offset

9vh · xl

scene text padding-bottom

Z-Index Stack

canvas z-index: auto

scene text z-index: 10

scene label z-index: 10

progress, controls z-index: 20

body::before (grain) z-index: 100

Motion & Transitions

narration.visible — Fade + Rise

opacity: 0 → 1 · transform: translateY(10px) → (0)
transition: 1.1s ease

narration.fading — Fade + Float

opacity: 1 → 0 · transform: translateY(0) → (-6px)
transition: 1.1s ease

button.is-ready — Pulse Keyframe

animation: next-ready-pulse 2.4s ease-in-out infinite
box-shadow oscillates 12→20px glow · translateY(0 → -1px)

button — Standard

opacity, border-color, background-color: 0.45s ease
box-shadow: 0.9s ease · transform: 0.45s ease

scene label

opacity: 0 ↔ 1 · transition: 0.9s ease