color-mode-and-theme
Color Mode and Theme
The Decision: Light, Dark, or Both
Color mode is a brand and context decision, not a personal preference. Make it deliberately.
Light (white design)
Tone: Open, trustworthy, content-forward, accessible, professional
Fits: Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus
Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box.
Dark (dark design)
Tone: Premium, focused, immersive, technical, high-contrast data
Fits: Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming
Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface.
Caution: Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode.
More from dembrandt/dembrandt-skills
nielsen-usability-heuristics
UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability. Use when auditing an interface, designing interaction flows, writing error messages, or reviewing any UI for usability issues.
53user-flows-and-guided-paths
Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product hierarchy. Use wizards for complex sequential tasks. Use when designing flows, onboarding, checkout, setup sequences, or any multi-step user journey.
52form-design
Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected format, and validation confirms correctness. Real-time validation for complex inputs. Submit enables only when the form is valid. Use when designing or reviewing any form, input field, or data entry UI.
52button-states
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should be derived algorithmically from the base colour, not chosen arbitrarily. Use when designing buttons, links, inputs, or any clickable component.
51semantic-html-and-seo
Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and accessibility.
50visual-emphasis-and-hierarchy
The most important actions and content in a UI should be visually prominent — through size, colour, weight, and position. Visual hierarchy guides the user's eye to what matters most and signals which action is primary. Use when designing button groups, CTAs, dashboards, cards, or any layout where actions or content have different importance levels.
50