bright-green-tech-system-webgl

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.

Implementation guidance

• Prefer a strong outer container shell with thin strokes, subtle backdrop blur, visible corner brackets, and a central divider or explicit split between text and visualization.
• Use clean sans-serif typography for main content and mono utility text for labels, status readouts, process steps, percentages, and system metadata.
• Introduce small framed modules, tips panels, progress rails, or status blocks with precise spacing and clear border hierarchy.
• Use masked staggered reveals, fade-up blocks, or controlled sequencing so the layout feels alive but disciplined.
• Treat the WebGL panel as a core component: use real canvas or Three.js rendering when possible, with luminous particles, synthetic geometry, or orbital forms tinted by the bright green accent.
• Keep the visualization atmospheric and premium: additive glow, subtle fog, gentle camera motion, and calm mouse response are good; chaotic motion and noisy overload are not.