Display Doctrine

The visual identity and motion language shared by every EO long-form video diagram — palette, the Trauma Gut signature, the entrance/hold/exit beat, and how one diagram now adapts across long and short video formats. Quick reference; the full technical mechanics live in the doc.

Doc →

01 — Palette

A closed set, five colors

Nothing outside this set ships on a diagram. Gold is reserved for emphasis and for the Trauma Gut identity — it is never a default color.

#ffffff

Default

#e8d5b0

Gold — emphasis

#e82020

Red

#7ab87a

Green

#3b82f6

Blue

02 — Signature

The Trauma Gut cell

Built once for the double-character crossover square variant, reused since so it reads as one continuous character across diagrams. Ring, fill and text are identical everywhere it appears; the glow (below) was added later, only on the two-walls tension diagram — not yet part of every instance.

Ring — gold stroke #e8d5b0, width 3, opaque black base (0.82–0.9 fill-opacity)

Fill — 10×10 gold hatch pattern, 45°, 0.35 stroke-opacity

Text — Inter 500, white, uppercase, 0.05em tracking

Glow — two stacked drop-shadows, 22px + 8px blur, gold at ~0.5 opacity. Two-walls tension diagram only, so far.

Entrance — drops from above, lands with a soft overshoot bounce, never a hard cut-in

03 — Motion

Entrance → Hold → Exit

The standard three-beat structure for a diagram's lifetime. Continuous motifs (a wall's shake, a strand's sway) run underneath the whole way through, timed to end exactly when the exit begins — never frozen before it, never running past it.

Beat 1

Entrance

Elements fade or drop in with staggered delays. The Trauma Gut cell, when present, drops onto an already-visible composition and lands — it never appears on an empty frame.

Beat 2

Hold

Fully assembled, message duration. Shake/sway/pulse motifs keep the frame feeling alive without competing with the composition itself.

Beat 3

Exit

Everything fades out together, in one pass, via a single wrapper's opacity — not element by element.

04 — Formats

One source, long and short

The newest addition (31/07/2026): a diagram built once can serve a 16:9 long-form cut and a 1:1 or 9:16 short cut from the same centered composition, instead of being rebuilt per format.

16:9 — long form

1:1 — square

Band — wide canvas, square content centered, safe-cropped either way

Glow falloff, validated 31/07/2026 — the ambient background glow (see the Trauma Gut cell above) reads as a spotlight on the subject if it fades to fully transparent before reaching the frame edges. Push the gradient radius past the farthest corner instead, kept faint at the edge (down to ~1.4% opacity) rather than zero, so the whole frame feels lit. Peak intensity stays subtle either way (~9%).

05 — Discipline

Measure, don't assume

Standing rule for anything geometric in this system. The full method is in the doc; the short version:

Finite duration, always

The render pipeline computes total length from every animation's delay + activeDuration. animation-iteration-count: infinite breaks it. Continuous motifs use a bounded, often fractional, count instead.

Measure the rendered output

getScreenCTM() caught a real bug code review missed: a static rotation attribute stacking with a CSS animation, doubling a 9° tilt to 18°.

Check at the rest angle

A shaking element only sits at its true construction angle at specific instants in its cycle. Verify touching-precision there, not mid-wobble.

Show options, not one guess

For a genuinely new creative call (an arrow tip, a strand style), concrete side-by-side options come before a final version — not after.