X-Group Design System
Typography
Primary — headings and titles
Aa
Open Sans ExtraBold
Secondary — contrasting subheadings
Aa
Open Sans Regular
Body — paragraphs
Aa
Roboto Regular
Headings
h1 · --text-3xlTurbine 01
h2 · --text-2xlTurbine 01
h3 · --text-xlTurbine 01
h4 · --text-lgTurbine 01
h5 · --text-mdTurbine 01
h6 · --text-smTurbine 01
Metric readout
.tile__labelOutput.tile__value2.41 MWIn context
Rotor vibration exceeded threshold
North Ridge · TRB-0042 · reported 14 minutes ago
Vibration on the main bearing rose above 4.2 mm/s and held there for twelve minutes before the unit derated automatically. Output fell from 2.41 MW to 1.98 MW over the same window. Wind speed was steady at 11.8 m/s, so the change is unlikely to be load-related.
No manual intervention is required while the unit remains derated. A site visit is scheduled for Tuesday; if vibration exceeds 5.0 mm/s before then the unit will stop and raise an alarm.
What happens next
The unit stays derated until a technician clears the fault on site. Telemetry continues to report at the normal interval.
Leading
--leading-tight · 1.25
Vibration on the main bearing rose above 4.2 mm/s and held there for twelve minutes before the unit derated automatically.
--leading-normal · 1.5
Vibration on the main bearing rose above 4.2 mm/s and held there for twelve minutes before the unit derated automatically.
--leading-loose · 1.7
Vibration on the main bearing rose above 4.2 mm/s and held there for twelve minutes before the unit derated automatically.
Scale
--text-metric2.41--text-3xlTurbine 01--text-2xlTurbine 01--text-xlTurbine 01--text-lgTurbine 01--text-mdTurbine 01--text-smTurbine 01--text-xsTurbine 01Colour
One discrepancy to resolve
The guide's body copy names the accent #A6CE39, but the swatch beneath 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.
Brand
#84BD00
Pantone 376 C
#BCBEC0
Cool Grey 5
#6D6E71
Pantone 424 C
#000000
#FFFFFF
Usage proportion
- White 50%
- Green 20%
- Grey 424 15%
- Cool Grey 10%
- Black 5%
How green behaves
Correct — as a fill
Black on green — 9.26:1
Correct — as text on black
Green on black — 9.26:1
Not usable for text
Green on white — 2.27:1
Space
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8Components
Links
Base
In text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Standalone
Buttons
Text
Sizes
Full width
Split
Fields
Metrics
Patterns
Sign in
Sign in
Reset password
Reset password
Build status
Built
Not built
Status indicator — dot, badge, banner
Badge
Alert list item
Data table — default, status rows, sortable header
Token set drafted, not reviewed — styleguide is light-only
Sidebar nav — item default, active, collapsed
Tabs — active, disabled
Operating-state stepper — complete, current, upcoming
Chart frame — default, empty, loading, error
Layout shell — laptop, iPad