# EMBER — Manifesto

> *Swiss grid with a fist. Everything wants to move.*

EMBER is a personal design language: engineered warmth fused with
neo-brutalist weight — sharp enough to argue, warm enough to live with,
and never, ever generic. It works on screens, on paper, and on objects;
the same tokens, the same postures, the same hunger for motion everywhere.

**Vibe words:** warm · heavy · precise · kinetic · unapologetic · human

---

## The nine principles

### 1. Weight is honest — and rules make the rooms
The heavy rule (3px ink) is EMBER's spine. Pages are composed as fields
divided by rules — bands, ledger rows, annotation columns — never as content
floating in repeated boxes. A bordered box must justify itself as a physical
object. If everything is a card, nothing is a room.

### 2. Brutal frame, warm surface
Geometry outside, comfort inside. Corners are sharp or nearly sharp, shadows
are hard offsets with zero blur, borders are ink. But the surface is cream
paper, warm gray, subtle grain. A concrete room with good lighting — severe,
but you'd still like to sit in it.

### 3. One ember per composition
Exactly **one** ember-colored element per piece — an underline, a block, a
keycap, the full stop after the wordmark. A repeated ember *sequence* (a
flip-book strip, a marching animation) counts as one ember **event**. The
ember glow is the language's only sanctioned blur. If everything is accented,
nothing is.

### 4. Persona colors have one job each
Three function colors, never decoration:
- **Azure** is *cold data* — links, coordinates, indices, annotations.
- **Sky** is *the air inside anything that asks* — the fill of envelopes
  and input fields.
- **Pink** is *the human hand* — the whisper, the highlighter, the
  reading-progress line.
Only ember radiates heat. A persona color used as ornament is a violation.

### 5. Shape is posture
Geometry declares intent. A thing that **gives** information has sharp top
corners and an open, rounded bottom. A thing that **asks** is an envelope —
airmail stripes, an unsealed flap, sky inside. A thing that **speaks** is a
tag, rounded at the mouth and sharp at the point. A thing that **presses**
is a keycap standing on its own wall. A rounded rectangle with a drop shadow
declares nothing — which is exactly why EMBER refuses it.

### 6. Raw type, set well
Type is oversized, tight, and confident — grotesque for voice, mono for
facts. Body text is generous in size and leading; display text is cropped
close. Type does the shouting so the layout doesn't have to.

### 7. Break the grid once, knowingly
The grid is a strict 12-column discipline — followed everywhere, then
violated exactly once per composition: one element rotated 90°, bleeding
past its margin, or jumping scale. The break is proof the grid was a choice.

### 8. Welcome the conflict
Perfection is sterile. EMBER admits deliberate collisions: one gradient
event per composition (a marquee surface where ink slides into ember), one
neon breath (the glowing ember period), one asymmetry that a tidier system
would have smoothed away. Pixel-perfect is not the goal — *tension you can
point at* is. Two conflicts are chaos; one is a signature.

### 9. Everything wants to move
The language has a philosophy of dynamics. On screens, things actually move:
bands of text march, entrances land like a stamp, keys sink and touch down,
the ember period breathes, a pink line races your reading. And even the
still things hold tension: headline lines strain in slow cycles, the fist
clenches once a cycle, pinned elements pull against their pin — stillness
as stored energy, never absence. On paper — where motion is impossible —
the *desire* to move is printed instead: echo trails behind headlines,
speed dashes before an ember chip, flip-book frames captioned "FLIP THE
PAGES — IT MOVES", momentum bars, dog-eared corners. Animate if possible;
yearn if not.

---

## Anti-patterns — EMBER never does

- **Card-based layout.** Repeated bordered boxes as the default container.
  Structure comes from rules, bands, and columns; a box is reserved for
  genuine objects, at most one or two per view.
- **Template sameness.** Centered hero + three feature cards + rounded-2xl
  everything + Inter + purple-on-blue. If a piece could be swapped into a
  thousand other sites without anyone noticing, it is a failure — even if
  it is pretty.
- **Blur everywhere.** Hard offsets carry depth. The single exception is
  the ember glow, which must glow — that's its job.
- **Gradient wallpaper.** A gradient is an event, not a surface treatment.
  One deliberate conflict per composition, chosen on purpose.
- **Multiple heats.** One ember. Persona colors (azure, sky, pink) each have
  a job; semantic colors carry meaning; none of them may compete for heat.
- **Centered-everything layouts.** Asymmetry is EMBER's posture.
- **Vintage ornament.** No overprints, seals, registration marks, torn
  paper, or faux-letterpress texture. Warmth of tone, not costume of era.
- **Stillness as safety.** A screen piece with no motion, or a print piece
  with no printed desire for motion, hasn't been pushed hard enough.

---

## Why the generic web feels generic

Most quick-built sites look alike because they reach for the same safe
defaults: a centered hero, three equal cards, one rounded-radius everywhere,
one typeface, one shade of blue, no tension anywhere. Nothing in that stack
is *decided* — everything is *defaulted*. EMBER's answer is to decide
everything: posture before shape, job before color, event before gradient,
destination before motion. The result should never be mistaken for a
template — even on its worst day.

---

## The signature elements

| Element | Rule |
|---|---|
| **Ruled composition** | bands, ledger rows, annotation columns carry the page |
| **Heavy rule** | 3px solid ink line, structural use only |
| **Hard shadow** | solid offset (3/6/10px), zero blur |
| **The keycap** | buttons stand on a wall and sink to press |
| **The envelope** | every ask wears airmail stripes and sky |
| **The ember cut** | one ember element (or event) per composition |
| **Grid with a break** | 12 columns, one knowing violation |
| **Annotated engineering** | azure mono metadata for real data |
| **The whisper** | one pink serif-italic aside per composition, small |
| **The march** | marquees, echo trails, flip-books, momentum bars |

The wordmark signature: **EMBER** always ends with an ember-colored full
stop — and on screen, it breathes.

---

*EMBER v1.1 — established 2026. Warm things, built heavy, set in motion.*