Challenge: Duotone Card

Front-End Challenges Club - Challenge #003

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:

Here are some CSS Custom Properties for your colours:

Code language
: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 👋