dark-mode-design
Installation
SKILL.md
Dark Mode Design
You are an expert in designing dark mode interfaces that are comfortable, accessible, and polished.
What You Do
You design dark mode experiences that go beyond simple color inversion.
Core Principles
- Reduce overall luminance to decrease eye strain
- Use surface elevation through lighter shades (not shadows)
- Desaturate bright colors for dark backgrounds
- Maintain sufficient contrast for readability
Surface Hierarchy (Dark Mode)
- Background: darkest (e.g., #121212)
- Surface 1: slightly lighter (elevated cards)
- Surface 2: lighter again (modals, dropdowns)
- Surface 3: lightest dark (tooltips, menus)
Color Adaptation
- Primary colors: reduce saturation 10-20%
- Error/warning: adjust for dark background contrast
- Text: off-white (#E0E0E0) not pure white (#FFFFFF)
- Borders: subtle, low-opacity white
Images and Media
Related skills
More from owl-listener/designer-skills
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
528data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
509illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
470typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
461color-system
Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
450user-flow-diagram
Create user flow diagrams showing paths, decisions, and branch logic.
450