Living reference

Style guide

Every type style, button, card surface, glyph and block the site ships, rendered live from the real presets and content. If it looks right here, it looks right everywhere. Jump to Glyphs or the Block library. Regenerate with wp eval-file bin/assemble-styleguide.php.

Typography

Type ramp

Power without the noise

Large — 18px

Power without the noise

Body — 16px · weight 300

Power without the noise

Small — 14px

Power without the noise

Caption — 11px

Power without the noise

Heading elements (h1–h4 carry weight, case and colour automatically)

Heading one — 900 caps ink

Heading two with orange emphasis

Heading three — subheading

Heading four — small caps title

Eyebrow paragraph style (Syncopate)

Experience the shift

Brand case survives CSS uppercase automatically

The eGEN 150 keeps its casing

“Keep typed case” block style — the manual opt-out

This heading renders exactly as typed

Links

Body copy is Red Hat Display 300 with a 1.55 line height, and inline links render orange with a darker hover.

Icons

Glyphs, the full set

All 32 glyphs from the Glyph block, drawn from the plugin’s registry, so a new glyph appears here on the next run. Pick one in the block, then set its size, colour and animation. Missing a glyph? Add it to GLYPH-REQUESTS.md in the glyphs plugin, with the copy that needed it.

Agriculture

Australia

Braking

Charging

Compact

Construction

Data

Digging

Efficiency

Emissions

Environment

Factory

Fuel

Genset

Leasing

Less Fuel

Maintenance

Mining

Monitoring

No Generator

Noise

Output

Play

Powerlines

Powerplant

Safety

Savings

Scalable

Speed

Spinpower

Support

Transportable

Sizes

Size: Small, Medium, Large or Extra large — or a custom pixel size

Small · 40px

Medium · 80px

Large · 168px (default)

Extra large · 240px

Colours

Text colour from the palette; with none set, the glyph takes the colour of the text around it

Inherit (the text colour)

Orange

Green light

Green

Grey light

Animation

Animation: As designed or Still · Starts: On page load or When scrolled into view. Visitors who ask for reduced motion always get Still.

As designed · on page load

As designed · when scrolled into view

Still

Actions

Buttons

Three buttons: Primary is orange solid, Secondary is the orange outline, Ghost is a grey outline for the quietest action. Green solid and green outline exist for a surface that is explicitly green, and the text-only pair is for a link that has to sit in a button row. Every one wears the chamfer; hover always deepens, never bounces.

Actions on dark surfaces

Buttons on ink

Primary on dark

Secondary on dark

Ghost on dark

Surfaces

Every card style

Cards are named styles on the Group block — Group, Row, Stack and Grid all accept them. A plain group stays a layout tool; the style is what makes it a card.

Card — is-style-pwr-card

Card

White surface, hairline border, small shadow, 32px padding baked in.

Outline card — is-style-pwr-card-muted

Outline card

A thin grey ring and nothing else — the surface shows through.

Stat card — is-style-pwr-stat

Stat card

White tile with the orange top bar. On a product series page the bar takes the series colour.

Behaviour

Cards in columns 25 / 50 / 75

The same Card at three column widths. Square corners, the same ring and the same 32px padding at every width — never a control; always proportionate.

Narrow

Small cut.

Wide

The corner cut grows with the column — same style, zero configuration.

Learn more

Outline card at 50%

The quiet companion: a ring, no fill.

Card at 50%

Cards keep square corners — the chamfer belongs to images, buttons and the green callout.

Card at two-thirds

Room for a proper CTA.

Learn more

Outline at one-third

Quiet companion content.