Virea Energy

The Virea identity, as a system.

Brand AI Tokens · Version 1.0 · October 2026

Colour, type, space, motion and composition rules for every Virea Energy touchpoint, ready for designers, developers and AI tools.

319tokens
34confirmed from assets
1typeface, one weight

01 · Brand DNA

Calm architecture, lit by energy.

A white, architectural canvas in Virea Grey, where light-filled gradient fields bring warmth and optimism to nuclear power.

Virea is a contemporary nuclear energy company that powers AI infrastructure and a brighter future. The identity earns trust through restraint, with one typeface, one weight, a single grey and generous white space, and it expresses optimism through light: soft energy fields that move from cool lime and teal to warm amber and ember, always dissolving into white.

If a design loses its restraint it reads as a festival poster. If it loses its energy it reads as a utility bill. Every Virea composition keeps both.

Restraint · credibilityEnergy · optimism
White space, Virea GreyThe cool and warm spectrum
One typeface, Regular onlySoft fields that dissolve into white
Sharp rectangles, hairlinesSky-lit, upward photography
Left-aligned editorial typeOne expressive headline

Precise

Hairline rules, an exact 4px grid, sharp corners, one weight.

Progressive

Spectrum gradients that shift from cool to warm, like a transition.

Reliable

Virea Grey on white carries every word. Nothing shouts.

Forward-thinking

Low-angle photography toward open sky and light.

02 · Colour

Grey carries the words. The spectrum carries the light.

Ten official colours from the swatch sheet. Click any swatch to copy its hex value. Semantic variables are what code should reference.

Core

confirmed

Energy spectrum

Lime and mint are the luminous apexes of the symbol. Use the spectrum as light in gradients and as small marks, never as flat fills for large areas.

Symbol gradient nodes

Decoded from the freeform gradient in the master Illustrator file. Top petals run lime to green, bottom petals green to mint. Reference only.

Neutral ramp

Built around Virea Grey for UI states, borders and paper backgrounds. Only white, Virea Grey and black are official.

Semantic roles

Use these variables, never raw hex. Contrast is measured against white.

Proportion in a composition

White or photography dominates. Fields cover 30–60% of key visuals and 0–15% of product UI.

03 · Gradients & energy fields

Use the gradient like light, not paint.

Colours are official; directions and stop positions are inferred from the applications. The source artwork uses freeform gradients, so CSS gradients here are close approximations.

Energy fields

Organic forms with one crisp curved edge, dissolving into white elsewhere. Official artwork first; CSS fields for digital UI.

Warm energy field, official artwork 01
GraphicElement-01 · warm · official artwork
Cool to warm energy field, official artwork 02
GraphicElement-02 · transition · official artwork
Warm energy field, official artwork 03
GraphicElement-03 · warm · official artwork
--virea-field-horizon · CSS · proposed
--virea-field-ignition · CSS · proposed
--virea-field-transition · CSS · proposed

Rules

Do

  • Let the field bleed off at least one edge of the format.
  • Keep one field per composition, covering 30–60% of a key visual.
  • Choose by message: Horizon for technology, Ignition for people and optimism, Transition for change.
  • Set white text over the saturated part, grey text over the white part.

Don't

  • Fill buttons, cards, icons, borders or the logo with a gradient.
  • Centre a field like a badge, give it hard edges, or tile it.
  • Add hues outside the spectrum (blue, purple, deliberate pink).
  • Recolour the official GraphicElement files.

04 · Typography

One typeface. One weight. Hierarchy through scale.

Forma DJR Display Regular is the only cut supplied. Tracking tightens as size grows; body text keeps the font's own spacing. Resize the window to see the responsive scale.

Forma DJR Display

David Jonathan Ross, 2016 · Regular 400 · 783 glyphs · default glyph set (single-storey a, straight-tailed y, as in the wordmark). Tabular figures via tnum.

confirmed

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ¼ ½ % € & @ → ( ) . , : ; ’ “ ”

Type roles

Size shown for the current breakpoint, with desktop / tablet / mobile values.

05 · Space & grid

Generous, measured, never accidental.

A 4px base unit. Large white fields are part of the identity: in key visuals and hero sections, 25–40% of the area stays empty.

Spacing scale

proposed

Grid

The overlay below is live: it shows the column count for your current screen width.

Powering progress at a new scale.

Headlines span seven of twelve columns and anchor top-left. Supporting text sits in a narrower column to the right, an intentional asymmetry that reads as editorial rather than templated.

Spacing relationships

Space above a heading is always at least twice the space below it.

Label

24

A new energy foundation

24

Body text follows its heading closely so they read as one unit.

16

Paragraph to paragraph is 16px.

Label → heading24px
Heading-3 and smaller → body24px
Heading-1 / 2 → body32–48px
Display → body48–64px
Block → block48px
Group → group80px
Section (D / T / M)160 / 96 / 64

07 · Interface elements

Quiet controls, sharp edges.

Component tokens translate the print identity to screens. All values here are proposed: the source material contains no UI, so these follow the identity's restraint rather than SaaS conventions.

Navigation

Virea Energy

Buttons

Read the report Contact us
Small primarySmall secondary
On imagery

48px tall, 0 radius, Regular 16px, sentence case. One primary per view. Never gradient-filled or pill-shaped.

Links & text

Inline links stay in Virea Grey and carry a fine underline. Read the 2026 infrastructure report to see how hover turns the link green.

Label · uppercase · tracked

Caption · 13px · metadata and image credits

Forms

Enter a complete email address, for example ana@company.com.
We reply within two working days.

Cards

Capacity

1.2 GW

Planned firm capacity for data-centre campuses by 2032.

Availability

92.6%

Target capacity factor, around the clock and in every season.

Insight

Why firm, carbon-free power matters for AI.

A top hairline replaces the box: no border, no shadow, no radius.

Read more

Footer

08 · Motion

Precise and confident, never spectacle.

Short travel, decisive deceleration, no bounce. Under reduced-motion settings, travel and drift switch off and content simply appears.

Reveal · 720ms · enter · 24px · 80ms stagger
Hover me
Hover · 160ms · standard · colour and 3px arrow shift only
Field drift · 24s · linear · alternates, off under reduced motion

Easing curves

proposed

09 · Photography

Look up, toward the light.

Low angles, open sky, natural sunlight and monumental architecture. People appear calm and capable, never posed for the camera.

Looking up through the circular opening of a concrete cooling tower to blue sky
Architecture as portal: concentric concrete, blue sky, raking light.
Engineer in a white hard hat, backlit at golden hour
Human presence: golden-hour backlight, gaze away from the lens.
Woman in a white shirt photographed from below against deep blue sky
Low angle against open sky. The sky becomes space for type.

Subject

Engineers, operators and scientists; reactor architecture, turbine halls, control rooms; open sky.

Perspective

Low angle, looking up. Upward means optimism and scale.

Light

Natural, direct sun. Clear blue sky or warm golden-hour backlight. Natural flare is fine.

Grading

True to life with slightly warm highlights. Saturated sky blue, neutral concrete, clean whites. No filters or duotones.

Cropping

Bold, tight, off-centre. Sharp rectangles in 16:9, 21:9, 4:5 or 3:2. Leave sky for type.

Avoid

Atom icons, radiation symbols, glowing rods, hazmat suits, HUD overlays, wind turbines and leaves-in-hands imagery.

10 · Sample layouts

Built only from tokens.

Four compositions rendered live with the CSS variables: a key visual, a website hero, a report cover and a dashboard panel.

Key visual 16:9 · gradient headline top-left · secondary line bottom-left · logo bottom-right · 40% left empty
Virea EnergyTechnologyProjectsInsights

AI infrastructure

Nuclear power built for AI infrastructure.

Firm, carbon-free electricity for the data centres that will shape the next decade.

Explore the technology
Website hero · 7 / 5 split · photography bleeds to the edge · one primary action

Technology
Insights

Intelligence to power a cleaner world.

2026

Fleet overview

Example data · Q3 2026
Output1,184 MW+2.4% vs Q2
Capacity factor93.1%Target 92.6%
Outage hours14 hPlanned maintenance
Unit AUnit BDemand, AI campus

11 · Reference applications

Where the rules came from.

The supplied mockups. Recurring patterns across them became inferred tokens; one-off details, such as the pink in warm fields, were not made into rules.

Key visual with gradient headline
Key visual · gradient headline, corner anchoring
Poster with orange headline and warm field
Poster · Ignition field, orange display type
Stack of reports
Reports · Horizon field, stacked logo top-left
Stationery set
Stationery · cool and warm fields on white
Business cards
Cards · mono white logo on Ignition
Street banner
Banner · grey and gradient headline
Brochures
Brochures · logo top-left, headline bottom-left
Event stage screen
Event screen · Transition field, 21:9
Branded bottle
Bottle · colour-on-dark logo on ink
Branded jacket
Workwear · stacked logo, tagline opposite
Key visual with cooling tower photo
Key visual · photography with white type

12 · Token inventory & traceability

Every value, with its source.

Loaded live from virea.tokens.json. Proposed values complete the system but are not official brand specifications; review them with the brand owner.

–confirmed

Extracted from the supplied assets: swatch sheet, logo files, Illustrator master, font file.

–inferred

Recurring patterns across the reference mockups.

–proposed

Added for completeness: UI states, scales, grid, motion.

Token · CSS variableValueSourceNotes
Loading tokens…

13 · Source notes & assumptions

What the files say, and what they don't.

Findings from the asset audit that affect how the system should be used.

Swatch sheet labels two colours wrongly

The orange and ember chips are labelled #93c641 and #00a16e, the codes of the green chips above them. The true values, sampled from the chips, are #EE8009 and #E86421 (±1 per channel from JPEG compression). Ask the designer to confirm the exact values.

Display, not Text

The brief names Forma DJR Text Regular, but the supplied files are Forma DJR Display Regular. The system uses Display for everything and keeps Text as a fallback slot. The file named .woff is actually a TrueType font; use the .woff2.

The symbol is a freeform gradient

The Illustrator master builds each petal with a freeform gradient. The SVG exports therefore contain the petals as embedded bitmaps, not vectors. They are fine on screen; for large-format print use the .ai master or request a vector PDF.

Gradient directions are inferred

No gradient specification exists in the files. Colours are official; angles and stop positions were read from the applications. The official GraphicElement artwork takes precedence over the CSS approximations.

Pink is a by-product, not a colour

Warm fields in the stationery and key visuals show a pink cast where ember dissolves into white. It is not in the palette, so it was not made into a token. It may appear only inside the official field artwork.

No interface references were supplied

All navigation, button, form, card, footer and motion values are proposed, derived from the identity's restraint. Validate them against a first product build.

Font licensing

Forma DJR is a commercial typeface. Confirm the web licence covers self-hosting before shipping the .woff2 on a public site.

Logo rules are proposed

No logo guidelines document was supplied. Clear space and minimum sizes are proposals; lockup proportions are measured from the files.

VIREA_BRAND_AI.md

Reusable instructions for AI design and coding tools.

tokens/virea.tokens.json

Source of truth, DTCG format, with source tags.

css/virea-tokens.css

Custom properties, responsive values, reduced motion, type classes.

tailwind/virea-theme.css

Tailwind v4 theme; default palette disabled.

tailwind/virea.preset.cjs

Tailwind v3 preset.

TOKEN_INVENTORY.md

Full inventory with evidence for each token.