Mercury Glass.
A liquid-chrome material system for Showhub: translucent graphite surfaces, a single electric-blue accent, and chrome highlights — slick, restrained, and built to read in dim venues across every surface from a 7″ operator panel to a fleet dashboard.
Five rules that make it Mercury#
Depth comes from translucency, blur and a top specular edge — not borders, gradients-as-fills, or drop shadows used as ornament.
Electric blue marks the live, the active, the primary. Everything else is graphite and chrome. Colour is earned.
The brightest object on screen is the thing to tap. Reserve the chrome gradient for one primary per view.
Show surfaces lean into blur and glow; portals trade blur for solid panels and tabular Space Mono for legibility.
Module identity always pairs a tint with an icon and a label, so it survives glare, colour-blindness and a room at distance.
Core palette#
Graphite base, cool neutrals, one accent, chrome for highlights. Hexes are the opaque reference values; glass surfaces are these tones at 44–55% over the ambient background. Click any swatch to copy its value.
Per-module accents
Each of the six modules carries a muted-jewel tint. Always paired with the module icon + label — never used as the only signal. Click to copy.
Space Grotesk + Space Mono#
Space Grotesk carries all UI — technical, modern, a little characterful. Space Mono handles every number, timecode, ID, label and status, giving readouts a precise, instrument feel. Both are OFL: self-hostable and embeddable in air-gapped builds.
An 8-point grid, soft corners#
Spacing scale
Corner radius
Hardware corners stay soft but never fully round except for status pills and avatars. Touch targets ≥ 44px; primary touch buttons 56–66px.
The glass recipe#
Every surface is one base recipe: a blurred, saturated translucent graphite fill, a hairline cool border, an inner top highlight, and a diagonal specular sheen. Glass needs colourful content behind it to read — place panels over the ambient gradient + drifting orbs, never over flat black.
/* base surface — use on every card, bar, tile */ .glass { backdrop-filter: blur(26px) saturate(180%); background: linear-gradient(160deg, rgba(46,51,62,.5), rgba(16,18,24,.44)); border: 1px solid rgba(184,200,232,.16); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(214,226,255,.18), 0 18px 40px -18px rgba(0,0,0,.6); } /* diagonal specular sheen (::before, z-index 2) */ .glass::before { background: linear-gradient(150deg, rgba(220,232,255,.14), transparent 40%); }
/* chrome control — ONE primary per view */ .btn-chrome { background: linear-gradient(160deg,#EEF3FF,#9FB0DE); color: #0B0C0F; box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 12px 28px -10px rgba(174,190,255,.6); }
Tuning by surface — live
Tuning by surface: show / operator surfaces use blur 26–34px for drama; portals drop to solid #14171D panels (no blur) so dense data stays crisp and AA-safe. Toggle the same panel between the two treatments — the orbs behind it are exactly what production screens drift beneath the glass.
The kit#
Every specimen below is live — hover, press and type. Chrome buttons lift on hover and depress on press; keys travel 2px; selected chips carry the blue glass fill.
Chrome = primary (one per view). Glass-blue = secondary/active. Ghost = tertiary.
Selected chip carries the blue glass fill; rest stay neutral. Click to toggle.
Slick, never frantic#
Motion is smooth and purposeful. Surfaces drift; content fades and slides a short distance; the brand "lenses" into focus. Always honour prefers-reduced-motion and never transition visibility (toggle it instantly; fade opacity instead). Each card below runs the real curve at real duration — replay to scrub.
Forward slides left, back slides right. Visibility flips instantly underneath.
Background colour fields drift slowly so glass always has live content to refract.
New queue rows / list items settle in from above with the accent border.
The chrome lens forms and sharpens, then the wordmark fades up.
Keys and buttons depress; chrome buttons lift on hover. Try it — these are live.
Reserved for the on-air dot only — the single looping element allowed on content.
Legible in the dark, by anyone#
Body text on glass meets 4.5:1; large text and UI meet 3:1. Glass fills are kept opaque enough (≥44%) over controlled backgrounds to hold contrast.
Status and module identity always pair tint + icon + text label, so meaning survives glare and colour-blindness.
≥44px everywhere; primary show/operator actions 56–66px with generous spacing — usable by non-technical staff at speed.
Audience surfaces scale type far above UI minimums; status uses pulse + label, not subtle colour shifts.
All drift, pulse and entrance animations collapse to static end-states under prefers-reduced-motion. This page does the same — try it in your OS settings.
Accent focus rings on interactive elements; type set in rem so OS text-scaling reflows cleanly. Tab through this page to see the rings.
● Do
- Put glass over the ambient gradient + orbs so it refracts
- Keep one chrome primary action per view
- Pair every module colour with its icon and label
- Use Space Mono for all numbers and statuses
● Don't
- Stack glass on flat black — it turns into a grey box
- Tint large areas with the accent or module colours
- Transition
visibilityor loop decorative animation on content - Drop below AA to keep a panel more transparent
tokens.css — canonical values#
The complete :root custom-property set from mercury/tokens.css — the source of truth for every build. Click a row to copy the var() reference. Values here must never drift from the file.
Base, accent & text
State
Borders
Module gels
Type & radius
Fonts are OFL — self-host both families for the air-gapped production build. font-synthesis:none is set on :root so faux bold/italic never sneak in.