Pastel Website Design Kit: 9 Candy-Soft Sections

The full one-page landing built in exactly this style is embedded below. Scroll from the navigation to the footer and take in the mood before touching any code.

The nine parts that make up that page are pulled apart below, one per cell, in the order a visitor's eye actually meets them: catch the eye, look around, check the price, build trust, prompt the action, close the signup. Four of them (the mist hero, candy icon list, gradient CTA band, and scallop footer) demonstrate the whole trick of the style — swap gray shadows for pastel ones and the mood changes completely.

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Gradient-mist hero
• 02 Jelly indicator nav
• 03 Sticker-badge card grid
• 04 Candy icon list
• 05 Macaron pricing
• 06 Bubble testimonial
• 07 Candy-gradient CTA band
• 08 Scallop-edge footer
• 09 Squishy buttons & inputs

The entire kit runs on seven colors. Every piece of text stays in the berry ink at the bottom row; that single rule is what keeps a pastel page readable.

Role	Color	Where it goes
Cream	#fff6f0	The page background
Bubblegum pink	#ffb9cf	The hero color — CTAs, badges, accents
Peach	#ffd2b8	Cards, the testimonial avatar
Lemon	#ffe9a3	Cards, pricing
Mint	#b5e8d2	Nav indicator, input focus ring, the gradient's middle stop
Lavender	#cdbcf2	Cards, gradient accents
Berry ink	#55395e	All text (contrast 5.7–9.2:1)

01Gradient-mist hero

Three blurred circles — pink, peach, lavender — drift like mist across the cream background while the white card in front bobs gently. The shadow under the card is pink, not gray: that is the first signal of this style.

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-candy bg-white p-10 shadow-candy-pink">
  <p class="text-xs font-bold uppercase tracking-widest text-berry/70">Pudding</p>
  <h1 class="text-4xl font-bold">Soft is what we love</h1>
  <button class="rounded-pill bg-white px-6 py-3 text-sm font-bold
                 shadow-candy-berry">Start for free</button>
</div>

02Jelly indicator nav

The mint pill that marks the active tab stretches as it moves and squishes back on arrival — one scaleY line buys you the bounce of jelly picked up with chopsticks.

<div class="relative flex flex-1 rounded-pill bg-cream/60 p-1">
  <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-mint
               shadow-candy-mint"></span>
  <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Home</span>
</div>

03Sticker-badge card grid

Each tile gets its own pastel — lavender, lemon, peach, mint — with a shadow tinted the same color, plus a dashed-border sticker badge hanging off the corner. The four tiles bob in a staggered sequence.

<div class="relative flex min-h-32 flex-col justify-end gap-2
            rounded-candy bg-lavender p-5 shadow-candy-lavender">
  <span class="absolute -top-2 right-4 rounded-pill border-2 border-dashed
               border-white bg-white px-3 py-1 text-[11px] font-bold
               shadow-candy-pink">NEW</span>
  <p class="text-sm font-bold">Cute templates</p>
</div>

04Candy icon list

Every row is a white pill card, and the round icon inside is a hard-candy swirl drawn with a single repeating-conic-gradient. Offsetting each row's start time makes the candies bounce to their own beat.

<li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
           shadow-candy-mint">
  <span class="h-9 w-9 shrink-0 rounded-full shadow-inner"
        style="background:repeating-conic-gradient(#ffb9cf 0deg 45deg,
               #ffd2b8 45deg 90deg)"></span>
  <span class="text-sm font-semibold">Drag and drop</span>
</li>

05Macaron pricing

Three plans sit in mint, bubblegum pink, and lemon like macarons. Only the recommended one gets a gradient ring and a badge, sits slightly larger, and jiggles — color alone says which plan is the hero, no table needed.

<div class="relative flex-[1.2] rounded-candy p-1 shadow-candy-pink"
     style="background:linear-gradient(135deg,#ffb9cf,#cdbcf2)">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-white px-3 py-1 text-[11px] font-bold shadow-candy-pink">Popular</span>
  <div class="flex flex-col gap-1 rounded-candy p-6 text-center"
       style="background:#ffd9e6">
    <p class="text-sm font-bold">Bubble</p>
  </div>
</div>

06Bubble testimonial

The quote sits in a rounded bubble with a rotated-square tail, next to a candy-swirl avatar. The bubble squishes and unsquishes vertically like jelly, making the whole page feel soft.

<figure class="flex items-start gap-4">
  <span class="h-14 w-14 shrink-0 rounded-full shadow-candy-pink"
        style="background:repeating-conic-gradient(#ffd2b8 0deg 60deg,
               #ffe9a3 60deg 120deg)"></span>
  <div class="relative flex-1 rounded-candy bg-white p-5 shadow-candy-pink">
    <span class="absolute left-[-8px] top-3 h-4 w-4 rotate-45
                 rounded-sm bg-white"></span>
    <p class="text-sm font-bold">This site is honestly adorable</p>
  </div>
</figure>

07Candy-gradient CTA band

One band carries a gradient flowing from pink through lavender to mint, its position drifting slowly. The white button on top presses in and springs back in a loop.

<div class="relative overflow-hidden rounded-candy px-10 py-14
            shadow-candy-lavender"
     style="background:linear-gradient(90deg,#ffb9cf,#cdbcf2,#b5e8d2,
            #cdbcf2,#ffb9cf);background-size:300% 100%">
  <h3 class="text-3xl font-bold">Start sweetly today</h3>
  <button class="rounded-pill bg-white px-8 py-3 text-sm font-bold
                 shadow-candy-berry">Get started</button>
</div>

08Scallop-edge footer

The footer's top edge is a row of half-circles — drawn by one repeating background, not one element per scallop. Columns sit in pale lavender, pink, and mint while sparkles twinkle.

.scallop {
  height: 13px;
  background-image: radial-gradient(circle at 50% 100%,
    #f0eaf9 0 64%, transparent 66%);
  background-size: 26px 13px;
  background-repeat: repeat-x;
}

09Squishy buttons & inputs

The button squishes down on press while its pink shadow flattens with it, and the input grows a soft mint ring on focus. This one item bundles the whole kit's tactile feel.

<button class="rounded-control bg-white px-6 py-3 text-sm font-bold
               shadow-candy-pink">Save</button>
<input class="w-full rounded-control bg-white px-4 py-3 text-sm
              shadow-candy-mint" type="email"
       placeholder="Type your email">

Custom tailwind.config

Seven pastels and six candy shadows live in this one config, and the whole page follows it. You never write a shadow by hand — you call it by name, shadow-candy-*.

theme: {
  extend: {
    colors: {
      cream: "#fff6f0", bubble: "#ffb9cf", peach: "#ffd2b8",
      lemon: "#ffe9a3", mint: "#b5e8d2", lavender: "#cdbcf2",
      berry: "#55395e",
    },
    borderRadius: { candy: "24px", control: "12px", pill: "999px" },
    boxShadow: {
      "candy-pink": "0 10px 24px rgba(255,185,207,.55)",
      "candy-mint": "0 10px 24px rgba(181,232,210,.85)",
      "candy-berry": "0 8px 18px rgba(85,57,94,.28)",
    },
  },
},

Vibe-Coding Prompt

Drop the config into your project, then hand Claude Code or Cursor the short instruction below. Five lines are enough because the config has already decided the colors and shadows. The full prompt ships in the zip as prompt.md.

Unify the background on cream (#fff6f0). Give each card one pastel —
bubble, peach, lemon, mint, or lavender. Shadows are never gray: use the
candy shadow of the same family (shadow-candy-*). Text is always berry
(#55395e) — pastel-on-pastel text fails contrast. Corners stay
rounded-candy or rounded-pill.

Implementing that instruction in page/index.html produced the capture below, taken as a full 1280px screenshot.

Where it breaks (the trap)

The first thing that actually broke was the nav indicator drifting. Its width was calc(25% - 4px) and it moved with translateX(100%) — but a percentage move is measured against the element's own width, so each hop fell 4px short and the pill sat 12px into the previous tab after three hops. Zooming into the rendered frame exposed it; the fix was compensating each move to calc(100% + 4px).

The second failure was a footer that barely moved. With only two 12px sparkles twinkling, the measured changed-pixel area came out at 0.12% — indistinguishable from a still image. Adding a wave that lifts the three columns in sequence pushed it to 6.91%. The third trap is the gradient seam: if a flowing gradient starts and ends on different colors, the animation visibly snaps when background-position wraps around. Start and end both on pink, stretch with background-size: 300%, and it flows forever with no seam. All three fixes are in the finished files — grab the zip with the password 42smbkak to open them.

All nine demos honor the media query documented by MDN's prefers-reduced-motion guide: when a visitor asks for less motion, animations stop and each element settles back to its pre-animation state — a card returns to its resting position, a button to unpressed. The information survives; only the movement leaves.

Accessibility (accessibility)

The classic pastel failure is text contrast. White text on bubblegum pink (#ffb9cf) measures 1.6:1, far under the WCAG 2.1 minimum of 4.5:1. So in this kit every piece of text is the deep berry ink (#55395e): 9.2:1 on cream, and still 5.7:1 on lavender, the darkest surface in the set. Pastel belongs to surfaces and decoration, never to letters. The colored shadows follow the standard MDN box-shadow syntax at 0.28–0.9 opacity so they never stand in for a border, and keyboard focus gets its own berry :focus-visible outline instead of relying on any shadow.

If you want the other homepage trends too, browse the design trends category, and the about page explains what this blog ships.

FAQ

How is this different from claymorphism?

Claymorphism makes inflated 3D clay the hero — thick borders and inner shadows build physical bulk. Pastel candy keeps surfaces flat and works through color: tinted shadows and a seven-color palette. Push the relief and you get clay; keep the color and you get candy.

My brand is dark. Can I still use this?

Yes, but don't import all seven pastels verbatim. Keep the cream-background-plus-berry-ink structure and swap the card colors for pastel versions of your brand hues — then match each shadow to its card's family. That rule is what holds the style together.

What happens at smaller text sizes?

The 4.5:1 threshold applies to body text; large bold text (18px and up) only needs 3:1. Berry ink clears at least 5.7:1 on every pastel here, so shrinking text keeps you above the body-text bar. Light pastel text fails at any size, which is why the kit never uses it.