The 60-30-10 Rule
A classic interior design principle that translates perfectly to digital design. Use your dominant color for 60% of the design — typically your neutral background. Use your secondary color for 30% — primary surfaces, cards, navigation. Use your accent color for 10% — calls to action, highlights, interactive elements. This ratio creates visual balance while directing attention where you want it.
💡 Pro Tip
This ratio applies to area, not number of colors. You can have many colors in your palette — the question is how much visual real estate each one occupies.
Color and Hierarchy
Color is one of the most powerful tools for creating visual hierarchy — guiding the eye in the order you intend. High contrast signals importance. Saturated colors attract attention. Dark colors carry weight. Your primary call-to-action should typically be your most saturated, highest-contrast color element. Secondary actions should be less visually prominent.
Color for Interactive States
Interactive elements need at least three visual states: default, hover, and active/pressed. A simple approach: default is your base color, hover is 10–15% darker (more saturated or lower lightness), active/pressed is 20–25% darker. For focus states — critical for keyboard accessibility — use a 3px outline in a contrasting color with 2px offset.
💡 Pro Tip
Never remove the focus ring from interactive elements. Only replace it — if you find the default browser focus ring ugly, create a custom one that meets the 3:1 contrast requirement.
Background and Surface Colors
Modern interface design uses subtle elevation through color. The background (canvas) is the darkest or most muted surface. Cards and panels sit on top as slightly lighter surfaces. Modals and overlays float highest and appear lightest. In light mode, increase lightness by 2–4% per elevation level. In dark mode, decrease darkness by the same amount.
💡 Pro Tip
Use a maximum of three surface levels in a single view. More than three and the elevation system starts to feel arbitrary and confusing.
Dark Mode Considerations
Dark mode is not simply inverting your light palette. Pure black (#000000) backgrounds create uncomfortable contrast with bright text. Use dark grays (e.g., #121212 or #1a1a1a) instead. Reduce saturation of primary colors slightly in dark mode — vivid colors look neon against dark backgrounds. Test all color combinations in both modes from the beginning of a project.