Dark Mode (OLED)

Contexto Histórico

Otimização OLED (2010s+). Pixels pretos consomem 0% bateria em telas OLED. GitHub, Twitter, Discord popularizaram dark-first design.

Quando Usar

Go full OLED dark when your audience is primarily mobile and you know they're on AMOLED screens. Financial dashboards where people stare for hours. Gaming interfaces. Creative tools used in dark studios. But here's the catch — pure #000000 backgrounds cause halation. White text on true black smears for people with astigmatism (that's like 30% of your users). So you need to be intentional. If your app is desktop-first or mixed-device, a standard dark gray is probably smarter. OLED dark is worth the extra effort when battery life and contrast ratio genuinely matter to your users.

Princípios de Design

• Use #000000 for primary backgrounds but #0a0a0a or #0d0d0d for content surfaces — the 1-2% brightness difference eliminates halation while still triggering OLED pixel-off on most panels.
• Limit text-shadow glow effects to interactive elements and headings only. A subtle 10px spread looks premium on OLED but turns into visual noise if applied to body copy.
• Design elevation through subtle luminance steps, not shadows. On a true black background, box-shadows are invisible — use background-color shifts of 4-8% lightness per elevation level instead.
• Never place pure white (#fff) text directly on pure black (#000). Drop to #e0e0e0 or #ebebeb for body text. Reserve full white for headings and critical UI elements where the contrast punch is intentional.
• Build your dark-to-light transitions with a 150-200ms ease-out and transition background-color separately from text color. OLED pixels turning on/off have different response times than LCD, and staggering prevents the flash effect.

Especificações Técnicas

Relacionados

Minimalismo & Swiss

Exaggerated Minimalism

Temas & Verticais

Inclusive Design

Minimalismo & Swiss

E-Ink / Paper

Brutalismo

Brutalism

Minimalismo & Swiss

Minimalism & Swiss Style