ON.energy

This system evokes a technical, industrial luxury with its stark achromatic palette punctuated by a single vibrant yellow. The dark background (#202020 or #000000) serves as a canvas for precise typography, predominantly the custom Univers Next Pro, often rendered in negative letter-spacing for a sophisticated, whispered delivery. Rounded corners are selectively applied, with the default being 6px, but larger curves for specific button styles introduce a subtle tension, softening otherwise rigid industrial forms. Use Electric Yellow (#fff313) exclusively for primary CTAs and active states. Apply Univers Next Pro weight 300 with negative letter-spacing for all significant headlines to achieve a whispered authority. Maintain a default border-radius of 6px for most interactive elements and a 9px radius for image cards. Layer backgrounds using Midnight Steel (#000000) and Data Center Graphite (#202020) to create depth without shadows, like nested panels. Ensure high contrast text (#eeeeee or #000000) against background colors, adhering to AAA accessibility standards. Use System 4px as the base unit for all dimensional measurements, ensuring consistent spacing multiples. Do not introduce new vibrant colors outside of the defined Electric Yellow; maintain the stark achromatic palette. Avoid using drop shadows for elevation; rely on background layering and subtle borders for perceived depth. Do not use highly decorative or script fonts; stick to Univers Next Pro to maintain the technical, precise aesthetic. Never use positive letter spacing; the brand's typographic signature relies on condensing character forms. Do not apply large, soft gradients; the system prefers solid, well-defined color blocks and sharp lines. Avoid generic stock photography; imagery should be technical, product-focused, or abstract, aligning with the industrial feel.