Stuff & Nonsense product and website design

Designing for the Cheeky Condiment Company

For years now, I’ve kept sauce sachets in my car’s glove box—I mean, who actually keeps gloves in that compartment?—just in case I needed it for a burger or bag of chips. That’s why I was really pleased when The Cheeky Condiment Company got in touch asking me to design a website for their condiment-carrying charm bracelets and necklaces.

Cheeky Condiment website
I designed The Cheeky Condiment Company website

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:

Cheeky Condiment charms
I illustrated these cheeky condiment charms

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

Cheeky Condiment dialog modal
My cheeky dialog modal

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.

Block Berthold typeface
Block Berthold typeface

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;
Cheeky Condiment backdrop
Cheeky Condiment backdrop

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; }
Cheeky Condiment dialog states
Cheeky Condiment dialog states

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; }
Cheeky Condiment dialog states (video)

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.


Written by Andy Clarke who tagged this with design


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.