---
title: Dark Mode Design Patterns
description: Best practices for dark-themed premium websites.
tags: [design, dark-mode, accessibility, patterns]
---

# Dark Mode Design Patterns

## Core Principles

### 1. Not Pure Black
- Background: `#0a0a0a` or `#111111` (not `#000000`)
- Pure black causes eye strain on OLED
- Subtle gradient: `#0a0a0a` → `#0f0f0f`

### 2. Surface Hierarchy
- Layer 1 (bg): `#0a0a0a`
- Layer 2 (cards): `#111111`
- Layer 3 (elevated): `#1a1a1a`
- Elevation via lighter shade, not shadow

### 3. Text Colors
- Primary: `#f5f5f5` (90% white)
- Secondary: `#a0a0a0` (60% white)
- Muted: `#666666` (40% white)
- Never use pure `#ffffff` (too harsh)

### 4. Border Treatment
- Use `rgba(255,255,255,0.08)` for subtle borders
- Hover states: `rgba(255,255,255,0.15)`
- Focus states: `accent-color` ring

### 5. Accent Colors
- Lighter variants work better on dark
- `#6366f1` → `#818cf8` for hover
- Ensure 3:1 contrast ratio for accents

## CSS Implementation
```css
:root {
  --bg-primary: #0a0a0a;
  --bg-surface: #111111;
  --bg-elevated: #1a1a1a;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --border-subtle: rgba(255,255,255,0.08);
  --accent-primary: #6366f1;
  --accent-hover: #818cf8;
}
```

## Anti-Patterns
- Never use pure `#000000` background
- Never use pure `#ffffff` text
- Never rely on shadows for elevation in dark mode
- Never skip contrast checking (WCAG AA minimum)