Designing for the Cheeky Condiment Company

No one wants fish and chips without ketchup or vinegar. Nobody enjoys a hot dog without mustard. Sushi without soy sauce? No one wants that. So, Cheeky Condiment decided to never to let that happen again by designing a range of condiment-carrying bracelets and necklaces. They worked with top jewellery designers and sourced popular condiment brands for their charms.

I had enormous fun making the Cheeky Condiment design and especially the illustrations of their saucy charms. I decided to use simplified shapes because they would make optimising the SVGs simpler too. The sauce bottles share common colours and gradients which also make styling them with CSS easier:

I extended that style to other elements in the interface, including the dialog modal. (More on that in a moment:)

I’ve been aching to use the Block Berthold typeface since seeing it used so brilliantly by British graphic designer Richard Hollis. It’s a blocky but versatile grotesque sans-serif typeface which was designed by Hermann Hoffmann all the way back in 1908. Even now, it lends itself to plenty of varied applications and perfectly reflects the personality of the Cheeky Condiment Company brand.

Carrying condiments on a bracelet or necklace is a cheeky idea, so I wanted design and its interactions to be cheeky too. Animations bring the Cheeky Condiment design to life and one place where they’re really cheeky is that dialog modal. Opening modal windows—for alerts, confirmation messages, and other dialogue content—has always needed a mess of CSS, HTML, and Javascript. Thankfully, there’s now a native element which makes them much simpler. That’s just what I needed for my Cheeky Condiment stock reminder modal.

Dialog elements can include any flow content. For my modal I added a headline, “X” button (to close the dialog,) and a simple form which captures email addresses. This dialog is hidden by default:

<dialog id="dialog">
  <h3>Email me</h3>
    <button data-close>✖</button>
    <form action="">
  <label for="notify-email" class="sr-only">Email me when back in stock</label>
  <input type="email" id="notify-email">
  <p>We promise not to get saucy</p>
  <button type="submit">Notify me!</button>
  </form>
</dialog>

I added a data-toggle attribute to each “Sold out” button and added a little Javascript to show the Cheeky Condiment stock reminder modal:

<button class="btn" data-toggle="#dialog">Sold out 
<small>Email me when in stock</small>
</button>

The ::backdrop CSS is a pseudo-element which covers the entire viewport behind a dialog element. I can style it in any way I like—adding background colours, gradients, or images—no matter how cheeky. I can also adjust the opacity of the backdrop—to allow the content below to remain partially visible—but I chose to make mine fully opaque:

#dialog::backdrop {
background-color: #096e99;
background-image: url("data:image/svg+xml;base64…");
background-size: 150px;

Dialog elements themselves can be equally as cheeky and I wanted my stock reminder modal to reflect the Cheeky Condiment brand. Rather than implement a boring box, I chose a cheeky red ketchup bottle shape which I added as an SVG background:

#dialog {
padding: 240px 80px 0;
width: 380px;
height: 550px;
background-color: transparent;
/* red */
background-image: url("data:image/svg+xml;base64…");
background-repeat: no-repeat;
background-size: contain;
border: none;
box-sizing: border-box; }

But, I didn’t want the cheeky interactions to stop there and wanted to change the bottle colour from red to green when someone inputs a valid email address. I wondered if this might be a good use of the :has relational pseudo-class. Turns out, I was right. When the dialog element has a valid input, the red background is swapped to green:

#dialog:has(input:valid) {
/* green */
background-image: url("data:image/svg+xml;base64…"); }

To add even more cheekiness—and provide a more visual indication that someone has entered a valid email address, I added a rubber-band animation which I sourced from the Animate.css library:

@keyframes rubberBand {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
to { transform: scale3d(1, 1, 1); }
}

#dialog:has(input:valid) {
animation-name: rubberBand; }

There’s plenty more to explore in my design for The Cheeky Condiment Company and I hope you’ll pay them a visit. In fact, you’d be an April fool if you don’t.