Skip to content
Library

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.

Screenshot of Electronic Materials Office®
Captured from electronicmaterialsoffice.com on October 11, 2026

Electronic Materials Office® design system

Electronic Materials Office®

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

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.