ON.energy. High-voltage caution yellow on midnight steel.
- Brand
- Mixed theme
- 6 colors
- 1 typeface
ON.energy operates in a high-contrast industrial language: a single vivid yellow (#fff313) that functions as both full-bleed atmospheric section and functional accent against deep black surfaces, with no gradients or decorative effects in between. The type system uses Univers Next Pro at whisper-light weight 300 for all display and headline work — an anti-convention choice that creates authority through restraint rather than volume, paired with aggressively tight tracking (-0.04em at 36px+). Layout alternates between dramatic full-bleed color blocks (dark product photography, pure yellow statement sections, white content areas) rather than gentle cards-on-canvas, creating a rhythmic, almost industrial-signage quality. Radii stay small and utilitarian (6-9px), shadows are absent, and the component vocabulary is deliberately narrow: pill nav items, one yellow CTA, image cards, and a strong typographic hierarchy.

ON.energy design system
Brand1
Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Neutrals5
Page canvas, dark hero surfaces, nav background, text on yellow sections
Elevated dark surfaces, navigation pill buttons, card backgrounds on dark sections
Hairline borders, dividers, subtle structural lines on dark surfaces
Muted body text on dark backgrounds, secondary copy, footer text
Light section backgrounds, text on dark surfaces, news card surfaces
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Midnight Steel on Caution Yellow
18.08 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











