Challenge: Duotone Card

Duotone is a lovely effect which we can finally achieve with CSS. Popularised by Spotify: it’s become a very common design treatment on the web, so let’s have some fun and make a set of duotone cards.

The brief permalink

Take the design assets and re-create these duotone cards whatever front-end technology you want. Consider how the cards work responsively, too. How do they stack, or do they even stack at all? 🤔

Make sure that your challenge solution does the following as a minimum:

• Uses semantic elements
• Is usable with mouse, touch and keyboard
• Presents an acceptable focus state (pro-tip: this should be additional to the hover state)

Bonus points awarded if:

• You use modern CSS
• Your solution is lightweight and performant
• Your solution is fully accessible
• You create appropriate transitions and/or animations between states

Assets permalink

I’ve used Figma to design this challenge and you can run it with a completely free account!

Here’s some assets to get you going:

• Figma prototype
• Figma project
• PDF Version
• Assets (images and SVG)

Here are some CSS Custom Properties for your colours:

:root {
  --color-pink: #faa7ed;
  --color-navy: #0c1f72;
  --color-navy-opaque: rgba(6, 0, 79, 0.77);
  --color-light: #ffffff;
  --color-dark: #252525;
}

Wrapping up permalink

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋