Duotone Design

Duotone Design

"Striking contrast. Photography and UI stripped down to exactly two clashing or complementary colors."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Two Colors Only: The entire design is mapped to a dark color (replacing blacks/shadows) and a light color (replacing whites/highlights).
2. Treated Imagery: All photos MUST be processed into the duotone palette.
3. Bold, Flat Typography: Text is usually massive, solid, and uses one of the two colors.

Visual DNA

• Colors: Very high contrast pairs. Navy and Peach, Deep Purple and Neon Green, Crimson and Cream. Look at Industrial Chic for inspiration.
• Typography: Heavy, condensed sans-serifs (e.g., League Gothic, Oswald).
• Imagery: High-contrast, gritty photography works best when mapped to duotone.

Web Implementation

• Modern CSS can achieve image duotone effects without Photoshop, using mix-blend-mode and filters.
• CSS Example:

:root {
  --duo-dark: #1E0045; /* Deep Purple */
  --duo-light: #CCFF00; /* Neon Lime */
}

body {
  background-color: var(--duo-dark);
  color: var(--duo-light);
}

/* CSS Duotone Image Effect */
.duotone-container {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: var(--duo-light); /* Base color */
}