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.
#f45500Filled 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
#9e9effInline link color and the outlined secondary action border — a desaturated cool counterpoint to the warm orange ember, keeping actions readable against charcoal
#202020Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness
#ffffffPrimary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own
#9d9d9dMuted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud
#eaeaeaLight surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas
#000000Deepest accent for icon strokes and contrast borders where the charcoal canvas is too light to hold an edge
86px · 200 · 1 · 0px trackingThe quick brown fox jumps
68px · 200 · 1.06 · 0px trackingThe quick brown fox jumps
42px · 200 · 1.2 · -2.604px trackingThe quick brown fox jumps
32px · 400 · 1.2 · -1.536px trackingThe quick brown fox jumps
28px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
26px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
24px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
16px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Display and heading workhorse. Weight 200 carries every headline above 24px — the 200 weight is the signature: at 68px and 86px the letterforms dissolve into atmosphere rather than shout. Weight 400 steps in for sub-headings and card captions where a whisper isn't enough. Line-heights collapse toward 1.0 at the largest sizes so display type stacks like a column of breath.
Secondary display voice for section headers and the footer wordmark. Used at a step below GT-Flexa 200 to create tonal contrast — Tobias feels more architectural, more labeled, while GT-Flexa feels ambient. Negative letter-spacing tightens the wide proportions of the Tobias Light cut.
Body text and hero paragraph copy — a deliberate serif counterpoint to the geometric display fonts. The serif adds warmth and editorial gravity to product descriptions without ever growing larger than body size.
20px20px20px1px4px6px8px14px16px24px48px128pxBackground #f45500, white text at 16px GT-Flexa 400, 20px radius, horizontal padding 16px, vertical padding 1px (sits visually low and wide). Always wrapped in the 30px rgba(245,86,0,0.6) outer glow. The thin vertical padding is intentional — the button reads as a glowing bar, not a pill.
Transparent background, 1px #ffffff border at 20px radius, white text. Mirrors the primary CTA's dimensions but carries a softer 30px rgba(255,255,255,0.3) glow — like the orange button's monochrome echo.
1px #9e9eff border, 20px radius, lavender text. Functions as a quiet link-button — never used for purchase. The violet border separates navigation actions from the orange commerce action.
Color #9e9eff, no underline by default, GT-Flexa 400 16px. The only inline accent in the type system — it carries affordance without weight.
Charcoal (#202020) background matching the canvas, 20px radius, 1px #9d9d9d or #ffffff border, contains a centered product render with a floating 20px-radius Play pill button in the lower third. No shadow — the border is the edge.
Charcoal canvas (no surface lift), 20px radius, 1px #9d9d9d border, 24px internal padding, top half is a square product detail photograph with no internal padding (bleeds to the card edge, clipped by the 20px radius), bottom half holds a two-line caption in Tobias-light 32px (-1.5px tracking) or GT-Flexa 24px 400.
GT-Flexa weight 200, 68–86px, line-height 1.0–1.06, color #ffffff. No text-align override needed — left-aligned by default, tracking normal, line-height tight enough that multi-line headlines stack into a single column of light. Sits directly below the video card with a 48px gap.
Tobias-light 400 at 42px, letter-spacing -0.062em (-2.6px), all caps in the visual system, color #ffffff. Provides an architectural label that contrasts with the weight-200 GT-Flexa body headlines.
Times 400 16px, line-height 1.2, color #ffffff. Serif body on dark background — a deliberate humanist counterpoint to the geometric display fonts. Never grows past 16px; rarity is the point.
Transparent over the charcoal canvas, no background fill, no border. Left: brand mark '● Electronic Materials Office®' in white with a small orange dot prefix. Right: two ghost links (About, Updates) in #9e9eff + 1px border, then the Ember CTA. Vertical padding ~24px, sits flush to the viewport edges with internal page padding.
128px top margin from the last content block, charcoal background, Tobias-light wordmark or GT-Flexa 200 at 68px as a closing statement. No card surfaces, no borders — the footer is defined by the gap above it.
White fill, #000000 text reading 'Play film', 20px radius, ~16px horizontal padding. The only white-filled button in the system — functions as the inverse of the Ember CTA.
#202020Page background — the base of the gallery
#202020Feature cards and media frames sit on the same charcoal as the canvas, defined by 1px borders rather than surface shifts
#eaeaeaLight scrim or modal surface when the system inverts
Shadow is reserved for two moments only: the orange CTA and its white ghost sibling. Every other surface sits flat against the charcoal canvas, defined by 1px #9d9d9d or #ffffff borders rather than depth. The halo shadows on the buttons aren't really 'elevation' — they're lighting, treating each button like a small lamp placed in the gallery.
0px 0px 30px 0px rgba(245, 86, 0, 0.6)
0px 0px 30px 0px rgba(255, 255, 255, 0.3)
Full-bleed charcoal canvas with centered max-width content (~1200px). The hero opens with a 20px-radius media card containing the product film, sitting roughly 80% viewport width, followed immediately by a multi-line GT-Flexa 200 headline that wraps across nearly the full content width. Section rhythm: one feature section with a Tobias-light all-caps label, then a 2×2 (on desktop) card grid of feature tiles. Cards use 1px #9d9d9d borders and 24px gaps between them. Generous vertical breathing — sections are separated by 48–128px of charcoal negative space rather than dividers. Navigation is a single transparent bar pinned to the top with a ghost-link cluster and one Ember CTA. No sidebar, no mega-menu, no secondary navigation.
Imagery is product-only — close-up macro photography of the Altar I keyboard shot against pure black, lit from above so the chassis glows and keycap legends catch rim light. No lifestyle, no human hands, no environmental context. Treatment is consistently high-contrast and dark; the only color that escapes the monochrome palette is the orange power switch on the keyboard itself, which echoes the Ember Orange CTA. Images are square or 16:9, always contained within 20px-radius cards, and they bleed to the card edge (no internal padding around the photo, caption sits below the bleed). Icon style: the only iconography is the small filled circle (●) prefixing the wordmark — a single orange dot, weight ~6px.
Quick Color Reference - text: #ffffff - background: #202020 - border: #9d9d9d - accent (link/outline): #9e9eff - primary action: #f45500 (filled action) Example Component Prompts 1. Hero section: #202020 canvas, 20px-radius media card 1200px wide with a 1px #9d9d9d border, centered 'Play film' pill button (#ffffff fill, #000000 text, 20px radius). Below at 48px: GT-Flexa 200 headline at 68px line-height 1.06, color #ffffff, left aligned. 2. Feature card: 20px radius, 1px #9d9d9d border, charcoal background. Top half is a square product photograph bleeding to the card edge. Bottom half has 24px padding with a two-line caption in Tobias-light 32px weight 400, letter-spacing -1.5px, color #ffffff. 3. Create a Primary Action Button: #f45500 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. Ghost secondary action: transparent background, 1px #ffffff border, 20px radius, white text, 30px rgba(255,255,255,0.3) glow. 5. Outlined nav link: 1px #9e9eff border, 20px radius, #9e9eff text, ~8px vertical padding, 14px horizontal padding.
Same matte-black product-page gallery with a single saturated accent and ultra-light display type that treats the object as the only light source
Mechanical keyboard product pages built on dark charcoal canvases with generous negative space and minimal UI chrome around large product photography
Premium dark-mode hardware brand with a dot-matrix wordmark, restraint in color use, and product photography that bleeds to card edges
Matte dark product pages with serif body copy beneath large display headlines, treating each product drop like a gallery exhibition
Editorial dark surfaces with serif body text, all-caps section labels, and the discipline to use only one warm accent across the entire system
Use the design exports or connect Musterlab to your AI.
