Strip away the noise. Reduce to two tones. Map shadows to one, highlights to another. Watch everything come alive with bold, graphic clarity.
Clean, geometric sans-serifs that do not compete with the color treatment. The palette does the work. The type stays bold and structural.
Archivo Black at display scale creates maximum graphic impact. The heavyweight letterforms echo the boldness of the duotone treatment itself. Used for hero headlines and key moments.
Space Grotesk brings geometric precision and contemporary energy to headings. Paired with Inter for body text, the contrast in weight mirrors the two-tone contrast philosophy at the heart of duotone design.
Bebas Neue provides tall, condensed poster-style headlines. Perfect for all-caps treatments that maximize vertical impact while maintaining the clean geometry the aesthetic demands.
Duotone restricts the palette ruthlessly. One color anchors the darks. The other illuminates the lights. Everything in between is a gradient.
From CSS blend modes to SVG filters, these techniques transform ordinary imagery into bold, two-color graphic statements. Hover to reveal the original.
Flat color fields alongside treated images. Solid blocks of the two palette colors used for cards, sections, and interface elements.
Shadows map to one color, highlights to another. This fundamental print technique translates directly to digital through SVG feComponentTransfer filters.
Core TechniqueCSS mix-blend-mode: color on a gradient overlay atop a grayscale image. Resolution-independent, performant, and controllable entirely from CSS.
CSS NativeSmooth gradients flowing from the shadow color to the highlight color. Used in backgrounds, dividers, buttons, and text treatments for cohesion.
Visual SignatureDuotone treatment unified 200+ images under a single cohesive visual identity, transforming disparate photography into a consistent brand language.
View ProjectEvery image is desaturated to grayscale, then remapped through a two-color transfer function. Shadows anchor, highlights illuminate.
Learn MoreTwo colors is all it takes to make an unforgettable impression. The power of duotone lies in subtraction.
Start a ProjectSince duotone is defined by its color pair, switching palettes is as simple as overriding two custom properties. Each pair carries its own emotional weight.