Duotone Design

Duotone Design is a design-style child skill ('striking contrast - photography and UI stripped down to exactly two clashing or complementary colors'), part of the design-it family and not meant to be triggered directly. Three core principles: Two Colors Only (the entire design maps to a single dark color replacing blacks/shadows and a single light color replacing whites/highlights), Treated Imagery (all photos must be processed into the duotone palette, not left in their original colors), and Bold, Flat Typography (text is usually massive, solid, and rendered in one of the two colors).

Use it when the user's request matches this stripped-down, high-contrast two-color aesthetic - bold editorial layouts, music/event branding, or striking hero sections that want a graphic, poster-like punch. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA calls for very high-contrast color pairs - Navy and Peach, Deep Purple and Neon Green, Crimson and Cream, drawing from Industrial Chic for inspiration - paired with heavy, condensed sans-serifs (League Gothic, Oswald) and gritty, high-contrast photography that maps cleanly to two tones. The signature technique is achieving a genuine image duotone effect in modern CSS without Photoshop, using mix-blend-mode and filters: the image is converted to grayscale and contrast-boosted (filter: grayscale(100%) contrast(1.5)), then multiplied against a light-colored background (mix-blend-mode: multiply), and a dark-color overlay is screened on top (mix-blend-mode: screen) to complete the two-tone mapping - CSS variables (--duo-dark, --duo-light) drive the whole palette from one source of truth, and even interactive elements like buttons stay strictly within the two-color system - a duotone button simply swaps which of the two colors is the fill versus the text, with heavy font-weight: 900 uppercase labels reinforcing the bold, flat, poster-like feel.

.duotone-container img {
  filter: grayscale(100%) contrast(1.5);
  mix-blend-mode: multiply;
}
.duotone-container::after {
  background-color: var(--duo-dark);
  mix-blend-mode: screen;
}

SwiftUI reproduces the identical two-pass blend technique natively: .grayscale(1.0) plus .contrast(1.5) on the image, .colorMultiply(duoLight) to multiply in the light tone, and a duoDark color layered on top with .blendMode(.screen) - directly equivalent to CSS's screen blend mode, achieving the same duotone conversion without any external image processing step.

Designers and developers building bold, poster-like visuals - editorial layouts, event or music branding, striking hero sections - who want a genuine, code-driven two-color image treatment instead of manually pre-processing every photo in an external tool.