Dark Mode UI Design System

Act as a senior product designer specialising in dark mode and accessibility. Design a complete dark mode UI system for [PRODUCT TYPE — e.g. developer tools product]. Output as a structured design token reference sheet.

SECTION 1 — DARK COLOR PALETTE (provide every hex code)

Background Levels (6 levels — not just one black):
• Level 0 (deepest): the absolute darkest background (e.g. body/app background)
• Level 1: slightly lighter — for sidebars, secondary panels
• Level 2: card background
• Level 3: elevated card, modal background
• Level 4: hover state on cards
• Level 5: input field background
Explain the relationship between levels and how elevation is communicated through lightness, not shadow.

Primary / Accent Color (brand color adapted for dark):
• Original light mode version vs. dark mode adjusted version
• Why the adjustment is needed (saturation shift, lightness boost)
• Provide both hex codes and the WCAG contrast ratio against each background level

Semantic Colors on Dark Surfaces:
For each — success, warning, error, info:
• Background version (subtle fill for alerts/banners): hex
• Foreground version (text and icon): hex
• Border version: hex
• WCAG contrast ratio against Level 2 background

Text Colors:
• Primary text (body): hex + contrast ratio on Level 0 background
• Secondary text (captions, labels): hex + contrast ratio
• Disabled text: hex + contrast ratio (can be below AA — explain when this is acceptable)
• Links: hex + hover state hex
• On-accent text (text sitting on primary color): hex

SECTION 2 — TYPOGRAPHY ON DARK
• Why pure white (#FFFFFF) body text is wrong on true dark backgrounds — explain and give the correct value
• Recommended body text colour hex and reasoning
• Code block text: mono font colour
• Inline code: background and text hex

SECTION 3 — COMPONENT ADAPTATIONS
For each component, describe what changes from light to dark — not just background swap:

BUTTON (Primary, Secondary, Ghost, Destructive):
• Background, text, border for each variant in dark mode
• Hover state changes
• Focus ring: colour and width

INPUT FIELD:
• Background, border, placeholder text, active border
• Error state in dark
• Autofill background override (explain the browser issue and CSS fix)

CARD:
• Background (which level), border (yes/no — and when)
• Shadow: why standard box-shadows don't work on dark and what to use instead (lighter surface or glow)

MODAL / DIALOG:
• Background, overlay (scrim) opacity and colour
• Divider line colour

SIDEBAR:
• Background level, active item treatment, hover treatment
• Icon colour: full white vs. muted — recommendation

CODE EDITOR PANEL:
• Background (should be different from app background — why)
• Gutter background

SECTION 4 — ELEVATION SYSTEM ON DARK
• Explain why box-shadow (which uses dark colours) fails on dark backgrounds
• The correct approach: use lighter surface colours to indicate elevation
• Map each elevation level to the corresponding background level from Section 1
• When (and only when) to use a subtle glow shadow — give the CSS value

SECTION 5 — WCAG CONTRAST AUDIT TABLE
Create a table: Text Color | Background | Contrast Ratio | Pass AA (4.5:1) | Pass AAA (7:1)
Include rows for: primary text on each background level, secondary text on Level 0, link text on Level 0, primary button text on primary colour.

SECTION 6 — SYNTAX HIGHLIGHTING PALETTE (8 token colours)
For a code editor in dark mode, define:
• Keywords (if, for, return): hex
• Strings ("hello"): hex
• Numbers (42, 3.14): hex
• Comments (// this is): hex
• Functions (myFunction): hex
• Variables (const, let): hex
• Types / Classes (String, Array): hex
• Operators (+, =, =>): hex
Ensure all 8 are distinguishable from each other and readable on the code panel background.