Turbine Design System

Modular power built to give back with endless energy.

Brand colour and typography applied from the X-Group brand guide. No build step, no dependencies, fonts self-hosted.

One discrepancy to resolve

The guide's body copy names the accent #A6CE39, but the swatch beside it specifies #84BD00 (CMYK 54.3.100.0 · RGB 132-189-0 · Pantone 376 C). This system uses #84BD00, the fully specified value. Worth confirming with the client.

Typography

Three faces, each with one job. Self-hosted, latin subset, 56 KB total.

Primary — headings and titles

Aa

Open Sans ExtraBold

The only heading weight the guide supplies, so there is deliberately no lighter heading option.

Secondary — contrasting subheadings

Aa

Roboto Thin

Never below --text-subhead-min (1.2rem). Thin is the first thing to break on a poor display or in bad light.

Body — paragraphs

Aa

Roboto Regular

Modular power built to give back with endless energy.

Scale

--text-3xlTurbine 01
--text-2xlTurbine 01
--text-xlTurbine 01
--text-lgTurbine 01
--text-mdTurbine 01
--text-smTurbine 01
--text-xsTurbine 01

Colour

Brand

The five core values, exact. The guide says not to deviate from these or create tints of them — so this system doesn't.

--brand-green
#84BD00
Pantone 376 C
--brand-grey-light
#BCBEC0
Cool Grey 3
--brand-grey-mid
#6D6E71
Pantone 424 C
--brand-black
#000000
--brand-white
#FFFFFF

How green behaves

Correct

Black on green — 8.7:1

Green as a background, exactly as the guide recommends.

Not usable for text

Green on white — 2.1:1

Fails WCAG by a wide margin. This is why links are underlined rather than coloured.

Functional status

Not brand colours — these need client sign-off. The brand set cannot express a fault: you can't signal an alarm in grey, and green already means normal. These are the minimum needed to communicate state safely, kept desaturated so they sit beside the brand rather than competing with it.

normal
brand green
watch
not brand
warn
not brand
alarm
not brand
offline
Pantone 424 C

Space

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8

Components

Buttons

Fields

Scoped to authentication — sign in, sign out, reset password. Not a general form kit. Controls are 44 px minimum (--target-min), not the 36 px used for dense desktop toolbars, because these screens are used on field iPads.

At least 12 characters.
Enter a valid email address.
Checkbox

Status

Dot plus label — never colour alone.

Normal Watch Warning Alarm Offline

Badges

Outlined, not filled — a tinted background would be a tint of a brand colour, which the guide rules out.

Neutral Accent Online Derated Service due Fault

Alerts

Scheduled maintenance

North Ridge offline Tuesday 02:00–06:00.

Metrics

Output2.41 MW▲ 4.2% vs 1h
Wind speed11.8 m/s— steady
Rotor14.2 rpm▼ 1.1% vs 1h
Availability98.6 %▲ 0.4 pt

Table

TurbineSiteStatusOutput (MW)Wind (m/s)
TRB-0042North RidgeNormal2.4111.8
TRB-0043North RidgeWatch1.9811.4
TRB-0017Caldera FlatsAlarm0.009.2
TRB-0018Caldera FlatsOffline—9.1

Patterns

Components composed into the shapes the product actually needs.

Sign in

The three auth screens compose from the same pieces. Shown here as a real form so spacing and target sizes can be judged.

Sign in

Reset password

Reset password

Reset password

We'll email a link to reset it.

Back to sign in

Asset card

TRB-0042

Online

North Ridge · Commissioned 2021

Output2.41 MW

TRB-0017

Fault

Caldera Flats · Commissioned 2019

Output0.00 MW

Build status

Against the engineering build guide. Ticks are a visual only — nothing here is saved or reported.

Built

Not built

Reserved so the manifest is complete. No markup, no styles, deliberately no example — an invented example is worse than an empty slot, because it gets copied.

M2 · Sidebar nav — item default, active, collapsed

M2 · Tabs — active, disabled

M2 · Operating-state stepper — complete, current, upcoming

M3 · Chart frame — default, empty, loading, error

M3 · Layout shell — laptop, iPad

Naming alignment — adopt guide names for .card / .metric