Brand
What cüte stands for, said once and used everywhere. The home page sets these words as a poster; this is the same direction as reference.
Positioning
Three statements, in the order they are met. Each one is a chapter of the direction, and no surface should say something a chapter contradicts.
Pillars
What the product actually promises. A feature that cannot be traced back to one of these is a feature we have not justified yet.
- Price
- The seller keeps what the buyer pays, minus a fee we will say out loud. No listing fee, no fee for being new here, nothing that turns up at checkout.
- Protection
- The money waits until the item arrives and is what it said it was. Both sides can see where it is the whole time.
- Speed
- A listing takes a photograph and a price. Everything the item can tell us about itself, it tells us — the seller fills in what is left.
- Reach
- One catalogue, several countries, each with its own currency, carriers and rules. A buyer sees what can actually reach them.
- Reusability
- Every item on here was made once and is being used twice. That is the whole product, and it sets the tone of everything around it.
Voice
Three rules for anything with words in it — a screen, an email, a push, an error. For tone, examples and the words we avoid, see voice & tone.
Shadows
Two families, and they do different jobs. The cüte shadows are the brand ones — a four-layer, gray-blue fall-off that lifts a white card off the page; everything a member touches uses those. The Tailwind scale is plumbing for popovers, menus and overlays, where the shadow is a depth cue and nothing more.
The cüte shadows
Three of them, and each carries its own hover — hover a specimen to see it. The object settles as you reach for it, it does not rise: the -soft variant is the same geometry with the weight taken out. Every distance multiplies by --cute-shadow-scale, so a small button casts a proportionally tighter shadow than a card.
shadow-cutehover → shadow-cute-softThe default. White cards and buttons, with an inset white highlight.
shadow-cute-flathover → shadow-cute-flat-softThe same without the inset, for surfaces that are not white.
shadow-cute-primaryhover → shadow-cute-primary-softGreen-tinted, so the primary button casts colour and not a smudge.
The Tailwind scale
A plain black fall-off, from a 1px hairline to a 64px lift. Reach for it when something floats over the page rather than sitting on it.
shadow-2xs0 1px 2px / 5%
shadow-xs0 1px 3px / 6%
shadow-sm0 2px 4px / 6%
shadow0 4px 8px / 8%
shadow-md0 6px 16px / 10%
shadow-lg0 12px 31px / 12%
shadow-xl0 20px 40px / 15%
shadow-2xl0 32px 64px / 20%
Where it goes next
The direction becomes a screen through the foundations, then the components built on them.