---
title: "ON.energy design system"
variant: extended
source: https://www.on.energy/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/on-energy)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ON.energy · Design System

> Industrial power, rendered in stark contrast.

**Theme:** dark · **Industry:** ai · **Source:** https://www.on.energy/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ON.energy presents grid-safe power systems for AI data centers through cinematic industrial imagery, restrained typography, and a high-contrast black-and-yellow palette. The homepage alternates expansive dark sections with a vivid yellow statement panel and a pale testimonial block.

## North star

Let cinematic industrial imagery and light editorial type dominate the dark canvas, using yellow only for high-priority signals.

## Overview

The visual identity is built on a near-black canvas, with off-white text and a vivid signal yellow reserved for the primary contact action and a prominent statement panel. Dark charcoal bands distinguish content without introducing decorative gradients or strong borders; the light testimonial section creates a deliberate, high-contrast pause. Univers Next Pro carries the page in light weights, using large, tightly tracked headlines and compact supporting copy. ABC Monument Grotesk Mono adds a technical voice to small labels and buttons. The layout is spacious and editorial: full-bleed equipment footage leads the page, while later sections use asymmetric two-column arrangements and selective card treatments. Industrial product photography is darkened and cinematic, letting metal surfaces emerge from shadow. The restrained interface keeps attention on power infrastructure, with yellow functioning as a precise signal rather than a general-purpose decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Grid | `#000000` | `--color-deep-grid` | brand | Primary page canvas and dark hero field; also used for text on the yellow contact button. |
| Carbon Band | `#202020` | `--color-carbon-band` | surface | Charcoal content band, dark section surface, and subdued interface element background. |
| Signal Chalk | `#eeeeee` | `--color-signal-chalk` | neutral | Primary light text on dark sections and the main surface color for the testimonial section. |
| Volt Yellow | `#fff313` | `--color-volt-yellow` | accent | Primary contact button and the large statement panel; a restrained, high-priority brand signal. |
| Mid Ash | `#7d7d7d` | `--color-mid-ash` | neutral | Muted supporting text on dark backgrounds. |
| Pale Alloy | `#cdcdcd` | `--color-pale-alloy` | neutral | Secondary text and subdued copy, including over dark imagery. |
| Steel Grey | `#5f5f5f` | `--color-steel-grey` | neutral | Low-emphasis supporting text within the measured palette. |
| Soft Silver | `#afafaf` | `--color-soft-silver` | neutral | Muted paragraph and secondary text against dark surfaces. |
| Graphite Tile | `#323232` | `--color-graphite-tile` | surface | Raised charcoal link or card surface, including the expertise feature tile. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Grid) · `--color-surface` → `#eeeeee` (Signal Chalk) · `--color-surface-2` → `#202020` (Carbon Band) · `--color-surface-3` → `#323232` (Graphite Tile) · `--color-text` → `#eeeeee` (Signal Chalk) · `--color-text-muted` → `#202020` (Carbon Band) · `--color-text-subtle` → `#000000` (Deep Grid)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#000000` | 18.1:1 | AAA |
| `#eeeeee` | `#202020` | 14.04:1 | AAA |
| `#eeeeee` | `#323232` | 11.05:1 | AAA |
| `#202020` | `#000000` | 1.29:1 | fail |
| `#202020` | `#eeeeee` | 14.04:1 | AAA |
| `#202020` | `#323232` | 1.27:1 | fail |
| `#000000` | `#eeeeee` | 18.1:1 | AAA |
| `#000000` | `#202020` | 1.29:1 | fail |
| `#000000` | `#323232` | 1.64:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Univers Next Pro | `--font-body` | webfont | 300, 400 | Display, headings, body copy, and navigation | Inter |
| ABC Monument Grotesk Mono | `--font-mono` | webfont | 400, 600 | Technical labels, CTA text, and small uppercase markers | Space Mono |

- **Univers Next Pro:** Light weights dominate; headlines use tight negative tracking, with compact supporting text and sentence case.
- **ABC Monument Grotesk Mono:** Use sparingly for small interface labels; buttons are semibold, while code-like labels are uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 300 | 1.13 | -0.04em | — | Univers Next Pro | Oversized display statements and prominent hero-scale messaging. |
| h1 | 48px | 300 | 1.17 | -0.04em | — | Univers Next Pro | Primary page headline and major section headline. |
| h2 | 36px | 300 | 1.17 | -0.04em | — | Univers Next Pro | Section headlines, including expertise and testimonial titles. |
| h3 | 24px | 300 | 1.17 | -0.04em | — | Univers Next Pro | Feature titles and smaller content headings. |
| body | 20px | 300 | 1.2 | -0.02em | — | Univers Next Pro | Introductory statements and feature descriptions. |
| caption | 16px | 300 | 1.38 | -0.02em | — | Univers Next Pro | Supporting details and compact secondary copy. |
| button | 12px | 600 | 1 | 0 | — | ABC Monument Grotesk Mono | Compact monospace CTA labels. |
| nav | 64px | 300 | 1.13 | -0.04em | — | Univers Next Pro | Large display-style navigation labels where present. |
| code | 12px | 400 | 1.67 | -0.04em | uppercase | ABC Monument Grotesk Mono | Small uppercase technical labels and eyebrow markers. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 7, 9, 12, 14, 15, 16, 17, 20, 24, 32, 36, 40, 60, 80 px.
- Section rhythm 120px · element gap 20px · card padding — · max content width 1429px.

Use a spacious, full-width editorial composition within the measured 1429px page maximum. The opening is a full-bleed, two-column media hero with headline and supporting copy positioned over the equipment image; navigation runs across the top. Later content switches between single-column statements, asymmetric two-column feature areas, and a four-column testimonial layout. Preserve the measured 120px section rhythm and 20px element rhythm where relevant. Keep alignment mostly flush-left and avoid dense grids; the long dark stretches are intentional breathing space.

## Shape & elevation

- Radius: button `6px` · nav `6px` · link `16px` · xs `4px` · sm `6px` · md `9px` · lg `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat: large color fields and full-bleed media provide structure rather than shadows. Use subtle, dark interface surfaces for navigation and feature tiles, with small corner rounding where measured. Avoid adding decorative borders, glows, or drop shadows; the yellow CTA and contrasting section backgrounds provide the hierarchy.

## Imagery

Lead with full-bleed video or photography of large-scale electrical equipment, framed close enough to make metal cabinets and infrastructure feel monumental. Use a dark, cinematic treatment with hard highlights and deep shadows; overlay restrained white type. Keep product imagery inside the yellow hero card compact and secondary. Later feature cards may use small facility photographs. The measured palette's varied greys in imagery should not be treated as additional brand colours.

## Components

### Top navigation

A compact horizontal row over the hero, with dark translucent-looking menu tiles, small sans-serif labels, and a bright yellow contact action.

### Media hero

Full-bleed industrial equipment imagery with a large light-weight headline at left and brief supporting copy near the lower edge.

### Yellow product callout

Rounded vivid-yellow panel combining a small monospace eyebrow, concise product description, and equipment thumbnail.

### Statement panel

A large yellow section with dark, left-aligned explanatory copy and substantial empty space around the text.

### Testimonial block

Pale surface with a section heading at left, quote and attribution at right, plus compact navigation or action controls.

### Expertise feature tile

Charcoal feature area pairing a light heading and explanatory copy with a rounded darker card, image, and small yellow marker.

### Measured component styles

- **Primary button** (“Get in touch”): background #fff313 · text #000000 · radius 6px · padding 0px 17px · 600 12px ABC Monument Grotesk Mono
- **Secondary button** (“Expertise”): background #2f2f2f · text #eeeeee · radius 6px · padding 0px 14px · 400 12px Univers Next Pro
- **Link** (“See Why”): transparent background · text #eeeeee · radius 0px · padding 0px 24px · 400 12px ABC Monument Grotesk Mono
- **Navigation item** (“Grid-Safe Power”): transparent background · text #eeeeee · radius 0px · padding 0px · 300 64px Univers Next Pro

## Do

- Use #000000 as the dominant canvas.
- Reserve #fff313 for primary actions and select statement surfaces.
- Set headlines in light-weight, tightly tracked sans-serif type.
- Let industrial media fill the hero and retain its dramatic shadows.
- Use pale testimonial sections as deliberate contrast breaks.
- Keep technical monospace labels small and purposeful.

## Don't

- Do not add gradients or decorative shadows.
- Do not turn every section into a card grid.
- Do not use yellow as a general text or background color everywhere.
- Do not brighten or flatten the industrial photography.
- Do not introduce unmeasured palette colors as brand colors.
- Do not crowd the layout with extra borders or ornamental UI.

## Agent prompt

Build a new ON.energy page in the same industrial editorial style. Use Deep Grid (#000000) as the dominant canvas, Signal Chalk (#eeeeee) for light text, and Carbon Band (#202020) or Graphite Tile (#323232) for restrained dark surfaces. Apply Volt Yellow (#fff313) sparingly to the primary CTA and one high-priority statement or product callout. Use a light geometric sans-serif similar to Univers Next Pro for headlines and body, with tight tracking on large headings; use a compact monospace similar to ABC Monument Grotesk Mono for small technical labels and button text. Compose wide, spacious sections with asymmetrical alignment, cinematic full-bleed infrastructure imagery, and limited card treatments. Use a pale block only as a purposeful contrast section. Keep the interface flat and quiet, without gradients, decorative shadows, or invented palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed industrial media with left-aligned headline, lower supporting copy, top navigation, and a yellow product callout. | Top-level navigation, Primary contact action, Product exploration callout | Cinematic equipment footage, Large light headline, Yellow rounded callout |
| 2 | other | Single-column statement in a high-contrast yellow panel, followed by an extended dark canvas. | Brand explanation, Claim-led content | Yellow field, Dark text, Large negative space |
| 3 | feature-grid | Two-column infrastructure content with a compact set of supporting claims. | Capability scanning, Evidence-led messaging | Small technical icons, Compact feature copy, Dark canvas |
| 4 | testimonials | Pale full-width band with heading at left and quote, attribution, and controls arranged across the right. | Social proof, Quote navigation, Secondary action | Light surface, Dark typography, Compact controls |
| 5 | feature-split | Charcoal two-column section: heading on one side, explanatory copy and image-led feature card on the other. | Expertise overview, Feature discovery | Charcoal section band, Rounded dark tile, Small yellow marker |
| 6 | other | Sparse single-column statement on black, with copy positioned to the right of the broad canvas. | Performance proof, Technical reassurance | Black canvas, Small eyebrow, Muted supporting text |

## Source CSS custom properties (selected)

```css
--color-black: #000;
--color-black20: rgba(0,0,0,.2);
--color-black40: rgba(0,0,0,.4);
--color-yellow: #fff313;
--color-yellow-secondary: #c0b400;
--color-red: #f14d3d;
--color-charcoal: #323232;
--color-arsenic: #4b4b4b;
--color-mid-grey: #7d7d7d;
--color-dark-grey: #202020;
--color-silver: #afafaf;
--color-light-grey: #cdcdcd;
--color-off-white: #eee;
--color-off-white20: hsla(0,0%,93%,.2);
--color-off-white40: hsla(0,0%,93%,.4);
--ease-expo-in-out: cubic-bezier(.87,0,.13,1);
--ease-expo-out: cubic-bezier(.16,1,.3,1);
--font-base: "Univers Next Pro";
--font-accent: "ABC Monument Grotesk Mono";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/on-energy