Elektron

Elektron, dark-mode, technical

Preview image. Unlock full-res

Digital console in midnight. A world of precise, glowing information contained within a dark, structured shell.

Industryother, hardware
Palette
#000000
#151515
#222222
#333337
#6a6a6
#b4b4b8
#eeeef2
#ffffff
#ffcc00

This design system evokes a high-fidelity control panel, where functional elements are precisely rendered against a deep, uniform darkness. The visual atmosphere is serious and technical, achieved through minimal color and sharp contrasts between almost-black backgrounds and near-white text. This stark aesthetic prioritizes clarity within a complex interface, using a restricted palette to focus attention on interactive elements and critical information, allowing for subtle visual depth through varied text weights and button styles. Use Absolute Zero (#000000) for page backgrounds to establish the deep, dark canvas. Apply Control Panel Black (#151515) for main interactive surfaces like cards and elevated sections to create subtle depth. Prioritize Off White Text (#eeeef2) for body text and navigation elements against dark backgrounds for optimal readability. Employ White Glow (#ffffff) sparingly for critical headlines and active states that demand immediate attention. Maintain 0px border-radius for most elements like buttons, reinforcing the sharp, technical aesthetic. Utilize Neue Haas Grotesk Text Pro for body text at various sizes (11px-35px) with specific negative letter spacing to achieve a modern, dense textual presentation. Use specific digital fonts (digi one v2, Analog One V2.) for any element requiring a retro-tech or numerical display, preserving the unique brand character. Avoid using bright or overly saturated colors, except for the defined 'Amber Indicator' accent, to maintain the control panel aesthetic. Do not introduce rounded corners beyond the 7px radius for specific input fields; maintain sharp edges elsewhere. Steer clear of gradients or soft shadows that would soften the hard-edged, precise visual identity. Do not use generic system fonts for headlines or special numbers; Neue Haas Grotesk Display Pro and the unique digital fonts are integral to brand recognition. Avoid large, airy padding or excessive white space between elements where information density is intended, as the system favors a compact layout. Do not break the dark theme with light sections unless specifically defined by brand guidelines, as the overall mood is consistently dark.

More like this