Post by @webloved

How I build with Astra 6 👇 Academy in bio 🔗 Duotone illustrations, the reason SaaS sites like this look art directed instead of stocky: 1. Kill the color first: img { filter: grayscale(1) contrast(1.1) } 2. Wrap it and add two layers. A ::before with background: #1B39F0 and mix-blend-mode: lighten, which maps every dark pixel to your brand blue 3. A ::after with background: #F2EFE6 and mix-blend-mode: multiply, which maps every white pixel to paper. Now the image only contains two colors, both from your palette 4. Set isolation: isolate on the wrapper so the blend does not leak onto the section behind it 5. Same treatment on every image sitewide. That is what makes ten random illustrations read as one brand Works with photos, illustrations, screenshots, anything. Save this if your images never match 🎨 #astra6 #buildinpublic #webdesign