Skip to content
Library

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.

Screenshot of ON.energy
Captured from on.energy on October 11, 2026

ON.energy design system

ON.energy

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

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.