Use when defining a color palette, picking shades, fixing washed-out colors, choosing greys, hitting accessibility contrast, or coloring data visualizations. Covers HSL over hex, palette breadth (~10 colors × 5–10 shades), defining shades upfront, hue-rotation tricks for brightness, warm/cool greys, accessible contrast, and not relying on color alone.
Use when adding shadows, working out elevation, making elements feel raised or inset, designing flat UIs with subtle depth, or layering components for visual interest. Covers light-from-above, shadow elevation systems, two-part shadows (direct + ambient), depth in flat designs via lightness, and overlapping elements to create layers.
Use when a UI is functionally complete but feels generic or unfinished — needs polish before shipping. Covers superchargeable defaults, accent borders, decorated backgrounds, empty-state-as-onboarding, fewer borders, and breaking out of conventional component shapes.
Use when a UI feels noisy, when nothing stands out, when buttons/nav/sections all compete for attention, or when you need to decide which element is primary vs secondary vs tertiary. Covers emphasis through weight and color (not just size), the grey-on-color trap, de-emphasizing competitors, label minimization, weight/contrast counterbalance, and action hierarchy.
Use when working with photos, icons, screenshots, or user-uploaded images. Covers picking quality photography, getting consistent text contrast over hero images, respecting an image's intended size (don't scale icons up, don't scale screenshots down), and defending layouts against unpredictable user-uploaded content.
Use when a layout feels cramped or arbitrary, when whitespace is being added by guesswork, when grids are forcing awkward sizes, when content groups feel ambiguous (which label belongs to which input), or when every screen size needs different magic numbers. Covers spacing scales, max-widths, grid escape hatches, mobile-first sizing, and the "more around than within" rule.
Use when starting a new UI, page, screen, or feature from scratch — design real features before chrome, work in low fidelity, ship the smallest version, pick a deliberate personality, and design from constrained systems instead of an open palette.
Use when picking fonts, defining a type scale, setting line-length and line-height, dealing with mixed-size alignment, styling links and buttons, or anywhere typography decisions are being made one pixel at a time. Covers hand-picked scales, font selection shortcuts, character-per-line targets, baseline alignment, inverse line-height/font-size, link restraint, alignment rules, and letter-spacing.