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

Design system documentation built from reusable application components.