The 24 Energy brand book.
Logos, colours, and type for anyone writing about 24 Energy or building with our identity. Every file on this page is the current, approved version.
One promise in every lockup.
The 24 is the continuity promise: power that holds around the clock, when the grid does not.
Sits under the wordmark and opens introductions.
Sized for real load behaviour, built for local climate and grid conditions.
Every system starts from the site study, never from the brochure.
Midnight for structure, gold for signal.
Primary brand colour. Headlines, hero grounds, the mark's dark artwork.
Raised panels and secondary surfaces on midnight.
The signal. One accent per view: eyebrows, key figures, CTAs.
Hover state for gold elements.
Default page background.
Alternating section bands, raised cards.
Hairline rules and card borders.
Values are the source definitions from app/globals.css (OKLCH), shown here in hex.
Space Grotesk for voice. DM Sans for reading.
Driven by efficiency.
Space Grotesk, 700 weight, -0.04em tracking.
24 Energy designs solar, battery, and backup systems with an engineering-first approach that prioritizes output, uptime, and clean execution.
DM Sans, 400–500 weight, relaxed line height.
Headings are always Space Grotesk with tight negative tracking. Body text is always DM Sans. No third typeface.
Every lockup, and where it belongs.
Full-colour lockup for light backgrounds. Default choice.
24energy-logo-primary.svg— Download
Original full-colour export. Print and large-format use.
24energy-logo-primary-master.svg— Download
Original white export for dark production runs.
24energy-logo-white-master.svg— Download
What keeps the identity intact.
- Use the primary lockup on light grounds and the white lockup on midnight.
- Keep clear space around the mark at least equal to the height of the 24.
- Use gold once per view, on the element that matters most.
- Use the SVG files for screens and the PNG set only where SVG is unsupported.
- Stretch, rotate, or recolour the lockup outside this palette.
- Add gradients, shadows, or outlines to the mark.
- Rebuild the logo from type instead of using these files.
- Place the white logo on light backgrounds or the colour logo on busy photography.