Inspired by Gundam / EVA aesthetics — tech panels, warning signals, military-industrial color palette. Angular, hard-edged, relentless.
Four primary combat colors — navy base, military green support, warning yellow for critical UI, danger red for hazard signals.
#1a2744 navy#4a5c3a green#fbbf24 yellow#ef4444 redAngular panels, hard-edge shadows, zero rounded corners. Every interaction fires like a weapon system.
Four named protocols define all mecha interaction behavior. Hover, click, and hold each demo to observe the mechanics.
duration-100~150 + ease-linear
All interactions use hard, mechanical linear cuts — no spring easing. Toggle the arm to feel the instant, hydraulic snap.
clip-path change + border-l thickness shift
Hover to see clip-path corner morph and border-left expand — simulating armor plate sliding and locking into position.
hover: warning pulse + stripe overlay
Critical controls flash warning yellow / red with hazard stripe overlay on hover to reinforce industrial alert urgency.
HOVER TO TRIGGER HAZARD
active: translate + shadow collapse
Active press fires a crisp linear displacement and shadow collapse — like the heavy snap of a trigger on a combat weapon system.
CLICK + HOLD TO LOCK-ON
Full-composition mock UI showing mecha components in context — unit readouts, weapon grids, log feed, and warning indicators.
Absolute rules for mecha design. Hard lines. No exceptions. Deviating from these rules compromises the armor integrity.
Angular, impenetrable, structured
All containers use squared panels with hard-edge shadows offset 4px. clip-path corner cuts simulate beveled armor plating. Zero rounded corners.
Yellow signals. Red danger. No subtlety.
Warning stripes (#fbbf24 / #1a2744 at 45deg), square status indicators, blinking red alerts for critical states. The UI must communicate urgency.
Monospace. Uppercase. Technical.
All labels use font-mono uppercase tracking-widest. Unit IDs like [EVT-001], bracket notation // SYSTEM ONLINE, technical parameter display.
Navy base. Green support. No pastels.
bg-[#1a2744] navy and bg-[#4a5c3a] military green are the only backgrounds. No white, no light grays. Warning yellow and danger red as the only bright values.
Angular clip-path beveled containers that simulate interlocking mecha armor plates.
Repeating diagonal stripe patterns and pulsing red alerts for critical state indication.
40x40px grid overlay using military green at 15% opacity — the signature mecha background.
shadow-[4px_4px_0px] offset block shadows with no blur radius. Solid, mechanical depth.
Active press triggers translate + shadow collapse, like firing a heavy-caliber weapon.
UNIT-01 bracket IDs, // comment prefix labels, and technical mono readouts throughout.