Evangelion Design

Apply Evangelion-inspired interface language to web and mobile products without turning the result into generic neon cyberpunk or a direct franchise copy. The source material uses UI as story pressure: severe geometry, narrow color signals, dense but legible telemetry, and motion that behaves like machinery under stress.

Quick Start

1. Pick the screen role first: hud, command-center, psychograph, sync-ladder, reactor-diagnostic, breach-monitor, or title-card.
2. Pick one hot accent family for the screen: amber, red, or signal-green. Add one cool support only when the composition needs separation.
3. Build the layout from frames, rulers, rings, bars, masks, repeated device arrays, and crosshair geometry before adding decorative texture.
4. Animate the screen by revealing state: counters, sweeps, trace plotting, sync steps, panel swaps, and alert pulses.
5. Keep the work original. Echo the language of Evangelion, but do not reuse exact logos, title cards, or one-to-one screen compositions.

Workflow

1. Define the dramatic job

Choose the emotional function before choosing components.

• hud: first-person overlays on top of imagery; use wide masks, target brackets, sparse ticks, and range markers.
• command-center: black-field dashboards with multiple contained modules, status rails, tables, and analytic views.
• diagnostic: charts, sync traces, matrices, and ring analyzers; prioritize precision and hierarchy over spectacle.
• psychograph: bounded graph surfaces with rulers, sparse cross markers, label boxes, and one dense organic or signal trace.
• sync-ladder: repeated capsules, bars, or slotted modules stepping across rows or diagonals with one or two repeated labels.
• reactor-diagnostic: a framed triptych or panoramic board with a dominant central radial analyzer and intentionally sparse side bays.
• breach-monitor: oversized timers, progress blocks, rack arrays, projected-penetration bars, and other imminent-threat displays.
• warning-state: higher contrast, repeated status labels, countdowns, and tighter cadence.
• title-card: near-empty black compositions with oversized typography and one dominant accent.

2. Compose the screen

• Anchor major modules to edges, diagonals, panoramic masks, or one large enclosing frame. Large dead zones are useful because they create tension.
• Prefer clipped rectangles, notched frames, circles, ring charts, ladders, ruled lines, wireframe curves, and external callout labels.
• Use one or two dominant geometric ideas per view. Do not stack every sci-fi trope into the same screen.
• Use repetition aggressively when the screen is about synchronization, layers, purity, or compatibility. Identical modules are part of the drama.
• Let one hero structure dominate: a scribble trace, a wireframe globe, a circular reactor, a countdown, or a field of capsules.
• Keep corners sharp or minimally cut. Rounded consumer-app cards weaken the tone.
• Treat texture as secondary. The framework should read clearly even before glow, grain, or background imagery is added.

3. Set typography and copy

• Use condensed sans for labels and headers.
• Use monospaced numerals for timers, telemetry, and tables.
• Reserve a dramatic display serif for rare splash or chapter-card moments only.
• Default to uppercase labels, short phrases, system verbs, and explicit state language.
• Use tiny micro-labels and registration marks to make large canvases feel calibrated, but keep the active label path bright enough to scan.
• Use bilingual copy only when it is meaningful and accurate.

4. Adapt for product UI

• On web, lean into widescreen overlays, dense side rails, and multi-panel compositions.
• On mobile, reduce simultaneous modules. Keep one hero instrument per screen and collapse side bays into stacked rails, tabs, or swipable diagnostics.
• Convert ultra-wide frames into a central instrument plus one secondary strip instead of compressing every module into illegible miniatures.
• Let dense telemetry support the mood, but make primary actions readable without it.
• Translate the style through the existing design system when possible instead of rebuilding every primitive.

Read references/style-guide.md for palette, type, layout, motion, and implementation tokens. Read references/source-signals.md when you want the rationale behind the look and the analyzed source cues.

Guardrails

• Do not default to purple gradients, glassmorphism, soft blur, or playful spring motion.
• Do not make every surface glow. Most of the screen should feel matte, dark, and controlled.
• Do not use Japanese text or franchise symbols as decoration.
• Do not sacrifice accessibility for density; the hierarchy should still be clear with motion disabled.
• Do not copy Evangelion assets or layouts literally. Produce an original interpretation with the same tension and rigor.