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
Numeric — metrics and code
Aa
Roboto Mono
Scale
Open Sans ExtraBold
h1 · --text-3xlTurbine 01h2 · --text-2xlTurbine 01h3 · --text-xlTurbine 01h4 · --text-lgTurbine 01h5 · --text-mdTurbine 01h6 · --text-smTurbine 01Open Sans Regular
--text-xlTurbine 01--text-lgTurbine 01--text-mdTurbine 01Roboto Regular
--text-lgTurbine 01--text-mdTurbine 01--text-smTurbine 01Roboto Mono
--text-2xl2.41Leading
--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.
In 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.
Color
Callout
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.
Brand
#84BD00
Pantone 376 C
#BCBEC0
Cool Grey 5
#6D6E71
Pantone 424 C
#000000
#FFFFFF
Usage proportion
- White 50%
- Black 20%
- Grey 424 15%
- Green 10%
- Cool Grey 5%
Color matching
Passes — black on cool grey
Black on cool grey — 11.26:1
Passes — black on green
Black on green — 9.26:1
Passes — grey 424 on white
Grey 424 on white — 5.10:1
Not usable · below 4.5
Black on grey 424 — 4.12:1
Not usable · below 3.0
Cool grey on grey 424 — 2.73:1
Not usable · below 3.0
Green on white — 2.27:1
Not usable · below 3.0
Grey 424 on green — 2.25:1
Not usable · below 3.0
White on cool grey — 1.86:1
Space
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8Grid
Breakpoints
iPad768px and upLaptop1024px and upColumns
Below 768px · 1 column
iPad · 2 columns
Laptop · 4 columns
Classes
Live — you are below 768px, so every demo stacks to 1 column Live — you are on iPad width, 768px and up Live — you are on laptop width, 1024px and up
.grid — fluid, as many 240px columns as fit
.grid--2 — 1 column, 2 from iPad
.grid--3 — 1 column, 2 from iPad, 3 from laptop
.grid--4 — 1 column, 2 from iPad, 4 from laptop
Components
Links
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.
Sizes
Multiple
Buttons
Text
Sizes
Full width
Split
Fields
Metrics
Patterns
Sign in
Reset password
Build status
Built
Not built
.status
Status indicator — dot, badge, banner
.badge
Badge
.alert
Alert list item
.table
Data table — default, status rows, sortable header
Dark theme
Token set drafted, not reviewed — styleguide is light-only
.sidenav
Sidebar nav — item default, active, collapsed
.tabs
Tabs — active, disabled
.stepper
Operating-state stepper — complete, current, upcoming
.chart
Chart frame — default, empty, loading, error
Icons
Icon set — library, sizes, stroke weight