Bright Green Tech System WebGL Skill

Use When

• Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

Workflow

Scope

• Apply this as a full design-system direction across layout, framing, typography, controls, metadata, and the embedded WebGL visualization region.
• Use it when the interface should feel sharply technical, experimental, and structured, with a bright green signal color and a visible real-time visual engine.
• This is not generic dark SaaS and not soft glassmorphism. It should feel like an active synthesis console or build-system interface.

Visual target

• Build the page on a deep charcoal or near-black base with highly visible structure lines, container borders, corner brackets, and internal dividers.
• Use a bright lime, acid green, or signal-green accent as the dominant active color for indicators, progress states, focus details, highlights, and important labels.
• Keep the green vivid and intentional, but limit its usage to signals, focal typography, accent fills, and WebGL highlights rather than flooding every surface.
• Establish a split composition where one side carries content, metadata, and instructions while the other side hosts a WebGL or Three.js visualization zone.
• The WebGL region should feel integrated into the system, not decorative: it should read like a powered instrument panel, synthesized globe, particle engine, or live geometry viewport.