Miami Mangos

Growing up, I had a mango tree. So did some of my friends. Late summer rained endless mangos onto my backyard and mango vendors would line some of the roads nearby. A visit to a friend's house could start with abuela's mango smoothie and end with mango smiles.

Mango UI started as an experiment to transfer these experiences to a website. Using the fruit as inspiration, I came up with deisgn tokens that felt to me most like the freshness the fruit exudes.

Color

The colors are lifted directly from some mangos I bought from Publix since they had that 5 for $5 deal. Lightening and darkening the tones let me construct the rest of the palette as well.

I used those colors and finally settled on three themes: sunset (orange), mango wine (red), and froggy (green).

Spacing

Mango UI works in increments of 0.5 or 0.25 rem. There are five spacings:

Typically, tight spacing is used for internal paddings and cozy is used for space between components. All of the spacings are available in classes with the .{m/p}{side}-{spacing} syntax, where side is a single letter and spacing is the amount of spacing. For example mt-cozy pb-comfortable would add cozy spacing above and comfortable padding below.

Icons

The icons were designed by me and can be used with the icon icon-{name} classes. They're intended to be small, cute, and fairly round with thick strokes.

Motion

All motion and transitions are timed to take 150ms to keep changes snappy and quick. Additionally, most interactive controls squish when clicked or tapped, mimicking the softness of a ripe mango. This is always a 95% scale transform. Some interactive elements don't squish since I didn't want to have to complicate the HTML markup required to achieve the squish. Additionally, to disable the squish, you can use the no-squish class, which will remove the transform.