Electronic Materials Office®. Incandescent ember in a charcoal gallery.
- Commerce
- Dark theme
- 7 colors
- 3 typefaces
Electronic Materials Office is a nocturnal atelier: matte charcoal canvas, a single incandescent orange ember, and type that whispers rather than declares. The interface treats every screen like a darkened studio — the keyboard product photographs are the only true light source, and the UI surrenders to them. Headlines at weight 200 in GT-Flexa float in vast negative space; body text is deliberately small and humanist (Times). Color is rationed: pure white for type, a desaturated violet (#9e9eff) for links, and one orange (#f45500) CTA per page that glows with its own 30px bloom. Components stay flush to the 20px radius, borders whisper at #9d9d9d, and the only shadows in the system are those two colored halos around the primary action.

Electronic Materials Office® design system
Brand1
Filled primary action button — the only chromatic surface in the UI, always paired with a 30px orange halo so it glows like a filament; 30px outer glow on the primary CTA — duplicates the Ember Orange hex but exists as a box-shadow, not a fill, so the button appears lit from within
Accent1
Inline link color and the outlined secondary action border — a desaturated cool counterpoint to the warm orange ember, keeping actions readable against charcoal
Neutrals5
Deepest accent for icon strokes and contrast borders where the charcoal canvas is too light to hold an edge
Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness
Muted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud
Light surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas
Primary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Carbon on Ember Orange
6.15 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











