Design System · v0.2.1
Tokens, the brand face and twenty primitives, published as @engineio/ui. Every component below is the shipped component — this page imports the package, so what renders here is what a product gets.
Section 00
Vector artwork from the brand team, in the only two colourways the brand sanctions — Pure White for dark surfaces, Off Black for print and inverted panels. The wordmark is a custom soft-rounded face, not Proxima Nova: it is artwork, never set in type and never approximated.
Wordmark — master brand surfaces
Figure mark
Secondary, on an inverted panel
Scale — height-only, never both dimensions
Colour is a two-value variant rather than currentColor on purpose: with currentColor any ancestor's text colour silently becomes brand colour, and a magenta wordmark is one careless text-primary away. Size by height alone — the brand forbids distortion, and neither the 810:1000 nor the 2000:449 ratio is one anybody reproduces by hand.
Section 01
The brand is three colours. Everything else is a neutral step between the outer two. One accent per surface, never two — and no gradients, no coloured borders, no light theme.
Brand
Off Black
#0E0E0E
--color-background
Pure White
#FFFFFF
--color-foreground
Magenta
#FF006A
--color-primary
Magenta Press
#D60059
--color-primary-press
Partner Yellow
#FFDD00
--color-partner-yellow
Neutral ramp
grey-950
grey-900
grey-850
grey-800
grey-700
grey-600
grey-500
grey-400
grey-300
grey-200
grey-100
grey-050
Status — functional only
Success
#00C46A
--color-success
Warning
#FFB020
--color-warning
Danger
#FF3B30
--color-danger
Status is functional colour: it reports state and nothing else. It is never decoration, never a second accent, and never a stand-in for magenta. Ink on a status fill is always Off Black — white fails AA on all three. There is deliberately no info colour: the obvious choice is a blue, and any blue here would read as the retired Sportsbook Blue returning. Use the neutral ramp for informational states.
Section 02
Proxima Nova only — Bold for display, Semibold for UI labels, Regular for body. Title Case for headlines, UPPERCASE only for small structural labels. No all-caps headlines, no italics, no other typefaces.
Display 1
Accelerate Growth.
Display 2
Accelerate Growth.
Headline
Accelerate Growth.
H1
Accelerate Growth.
H2
Accelerate Growth.
H3
Accelerate Growth.
Subtitle
Accelerate Growth.
Body
Accelerate Growth.
Caption
Accelerate Growth.
Mono
GAME_ID 7f3a91c2 · RTP 96.42% · 2300 live games
Section 03
Radii by role, never mixed arbitrarily on one surface — the outer frame is always larger than the inner panel. Two border weights only: 1px hairline for structure, 1.5px for container rules.
Radii
Tag
6px
Field
10px
Media
14px
Card
18px
Frame
26px
Control
999px
Section 05
One chip for every job, in the soft repository-label treatment — tinted fill, matching ink, 6px radius. Badge and Tag used to be separate components with a rule about which was which; this is the merged one. Fills are translucent by design, so a chip reads the same on the page, on a card and on a table tile.
Brand and neutral
Status — functional only
The same chips on a card surface
There is no solid variant: an opaque fill can only be right on one surface, and the old solid secondary vanished on a table tile. The status variants are functional, not categorical — reach for success when something has actually succeeded, never because green suited the row. The brand chip's ink is primary-300 rather than pure magenta: magenta on its own tint is 4.37:1, and the brand forbids magenta text below 15px bold. That also retires the old badge's white-on-magenta at 11px, which was 3.9:1 and a known AA failure.
Section 05b
The panel is always neutral. A 3px bar down the left edge is the only thing that says good, bad or warning — the fill, the rule and the type never change. A column of alerts reads as one surface with state down its side, rather than as four different components.
The bar is aria-hidden, so the title has to carry the message with the colour ignored entirely — "Upload failed." rather than "Error." The neutral variant takes a grey bar rather than none, so a mixed stack keeps its left edge. Pass onDismiss to get the close control; omit it for a static alert.
Section 06
40px height, 10px radius, 1px hairline border on the grey ramp. Focus swaps the border to magenta and adds the ring. All three share the `field` utility, so the focus treatment is defined exactly once.
Section 07
Checkbox at 18px with a 6px radius, radio as an 18px circle, switch as a 44 × 24 track. Magenta fill when on, knob travels in 140ms.
Switch
Checkbox
Radio
Progress
Section 08
Off-black panel, 1.5px rule, 18px radius, with an inner panel at 10px holding artwork. Hover lifts the rule — not a shadow, not a transform.
Monochrome machined objects. Never people, never warm tones.
Monochrome machined objects. Never people, never warm tones.
Monochrome machined objects. Never people, never warm tones.
Section 09
Two flavours. Pill is the default; underline is the section-level treatment — a hairline rule with a 2px magenta marker under the active tab. No pill-background tabs at section level.
Section 10
Dialog scrim is rgba(10,10,10,.72) with an 18px blur — this and the sticky header are the only sanctioned uses of blur. Panels enter over 220ms and exit over 140ms.
Dialog, Popover, Tooltip
Section 11
Ruled, not tiled. No frame, no fills, no gaps — the surface behind shows through and a hairline under each row does all the structural work. Headings are Bold 13px in Pure White, Title Case, separated from the body by a rule one step stronger than the dividers.
| Game | Studio | RTP | Status |
|---|---|---|---|
| Turbine Rush | Northwind | 96.42% | live |
| Manifold | Grayscale | 95.18% | draft |
| Keycap Klondike | Northwind | 96.01% | live |
| Pipework | Grayscale | 94.87% | draft |
| 4 games | 2 studios | 95.87% |
Hover a row for the 6% white wash. The second row is data-state="selected" — the magenta tint, never a coloured border or an edge accent, both of which the brand rules out. Because the cells carry no fill there are no fill collisions: a Badge, a Separator or an unchecked Switch reads correctly in any column, which the gapped-tile treatment could not promise.
Section 12
Loading states stay on the grey ramp. A divider is a 1px hairline — never a coloured rule.
Below the rule.