Claymorphism Cards in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="clay-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="clay-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="clay-i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z"/></symbol>
  <symbol id="clay-i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5"/></symbol>
  <symbol id="clay-i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10.5 3.5v5.5L5 18.5A1.8 1.8 0 0 0 6.6 21h10.8a1.8 1.8 0 0 0 1.6-2.5L13.5 9V3.5"/><path d="M7.5 15h9"/></symbol>
  <symbol id="clay-i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="m4 7 8 6 8-6"/></symbol>
  <symbol id="clay-i-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4-3-6.5-4-10-2 1.5-3.5 4-3.5 6.5-1-1-1.5-2-1.5-3.5C7 9.5 5.5 12 5.5 14.5A6.5 6.5 0 0 0 12 21z"/></symbol>
  <symbol id="clay-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
</svg>
<section><span class="lbl">Stat cards</span><div class="clay-stats">
<article class="clay-card clay-stat clay-peach"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-fire"/></svg></span><h3 class="clay-stat__label">Learning streak</h3><p class="clay-stat__value">12 <span class="clay-stat__unit">days</span></p><p class="clay-stat__note">Best ever is 15 days</p></article>
<article class="clay-card clay-stat clay-lemon"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-star"/></svg></span><h3 class="clay-stat__label">Stars earned</h3><p class="clay-stat__value">340</p><p class="clay-stat__note">Up 45 since Monday</p></article>
<article class="clay-card clay-stat clay-mint"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-clock"/></svg></span><h3 class="clay-stat__label">Minutes this week</h3><p class="clay-stat__value">86 <span class="clay-stat__unit">min</span></p><p class="clay-stat__note">Goal is 100 minutes</p></article>
<article class="clay-card clay-stat clay-sky"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span><h3 class="clay-stat__label">Lessons finished</h3><p class="clay-stat__value">27</p><p class="clay-stat__note">3 waiting in the queue</p></article>
</div></section>
<div class="clay-two">
<section><span class="lbl">Content card</span><article class="clay-card clay-lesson">
<div class="clay-art" aria-hidden="true"><span class="clay-art__shape clay-art__shape--sun"></span><span class="clay-art__shape clay-art__shape--hill"></span><span class="clay-art__shape clay-art__shape--hill2"></span><span class="clay-art__shape clay-art__shape--cloud"></span><span class="clay-art__shape clay-art__shape--cloud2"></span><span class="clay-art__shape clay-art__shape--drop" style="left:70px"></span><span class="clay-art__shape clay-art__shape--drop" style="left:110px;top:124px"></span><span class="clay-art__shape clay-art__shape--drop" style="left:150px"></span></div>
<div class="clay-lesson__body"><p class="clay-lesson__tag"><span class="clay-chip"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-flask"/></svg>Science · 8 min</span></p><h3 class="clay-lesson__title">Why does it rain?</h3><p class="clay-lesson__text">Follow a water droplet from the sea up into a cloud and back down to the hills, then build your own rain cloud in a jar.</p></div>
<div class="clay-lesson__foot"><div class="clay-meter"><span>3 of 5 steps done</span><span class="clay-meter__bar" role="progressbar" aria-label="Lesson progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="clay-meter__fill" style="--clay-pct:60%"></span></span></div><a class="clay-btn clay-btn--accent" href="#">Keep going</a></div>
</article></section>
<section><span class="lbl">Profile card</span><article class="clay-card clay-profile">
<span class="clay-avatar clay-lilac" aria-hidden="true">MO</span>
<h3 class="clay-profile__name">Maya Okafor</h3><p class="clay-profile__role">Year 2 teacher · Bramble Class</p>
<ul class="clay-profile__stats"><li class="clay-profile__stat clay-peach"><span class="clay-profile__num">26</span><span class="clay-profile__key">Pupils</span></li><li class="clay-profile__stat clay-mint"><span class="clay-profile__num">148</span><span class="clay-profile__key">Lessons</span></li><li class="clay-profile__stat clay-sky"><span class="clay-profile__num">12</span><span class="clay-profile__key">Badges</span></li></ul>
<div class="clay-profile__actions"><button class="clay-btn clay-btn--accent" type="button"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-mail"/></svg>Message</button><button class="clay-btn clay-lemon" type="button"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plus"/></svg>Follow</button></div>
</article></section>
</div>
<section><span class="lbl">Pricing pair</span><div class="clay-plans">
<article class="clay-card clay-plan"><h3 class="clay-plan__name">Sprout</h3><p class="clay-plan__price">£0 <span class="clay-plan__per">forever</span></p><p class="clay-plan__desc">For one child trying things out.</p>
<ul class="clay-plan__list"><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>1 child profile</li><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>3 lessons a day</li><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Habit tracker</li></ul>
<a class="clay-btn clay-btn--block" href="#">Start for free</a></article>
<article class="clay-card clay-plan clay-lilac"><span class="clay-plan__badge">Most popular</span><h3 class="clay-plan__name">Family</h3><p class="clay-plan__price">£5 <span class="clay-plan__per">a month</span></p><p class="clay-plan__desc">For up to four children, with a parent dashboard.</p>
<ul class="clay-plan__list"><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>4 child profiles</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Every lesson, no daily limit</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Weekly progress email</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Offline packs for trips</li></ul>
<a class="clay-btn clay-btn--accent clay-btn--block" href="#">Try Family free for 14 days</a></article>
</div></section>

CSS

/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
   below it, an inset highlight top left and an inset shade bottom right. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --clay-bg:#f3effa;          /* page, a pale lilac white */
  --clay-surface:#fffcf8;     /* cards, fields and plain objects */
  --clay-peach:#ffd2bd;       /* object fills: ink text on every fill reaches 11:1 */
  --clay-lilac:#dccdff;
  --clay-mint:#bdeed6;
  --clay-sky:#c2e0ff;
  --clay-lemon:#ffe9a3;
  --clay-ink:#241a3d;         /* text, 14.4:1 on --clay-bg */
  --clay-muted:#51476a;       /* secondary text, 5.7:1 or more on every fill */
  --clay-edge:#7a6e96;        /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
  --clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
  --clay-accent:#6236e8;      /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
  --clay-on-accent:#ffffff;   /* text and marks on accent fills, 6.5:1 */
  --clay-tint:#e9e1ff;        /* light accent wash behind current items */
  --clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
  --clay-hi:rgba(255,255,255,.88);  /* inset highlight, top left */
  --clay-lo:rgba(52,30,112,.20);    /* inset shade, bottom right */
  --clay-lift:14px;           /* how high objects float; every shadow scales from it */
  --clay-radius:30px;         /* cards; buttons are pills, fields use .55 of it */
  --clay-bw:1.5px;            /* control border width */
  --clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
  --clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
   :is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
  --clay-bg:#1a1530;--clay-surface:#2a2347;
  --clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
  --clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
  --clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
  --clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
  --clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
  --clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
  --clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
    inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
    inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
  --clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
    inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
    inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
  --clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
    inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
  --clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* Components */
:where([class*="clay-"]),:where([class*="clay-"])::before,:where([class*="clay-"])::after{box-sizing:border-box}
.clay-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clay-ico{width:22px;height:22px;flex:none}
.clay-ico--lg{width:28px;height:28px}
/* Fills: put one on any object; components read --clay-fill */
.clay-peach{--clay-fill:var(--clay-peach)}.clay-lilac{--clay-fill:var(--clay-lilac)}.clay-mint{--clay-fill:var(--clay-mint)}
.clay-sky{--clay-fill:var(--clay-sky)}.clay-lemon{--clay-fill:var(--clay-lemon)}
/* Card: a puffy panel that floats on the big drop shadow */
.clay-card{margin:0;padding:1.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:var(--clay-radius);
  background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow)}
/* Layout helpers */
.clay-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.clay-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.clay-stack{display:grid;gap:1.4rem}
/* Buttons: pastel pills that float; hover lifts them, pressing squashes the shadow flat */
.clay-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;margin:0;padding:.7rem 1.5rem;
  border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);
  font-family:inherit;font-size:1rem;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:var(--clay-shadow-sm);transition:transform .18s,box-shadow .18s}
.clay-btn:hover{transform:translateY(-2px);box-shadow:var(--clay-shadow)}
.clay-btn:active{transform:translateY(2px);box-shadow:var(--clay-press)}
.clay-btn:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-btn--accent{--clay-fill:var(--clay-accent);border-color:var(--clay-accent);color:var(--clay-on-accent)}
.clay-btn--sm{min-height:40px;padding:.45rem 1.05rem;font-size:.88rem}
.clay-btn--block{width:100%}
/* Icon buttons: round (or squircle) clay pebbles with a chunky icon and an aria-label */
.clay-iconbtn{display:inline-grid;place-items:center;width:58px;height:58px;margin:0;padding:0;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;
  background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);cursor:pointer;box-shadow:var(--clay-shadow-sm);transition:transform .18s,box-shadow .18s}
.clay-iconbtn:hover{transform:translateY(-2px);box-shadow:var(--clay-shadow)}
.clay-iconbtn:active{transform:translateY(2px);box-shadow:var(--clay-press)}
.clay-iconbtn:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-iconbtn--sq{border-radius:20px}
.clay-iconbtn--sm{width:44px;height:44px}
.clay-iconbtn--lg{width:72px;height:72px}
.clay-iconbtn--accent{--clay-fill:var(--clay-accent);border-color:var(--clay-accent);color:var(--clay-on-accent)}
@media (prefers-reduced-motion:reduce){.clay-btn,.clay-iconbtn{transition:none}.clay-btn:hover,.clay-btn:active,.clay-iconbtn:hover,.clay-iconbtn:active{transform:none}}
/* Blob: a small puffy icon tile that sits on any card */
.clay-blob{display:grid;place-items:center;flex:none;width:52px;height:52px;border:var(--clay-bw) solid var(--clay-line);border-radius:18px;
  background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow-sm)}
.clay-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border:var(--clay-bw) solid var(--clay-line);border-radius:999px;
  background:var(--clay-surface);color:var(--clay-ink);font-size:.8rem;font-weight:800;line-height:1.3}
.clay-chip .clay-ico{width:16px;height:16px}
/* Stat cards: coloured clay slabs with a blob icon, a big number and a sentence that explains the change */
.clay-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.clay-stat{display:grid;gap:.25rem;align-content:start}
.clay-stat__label{margin:.85rem 0 0;font-size:.9rem;font-weight:800;color:var(--clay-muted)}
.clay-stat__value{margin:0;font-size:2.2rem;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.clay-stat__unit{font-size:1rem;font-weight:700}
.clay-stat__note{margin:0;font-size:.86rem;font-weight:600;color:var(--clay-muted)}
/* Content card: an illustration panel made of clay shapes, a chip, a title and a progress line */
.clay-lesson{display:flex;flex-direction:column;gap:1rem;padding:1rem 1rem 1.4rem}
.clay-art{position:relative;height:170px;overflow:hidden;border-radius:calc(var(--clay-radius)*.75);background:var(--clay-sky);box-shadow:var(--clay-well)}
.clay-art__shape{position:absolute;border-radius:50%;box-shadow:var(--clay-shadow-sm)}
.clay-art__shape--sun{top:22px;right:34px;width:58px;height:58px;background:var(--clay-lemon)}
.clay-art__shape--cloud{top:52px;left:40px;width:140px;height:54px;border-radius:999px;background:var(--clay-surface)}
.clay-art__shape--cloud2{top:30px;left:78px;width:70px;height:60px;background:var(--clay-surface)}
.clay-art__shape--hill{bottom:-70px;left:-20px;width:240px;height:140px;background:var(--clay-mint)}
.clay-art__shape--hill2{bottom:-90px;right:-40px;width:260px;height:150px;background:var(--clay-peach)}
.clay-art__shape--drop{top:116px;width:14px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--clay-accent);box-shadow:none}
.clay-lesson__body{display:grid;gap:.55rem;padding:0 .5rem}
.clay-lesson__tag{margin:0}
.clay-lesson__title{margin:0;font-size:1.3rem;font-weight:800;line-height:1.25}
.clay-lesson__text{margin:0;color:var(--clay-muted)}
.clay-lesson__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:0 .5rem}
.clay-meter{display:grid;gap:.35rem;flex:1;min-width:140px;font-size:.84rem;font-weight:700;color:var(--clay-muted)}
.clay-meter__bar{height:14px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well);overflow:hidden}
.clay-meter__fill{display:block;height:100%;width:var(--clay-pct,50%);border-radius:999px;background:var(--clay-accent)}
/* Profile card */
.clay-profile{display:grid;justify-items:center;gap:.4rem;text-align:center}
.clay-avatar{display:grid;place-items:center;width:96px;height:96px;margin-bottom:.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:50%;
  background:var(--clay-fill,var(--clay-lilac));font-size:2rem;font-weight:800;box-shadow:var(--clay-shadow)}
.clay-profile__name{margin:0;font-size:1.3rem;font-weight:800;line-height:1.25}
.clay-profile__role{margin:0;color:var(--clay-muted)}
.clay-profile__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:.9rem 0 1.1rem;padding:0;list-style:none}
.clay-profile__stat{display:grid;padding:.6rem .3rem;border-radius:18px;background:var(--clay-fill,var(--clay-bg));box-shadow:var(--clay-well)}
.clay-profile__num{font-size:1.25rem;font-weight:800;line-height:1.2}
.clay-profile__key{font-size:.78rem;font-weight:700;color:var(--clay-muted)}
.clay-profile__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* Pricing pair */
.clay-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:start}
.clay-plan{position:relative;display:grid;gap:.9rem}
.clay-plan__badge{position:absolute;top:-14px;right:24px;padding:.3rem .85rem;border:var(--clay-bw) solid var(--clay-accent);border-radius:999px;
  background:var(--clay-accent);color:var(--clay-on-accent);font-size:.78rem;font-weight:800;box-shadow:var(--clay-shadow-sm)}
.clay-plan__name{margin:0;font-size:1.15rem;font-weight:800}
.clay-plan__price{margin:0;font-size:2.6rem;font-weight:800;line-height:1}
.clay-plan__per{font-size:1rem;font-weight:700;color:var(--clay-muted)}
.clay-plan__desc{margin:0;color:var(--clay-muted)}
.clay-plan__list{display:grid;gap:.6rem;margin:.2rem 0 .4rem;padding:0;list-style:none}
.clay-plan__item{display:flex;align-items:center;gap:.6rem;font-weight:600}
.clay-plan__tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--clay-fill,var(--clay-surface));box-shadow:var(--clay-shadow-sm)}
.clay-plan__tick .clay-ico{width:16px;height:16px}
.clay-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:767px){.clay-two{grid-template-columns:1fr}}
.clay-stats--two{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="clay-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="clay-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="clay-i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z"/></symbol>
  <symbol id="clay-i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5"/></symbol>
  <symbol id="clay-i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10.5 3.5v5.5L5 18.5A1.8 1.8 0 0 0 6.6 21h10.8a1.8 1.8 0 0 0 1.6-2.5L13.5 9V3.5"/><path d="M7.5 15h9"/></symbol>
  <symbol id="clay-i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="m4 7 8 6 8-6"/></symbol>
  <symbol id="clay-i-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4-3-6.5-4-10-2 1.5-3.5 4-3.5 6.5-1-1-1.5-2-1.5-3.5C7 9.5 5.5 12 5.5 14.5A6.5 6.5 0 0 0 12 21z"/></symbol>
  <symbol id="clay-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
</svg>
<section><span class="lbl">Stat cards</span><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
<div class="col"><article class="card clay-card clay-peach h-100"><div class="card-body clay-stat"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-fire"/></svg></span><h3 class="clay-stat__label">Learning streak</h3><p class="clay-stat__value">12 <span class="clay-stat__unit">days</span></p><p class="clay-stat__note">Best ever is 15 days</p></div></article></div>
<div class="col"><article class="card clay-card clay-lemon h-100"><div class="card-body clay-stat"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-star"/></svg></span><h3 class="clay-stat__label">Stars earned</h3><p class="clay-stat__value">340</p><p class="clay-stat__note">Up 45 since Monday</p></div></article></div>
<div class="col"><article class="card clay-card clay-mint h-100"><div class="card-body clay-stat"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-clock"/></svg></span><h3 class="clay-stat__label">Minutes this week</h3><p class="clay-stat__value">86 <span class="clay-stat__unit">min</span></p><p class="clay-stat__note">Goal is 100 minutes</p></div></article></div>
<div class="col"><article class="card clay-card clay-sky h-100"><div class="card-body clay-stat"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span><h3 class="clay-stat__label">Lessons finished</h3><p class="clay-stat__value">27</p><p class="clay-stat__note">3 waiting in the queue</p></div></article></div>
</div></section>
<div class="clay-two">
<section><span class="lbl">Content card</span><article class="card clay-card"><div class="card-body clay-lesson">
<div class="clay-art" aria-hidden="true"><span class="clay-art__shape clay-art__shape--sun"></span><span class="clay-art__shape clay-art__shape--hill"></span><span class="clay-art__shape clay-art__shape--hill2"></span><span class="clay-art__shape clay-art__shape--cloud"></span><span class="clay-art__shape clay-art__shape--cloud2"></span><span class="clay-art__shape clay-art__shape--drop" style="left:70px"></span><span class="clay-art__shape clay-art__shape--drop" style="left:110px;top:124px"></span><span class="clay-art__shape clay-art__shape--drop" style="left:150px"></span></div>
<div class="clay-lesson__body"><p class="clay-lesson__tag"><span class="clay-chip"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-flask"/></svg>Science · 8 min</span></p><h3 class="clay-lesson__title card-title">Why does it rain?</h3><p class="clay-lesson__text card-text">Follow a water droplet from the sea up into a cloud and back down to the hills, then build your own rain cloud in a jar.</p></div>
<div class="clay-lesson__foot"><div class="clay-meter"><span>3 of 5 steps done</span><div class="progress clay-progress" role="progressbar" aria-label="Lesson progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:60%"></div></div></div><a class="btn btn-clay btn-clay-accent" href="#">Keep going</a></div>
</div></article></section>
<section><span class="lbl">Profile card</span><article class="card clay-card"><div class="card-body clay-profile">
<span class="clay-avatar clay-lilac" aria-hidden="true">MO</span>
<h3 class="clay-profile__name">Maya Okafor</h3><p class="clay-profile__role">Year 2 teacher · Bramble Class</p>
<ul class="clay-profile__stats"><li class="clay-profile__stat clay-peach"><span class="clay-profile__num">26</span><span class="clay-profile__key">Pupils</span></li><li class="clay-profile__stat clay-mint"><span class="clay-profile__num">148</span><span class="clay-profile__key">Lessons</span></li><li class="clay-profile__stat clay-sky"><span class="clay-profile__num">12</span><span class="clay-profile__key">Badges</span></li></ul>
<div class="clay-profile__actions"><button class="btn btn-clay btn-clay-accent" type="button"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-mail"/></svg>Message</button><button class="btn btn-clay clay-lemon" type="button"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plus"/></svg>Follow</button></div>
</div></article></section>
</div>
<section><span class="lbl">Pricing pair</span><div class="clay-plans">
<article class="card clay-card"><div class="card-body clay-plan"><h3 class="clay-plan__name">Sprout</h3><p class="clay-plan__price">£0 <span class="clay-plan__per">forever</span></p><p class="clay-plan__desc">For one child trying things out.</p>
<ul class="clay-plan__list"><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>1 child profile</li><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>3 lessons a day</li><li class="clay-plan__item"><span class="clay-plan__tick clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Habit tracker</li></ul>
<a class="btn btn-clay w-100" href="#">Start for free</a></div></article>
<article class="card clay-card clay-lilac"><span class="badge clay-plan__badge">Most popular</span><div class="card-body clay-plan"><h3 class="clay-plan__name">Family</h3><p class="clay-plan__price">£5 <span class="clay-plan__per">a month</span></p><p class="clay-plan__desc">For up to four children, with a parent dashboard.</p>
<ul class="clay-plan__list"><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>4 child profiles</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Every lesson, no daily limit</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Weekly progress email</li><li class="clay-plan__item"><span class="clay-plan__tick"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Offline packs for trips</li></ul>
<a class="btn btn-clay btn-clay-accent w-100" href="#">Try Family free for 14 days</a></div></article>
</div></section>

CSS

/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
   below it, an inset highlight top left and an inset shade bottom right. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --clay-bg:#f3effa;          /* page, a pale lilac white */
  --clay-surface:#fffcf8;     /* cards, fields and plain objects */
  --clay-peach:#ffd2bd;       /* object fills: ink text on every fill reaches 11:1 */
  --clay-lilac:#dccdff;
  --clay-mint:#bdeed6;
  --clay-sky:#c2e0ff;
  --clay-lemon:#ffe9a3;
  --clay-ink:#241a3d;         /* text, 14.4:1 on --clay-bg */
  --clay-muted:#51476a;       /* secondary text, 5.7:1 or more on every fill */
  --clay-edge:#7a6e96;        /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
  --clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
  --clay-accent:#6236e8;      /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
  --clay-on-accent:#ffffff;   /* text and marks on accent fills, 6.5:1 */
  --clay-tint:#e9e1ff;        /* light accent wash behind current items */
  --clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
  --clay-hi:rgba(255,255,255,.88);  /* inset highlight, top left */
  --clay-lo:rgba(52,30,112,.20);    /* inset shade, bottom right */
  --clay-lift:14px;           /* how high objects float; every shadow scales from it */
  --clay-radius:30px;         /* cards; buttons are pills, fields use .55 of it */
  --clay-bw:1.5px;            /* control border width */
  --clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
  --clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
   :is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
  --clay-bg:#1a1530;--clay-surface:#2a2347;
  --clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
  --clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
  --clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
  --clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
  --clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
  --clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
  --clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
    inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
    inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
  --clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
    inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
    inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
  --clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
    inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
  --clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-clay]{--bs-body-bg:var(--clay-bg);--bs-body-color:var(--clay-ink);--bs-body-font-family:var(--clay-font);
  --bs-emphasis-color:var(--clay-ink);--bs-heading-color:var(--clay-ink);--bs-secondary-color:var(--clay-muted);--bs-tertiary-color:var(--clay-muted);
  --bs-border-color:var(--clay-edge);--bs-border-width:var(--clay-bw);--bs-border-radius:calc(var(--clay-radius)*.55);
  --bs-border-radius-lg:var(--clay-radius);--bs-border-radius-pill:999px;--bs-focus-ring-color:var(--clay-accent);
  --bs-link-color:var(--clay-accent);--bs-link-color-rgb:98,54,232;--bs-link-hover-color:var(--clay-ink);--bs-link-hover-color-rgb:36,26,61}
/* Components */
:where([class*="clay-"]),:where([class*="clay-"])::before,:where([class*="clay-"])::after{box-sizing:border-box}
.clay-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clay-ico{width:22px;height:22px;flex:none}
.clay-ico--lg{width:28px;height:28px}
/* Fills: put one on any object; components read --clay-fill */
.clay-peach{--clay-fill:var(--clay-peach)}.clay-lilac{--clay-fill:var(--clay-lilac)}.clay-mint{--clay-fill:var(--clay-mint)}
.clay-sky{--clay-fill:var(--clay-sky)}.clay-lemon{--clay-fill:var(--clay-lemon)}
/* Card: a puffy panel that floats on the big drop shadow */
.clay-card{margin:0;padding:1.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:var(--clay-radius);
  background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow)}
/* Layout helpers */
.clay-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.clay-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.clay-stack{display:grid;gap:1.4rem}
/* Cards: Bootstrap .card through its --bs-card-* variables */
.card.clay-card{--bs-card-bg:var(--clay-fill,var(--clay-surface));--bs-card-color:var(--clay-ink);--bs-card-border-color:var(--clay-line);
  --bs-card-border-width:var(--clay-bw);--bs-card-border-radius:var(--clay-radius);--bs-card-inner-border-radius:var(--clay-radius);
  --bs-card-spacer-x:1.6rem;--bs-card-spacer-y:1.6rem;padding:0}
/* Buttons: Bootstrap .btn with a .btn-clay variant set through --bs-btn-* variables.
   Hover lifts the pill, pressing squashes the shadow flat */
.btn-clay{--bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.7rem;--bs-btn-font-family:inherit;--bs-btn-font-size:1rem;--bs-btn-font-weight:800;--bs-btn-line-height:1.2;
  --bs-btn-border-width:var(--clay-bw);--bs-btn-border-radius:999px;
  --bs-btn-bg:var(--clay-fill,var(--clay-surface));--bs-btn-color:var(--clay-ink);--bs-btn-border-color:var(--clay-edge);
  --bs-btn-hover-bg:var(--bs-btn-bg);--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-hover-border-color:var(--bs-btn-border-color);
  --bs-btn-active-bg:var(--bs-btn-bg);--bs-btn-active-color:var(--bs-btn-color);--bs-btn-active-border-color:var(--bs-btn-border-color);
  --clay-btn-shadow:var(--clay-shadow-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;
  box-shadow:var(--clay-btn-shadow);transition:transform .18s,box-shadow .18s}
.btn-clay:hover{--clay-btn-shadow:var(--clay-shadow);transform:translateY(-2px)}
.btn-clay:active,.btn-clay:first-child:active{--clay-btn-shadow:var(--clay-press);transform:translateY(2px)}
.btn-clay:focus-visible,.btn-check:focus-visible+.btn-clay{box-shadow:var(--clay-btn-shadow);outline:3px solid var(--clay-accent);outline-offset:4px}
.btn-clay-accent{--clay-fill:var(--clay-accent);--bs-btn-color:var(--clay-on-accent);--bs-btn-border-color:var(--clay-accent)}
.btn-clay.btn-sm{--bs-btn-padding-x:1.05rem;--bs-btn-padding-y:.45rem;--bs-btn-font-size:.88rem;min-height:40px}
/* Icon buttons: a round or squircle .btn-clay with an aria-label */
.btn-clay-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:58px;height:58px;min-height:0;border-radius:50%}
.btn-clay-icon.btn-clay-sq{border-radius:20px}
.btn-clay-icon.btn-clay-sm{width:44px;height:44px}
.btn-clay-icon.btn-clay-lg{width:72px;height:72px}
@media (prefers-reduced-motion:reduce){.btn-clay{transition:none}.btn-clay:hover,.btn-clay:active,.btn-clay:first-child:active{transform:none}}
/* Blob: a small puffy icon tile that sits on any card */
.clay-blob{display:grid;place-items:center;flex:none;width:52px;height:52px;border:var(--clay-bw) solid var(--clay-line);border-radius:18px;
  background:var(--clay-fill,var(--clay-surface));color:var(--clay-ink);box-shadow:var(--clay-shadow-sm)}
.clay-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border:var(--clay-bw) solid var(--clay-line);border-radius:999px;
  background:var(--clay-surface);color:var(--clay-ink);font-size:.8rem;font-weight:800;line-height:1.3}
.clay-chip .clay-ico{width:16px;height:16px}
/* Stat cards: coloured clay slabs with a blob icon, a big number and a sentence that explains the change */
.clay-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.clay-stat{display:grid;gap:.25rem;align-content:start}
.clay-stat__label{margin:.85rem 0 0;font-size:.9rem;font-weight:800;color:var(--clay-muted)}
.clay-stat__value{margin:0;font-size:2.2rem;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.clay-stat__unit{font-size:1rem;font-weight:700}
.clay-stat__note{margin:0;font-size:.86rem;font-weight:600;color:var(--clay-muted)}
/* Content card: an illustration panel made of clay shapes, a chip, a title and a progress line */
.clay-lesson{display:flex;flex-direction:column;gap:1rem;padding:1rem 1rem 1.4rem}
.clay-art{position:relative;height:170px;overflow:hidden;border-radius:calc(var(--clay-radius)*.75);background:var(--clay-sky);box-shadow:var(--clay-well)}
.clay-art__shape{position:absolute;border-radius:50%;box-shadow:var(--clay-shadow-sm)}
.clay-art__shape--sun{top:22px;right:34px;width:58px;height:58px;background:var(--clay-lemon)}
.clay-art__shape--cloud{top:52px;left:40px;width:140px;height:54px;border-radius:999px;background:var(--clay-surface)}
.clay-art__shape--cloud2{top:30px;left:78px;width:70px;height:60px;background:var(--clay-surface)}
.clay-art__shape--hill{bottom:-70px;left:-20px;width:240px;height:140px;background:var(--clay-mint)}
.clay-art__shape--hill2{bottom:-90px;right:-40px;width:260px;height:150px;background:var(--clay-peach)}
.clay-art__shape--drop{top:116px;width:14px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--clay-accent);box-shadow:none}
.clay-lesson__body{display:grid;gap:.55rem;padding:0 .5rem}
.clay-lesson__tag{margin:0}
.clay-lesson__title{margin:0;font-size:1.3rem;font-weight:800;line-height:1.25}
.clay-lesson__text{margin:0;color:var(--clay-muted)}
.clay-lesson__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:0 .5rem}
.clay-meter{display:grid;gap:.35rem;flex:1;min-width:140px;font-size:.84rem;font-weight:700;color:var(--clay-muted)}
.clay-meter__bar{height:14px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well);overflow:hidden}
.clay-meter__fill{display:block;height:100%;width:var(--clay-pct,50%);border-radius:999px;background:var(--clay-accent)}
/* Profile card */
.clay-profile{display:grid;justify-items:center;gap:.4rem;text-align:center}
.clay-avatar{display:grid;place-items:center;width:96px;height:96px;margin-bottom:.6rem;border:var(--clay-bw) solid var(--clay-line);border-radius:50%;
  background:var(--clay-fill,var(--clay-lilac));font-size:2rem;font-weight:800;box-shadow:var(--clay-shadow)}
.clay-profile__name{margin:0;font-size:1.3rem;font-weight:800;line-height:1.25}
.clay-profile__role{margin:0;color:var(--clay-muted)}
.clay-profile__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:.9rem 0 1.1rem;padding:0;list-style:none}
.clay-profile__stat{display:grid;padding:.6rem .3rem;border-radius:18px;background:var(--clay-fill,var(--clay-bg));box-shadow:var(--clay-well)}
.clay-profile__num{font-size:1.25rem;font-weight:800;line-height:1.2}
.clay-profile__key{font-size:.78rem;font-weight:700;color:var(--clay-muted)}
.clay-profile__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* Pricing pair */
.clay-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:start}
.clay-plan{position:relative;display:grid;gap:.9rem}
.clay-plan__badge{position:absolute;top:-14px;right:24px;padding:.3rem .85rem;border:var(--clay-bw) solid var(--clay-accent);border-radius:999px;
  background:var(--clay-accent);color:var(--clay-on-accent);font-size:.78rem;font-weight:800;box-shadow:var(--clay-shadow-sm)}
.clay-plan__name{margin:0;font-size:1.15rem;font-weight:800}
.clay-plan__price{margin:0;font-size:2.6rem;font-weight:800;line-height:1}
.clay-plan__per{font-size:1rem;font-weight:700;color:var(--clay-muted)}
.clay-plan__desc{margin:0;color:var(--clay-muted)}
.clay-plan__list{display:grid;gap:.6rem;margin:.2rem 0 .4rem;padding:0;list-style:none}
.clay-plan__item{display:flex;align-items:center;gap:.6rem;font-weight:600}
.clay-plan__tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--clay-fill,var(--clay-surface));box-shadow:var(--clay-shadow-sm)}
.clay-plan__tick .clay-ico{width:16px;height:16px}
.clay-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:767px){.clay-two{grid-template-columns:1fr}}
.clay-stats--two{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Bootstrap .progress and .badge restyled through their variables */
.progress.clay-progress{--bs-progress-height:14px;--bs-progress-bg:var(--clay-bg);--bs-progress-border-radius:999px;--bs-progress-bar-bg:var(--clay-accent);
  border:var(--clay-bw) solid var(--clay-edge);box-shadow:var(--clay-well)}
.progress.clay-progress .progress-bar{border-radius:999px}
.badge.clay-plan__badge{--bs-badge-padding-x:.85rem;--bs-badge-padding-y:.3rem;--bs-badge-font-size:.78rem;--bs-badge-font-weight:800;--bs-badge-color:var(--clay-on-accent);--bs-badge-border-radius:999px}
.card-body.clay-lesson{padding:1rem 1rem 1.4rem}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="clay-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="clay-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="clay-i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z"/></symbol>
  <symbol id="clay-i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5"/></symbol>
  <symbol id="clay-i-flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3.5h5M10.5 3.5v5.5L5 18.5A1.8 1.8 0 0 0 6.6 21h10.8a1.8 1.8 0 0 0 1.6-2.5L13.5 9V3.5"/><path d="M7.5 15h9"/></symbol>
  <symbol id="clay-i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="m4 7 8 6 8-6"/></symbol>
  <symbol id="clay-i-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4-3-6.5-4-10-2 1.5-3.5 4-3.5 6.5-1-1-1.5-2-1.5-3.5C7 9.5 5.5 12 5.5 14.5A6.5 6.5 0 0 0 12 21z"/></symbol>
  <symbol id="clay-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
</svg>
<section><span class="mb-5 block text-[.74rem] font-extrabold tracking-[.12em] text-clay-muted uppercase">Stat cards</span><div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-6">
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay grid content-start gap-1 [--clay-fill:var(--clay-peach)]"><span class="grid size-[52px] flex-none place-items-center rounded-[18px] border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] text-clay-ink shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-fire"/></svg></span><h3 class="mt-[.85rem] mb-0 text-[.9rem] font-extrabold text-clay-muted">Learning streak</h3><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">12 <span class="text-base font-bold">days</span></p><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Best ever is 15 days</p></article>
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay grid content-start gap-1 [--clay-fill:var(--clay-lemon)]"><span class="grid size-[52px] flex-none place-items-center rounded-[18px] border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] text-clay-ink shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-star"/></svg></span><h3 class="mt-[.85rem] mb-0 text-[.9rem] font-extrabold text-clay-muted">Stars earned</h3><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">340</p><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Up 45 since Monday</p></article>
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay grid content-start gap-1 [--clay-fill:var(--clay-mint)]"><span class="grid size-[52px] flex-none place-items-center rounded-[18px] border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] text-clay-ink shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-clock"/></svg></span><h3 class="mt-[.85rem] mb-0 text-[.9rem] font-extrabold text-clay-muted">Minutes this week</h3><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">86 <span class="text-base font-bold">min</span></p><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Goal is 100 minutes</p></article>
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay grid content-start gap-1 [--clay-fill:var(--clay-sky)]"><span class="grid size-[52px] flex-none place-items-center rounded-[18px] border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] text-clay-ink shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span><h3 class="mt-[.85rem] mb-0 text-[.9rem] font-extrabold text-clay-muted">Lessons finished</h3><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">27</p><p class="m-0 text-[.86rem] font-semibold text-clay-muted">3 waiting in the queue</p></article>
</div></section>
<div class="grid grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] items-start gap-7 max-[767px]:grid-cols-1">
<section><span class="mb-5 block text-[.74rem] font-extrabold tracking-[.12em] text-clay-muted uppercase">Content card</span><article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] text-clay-ink shadow-clay flex flex-col gap-4 px-4 pt-4 pb-[1.4rem]">
<div class="relative h-[170px] overflow-hidden rounded-[calc(var(--clay-radius)*.75)] bg-clay-sky shadow-clay-well" aria-hidden="true"><span class="absolute rounded-full shadow-clay-sm top-[22px] right-[34px] size-[58px] bg-clay-lemon"></span><span class="absolute rounded-full shadow-clay-sm -bottom-[70px] -left-5 h-[140px] w-[240px] bg-clay-mint"></span><span class="absolute rounded-full shadow-clay-sm -right-10 -bottom-[90px] h-[150px] w-[260px] bg-clay-peach"></span><span class="absolute rounded-full shadow-clay-sm top-[52px] left-10 h-[54px] w-[140px] bg-clay-surface"></span><span class="absolute rounded-full shadow-clay-sm top-[30px] left-[78px] h-[60px] w-[70px] bg-clay-surface"></span><span class="absolute top-[116px] h-5 w-3.5 rounded-[50%_50%_50%_50%/60%_60%_40%_40%] bg-clay-accent" style="left:70px"></span><span class="absolute top-[116px] h-5 w-3.5 rounded-[50%_50%_50%_50%/60%_60%_40%_40%] bg-clay-accent" style="left:110px;top:124px"></span><span class="absolute top-[116px] h-5 w-3.5 rounded-[50%_50%_50%_50%/60%_60%_40%_40%] bg-clay-accent" style="left:150px"></span></div>
<div class="grid gap-[.55rem] px-2"><p class="m-0"><span class="inline-flex items-center gap-[.35rem] rounded-full border-(length:--clay-bw) border-clay-line bg-clay-surface px-3 py-[.3rem] text-[.8rem] leading-[1.3] font-extrabold text-clay-ink [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-flask"/></svg>Science · 8 min</span></p><h3 class="m-0 text-[1.3rem] leading-[1.25] font-extrabold">Why does it rain?</h3><p class="m-0 text-clay-muted">Follow a water droplet from the sea up into a cloud and back down to the hills, then build your own rain cloud in a jar.</p></div>
<div class="flex flex-wrap items-center justify-between gap-4 px-2"><div class="grid min-w-[140px] flex-1 gap-[.35rem] text-[.84rem] font-bold text-clay-muted"><span>3 of 5 steps done</span><span class="h-3.5 overflow-hidden rounded-full border-(length:--clay-bw) border-clay-edge bg-clay-bg shadow-clay-well" role="progressbar" aria-label="Lesson progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-(--clay-pct) rounded-full bg-clay-accent" style="--clay-pct:60%"></span></span></div><a class="m-0 inline-flex min-h-[50px] cursor-pointer items-center justify-center gap-[.55rem] rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] px-6 py-[.7rem] font-[inherit] text-base leading-[1.2] font-extrabold no-underline shadow-clay-sm transition-[translate,box-shadow] duration-[180ms] motion-reduce:transition-none hover:-translate-y-0.5 hover:shadow-clay active:translate-y-0.5 active:shadow-clay-press motion-reduce:hover:translate-y-0 motion-reduce:active:translate-y-0 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-clay-accent [--clay-fill:var(--clay-accent)] border-clay-accent text-clay-on-accent" href="#">Keep going</a></div>
</article></section>
<section><span class="mb-5 block text-[.74rem] font-extrabold tracking-[.12em] text-clay-muted uppercase">Profile card</span><article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay grid justify-items-center gap-[.4rem] text-center">
<span class="mb-[.6rem] grid size-24 place-items-center rounded-full border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-lilac))] text-[2rem] font-extrabold shadow-clay [--clay-fill:var(--clay-lilac)]" aria-hidden="true">MO</span>
<h3 class="m-0 text-[1.3rem] leading-[1.25] font-extrabold">Maya Okafor</h3><p class="m-0 text-clay-muted">Year 2 teacher · Bramble Class</p>
<ul class="mt-[.9rem] mb-[1.1rem] grid w-full list-none grid-cols-3 gap-2.5 p-0"><li class="grid rounded-[18px] bg-[var(--clay-fill,var(--clay-bg))] px-[.3rem] py-[.6rem] shadow-clay-well [--clay-fill:var(--clay-peach)]"><span class="text-[1.25rem] leading-[1.2] font-extrabold">26</span><span class="text-[.78rem] font-bold text-clay-muted">Pupils</span></li><li class="grid rounded-[18px] bg-[var(--clay-fill,var(--clay-bg))] px-[.3rem] py-[.6rem] shadow-clay-well [--clay-fill:var(--clay-mint)]"><span class="text-[1.25rem] leading-[1.2] font-extrabold">148</span><span class="text-[.78rem] font-bold text-clay-muted">Lessons</span></li><li class="grid rounded-[18px] bg-[var(--clay-fill,var(--clay-bg))] px-[.3rem] py-[.6rem] shadow-clay-well [--clay-fill:var(--clay-sky)]"><span class="text-[1.25rem] leading-[1.2] font-extrabold">12</span><span class="text-[.78rem] font-bold text-clay-muted">Badges</span></li></ul>
<div class="flex flex-wrap justify-center gap-3"><button class="m-0 inline-flex min-h-[50px] cursor-pointer items-center justify-center gap-[.55rem] rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] px-6 py-[.7rem] font-[inherit] text-base leading-[1.2] font-extrabold no-underline shadow-clay-sm transition-[translate,box-shadow] duration-[180ms] motion-reduce:transition-none hover:-translate-y-0.5 hover:shadow-clay active:translate-y-0.5 active:shadow-clay-press motion-reduce:hover:translate-y-0 motion-reduce:active:translate-y-0 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-clay-accent [--clay-fill:var(--clay-accent)] border-clay-accent text-clay-on-accent" type="button"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-mail"/></svg>Message</button><button class="m-0 inline-flex min-h-[50px] cursor-pointer items-center justify-center gap-[.55rem] rounded-full border-(length:--clay-bw) border-clay-edge bg-[var(--clay-fill,var(--clay-surface))] px-6 py-[.7rem] font-[inherit] text-base leading-[1.2] font-extrabold text-clay-ink no-underline shadow-clay-sm transition-[translate,box-shadow] duration-[180ms] motion-reduce:transition-none hover:-translate-y-0.5 hover:shadow-clay active:translate-y-0.5 active:shadow-clay-press motion-reduce:hover:translate-y-0 motion-reduce:active:translate-y-0 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-clay-accent [--clay-fill:var(--clay-lemon)]" type="button"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-plus"/></svg>Follow</button></div>
</article></section>
</div>
<section><span class="mb-5 block text-[.74rem] font-extrabold tracking-[.12em] text-clay-muted uppercase">Pricing pair</span><div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] items-start gap-7">
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay relative grid gap-[.9rem]"><h3 class="m-0 text-[1.15rem] font-extrabold">Sprout</h3><p class="m-0 text-[2.6rem] leading-none font-extrabold">£0 <span class="text-base font-bold text-clay-muted">forever</span></p><p class="m-0 text-clay-muted">For one child trying things out.</p>
<ul class="mt-[.2rem] mb-[.4rem] grid list-none gap-[.6rem] p-0"><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4 [--clay-fill:var(--clay-mint)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>1 child profile</li><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4 [--clay-fill:var(--clay-mint)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>3 lessons a day</li><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4 [--clay-fill:var(--clay-mint)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Habit tracker</li></ul>
<a class="m-0 inline-flex min-h-[50px] cursor-pointer items-center justify-center gap-[.55rem] rounded-full border-(length:--clay-bw) border-clay-edge bg-[var(--clay-fill,var(--clay-surface))] px-6 py-[.7rem] font-[inherit] text-base leading-[1.2] font-extrabold text-clay-ink no-underline shadow-clay-sm transition-[translate,box-shadow] duration-[180ms] motion-reduce:transition-none hover:-translate-y-0.5 hover:shadow-clay active:translate-y-0.5 active:shadow-clay-press motion-reduce:hover:translate-y-0 motion-reduce:active:translate-y-0 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-clay-accent w-full" href="#">Start for free</a></article>
<article class="m-0 rounded-clay border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] p-[1.6rem] text-clay-ink shadow-clay relative grid gap-[.9rem] [--clay-fill:var(--clay-lilac)]"><span class="absolute -top-3.5 right-6 rounded-full border-(length:--clay-bw) border-clay-accent bg-clay-accent px-[.85rem] py-[.3rem] text-[.78rem] font-extrabold text-clay-on-accent shadow-clay-sm">Most popular</span><h3 class="m-0 text-[1.15rem] font-extrabold">Family</h3><p class="m-0 text-[2.6rem] leading-none font-extrabold">£5 <span class="text-base font-bold text-clay-muted">a month</span></p><p class="m-0 text-clay-muted">For up to four children, with a parent dashboard.</p>
<ul class="mt-[.2rem] mb-[.4rem] grid list-none gap-[.6rem] p-0"><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>4 child profiles</li><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Every lesson, no daily limit</li><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Weekly progress email</li><li class="flex items-center gap-[.6rem] font-semibold"><span class="grid size-[26px] flex-none place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Offline packs for trips</li></ul>
<a class="m-0 inline-flex min-h-[50px] cursor-pointer items-center justify-center gap-[.55rem] rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] px-6 py-[.7rem] font-[inherit] text-base leading-[1.2] font-extrabold no-underline shadow-clay-sm transition-[translate,box-shadow] duration-[180ms] motion-reduce:transition-none hover:-translate-y-0.5 hover:shadow-clay active:translate-y-0.5 active:shadow-clay-press motion-reduce:hover:translate-y-0 motion-reduce:active:translate-y-0 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-clay-accent [--clay-fill:var(--clay-accent)] border-clay-accent text-clay-on-accent w-full" href="#">Try Family free for 14 days</a></article>
</div></section>

CSS

/* ── Claymorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is a puffy pastel object floating above --clay-bg: one big soft drop shadow
   below it, an inset highlight top left and an inset shade bottom right. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --clay-bg:#f3effa;          /* page, a pale lilac white */
  --clay-surface:#fffcf8;     /* cards, fields and plain objects */
  --clay-peach:#ffd2bd;       /* object fills: ink text on every fill reaches 11:1 */
  --clay-lilac:#dccdff;
  --clay-mint:#bdeed6;
  --clay-sky:#c2e0ff;
  --clay-lemon:#ffe9a3;
  --clay-ink:#241a3d;         /* text, 14.4:1 on --clay-bg */
  --clay-muted:#51476a;       /* secondary text, 5.7:1 or more on every fill */
  --clay-edge:#7a6e96;        /* control boundary, 4.1:1 on --clay-bg, so shadows are never the only edge */
  --clay-line:rgba(36,26,61,.12); /* decorative edge on cards and panels */
  --clay-accent:#6236e8;      /* focus ring and on / selected / current states, 5.8:1 on --clay-bg */
  --clay-on-accent:#ffffff;   /* text and marks on accent fills, 6.5:1 */
  --clay-tint:#e9e1ff;        /* light accent wash behind current items */
  --clay-drop:rgba(86,56,168,.30); /* colour of the outer drop shadow */
  --clay-hi:rgba(255,255,255,.88);  /* inset highlight, top left */
  --clay-lo:rgba(52,30,112,.20);    /* inset shade, bottom right */
  --clay-lift:14px;           /* how high objects float; every shadow scales from it */
  --clay-radius:30px;         /* cards; buttons are pills, fields use .55 of it */
  --clay-bw:1.5px;            /* control border width */
  --clay-success:#17663d;--clay-warning:#8a4b00;--clay-danger:#b3261e;
  --clay-font:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;
}
/* --clay-fill is set by .clay-peach, .clay-mint… on one object and must not leak into its children */
@property --clay-fill{syntax:"*";inherits:false}
/* Dark clay: data-clay="dark" on any wrapper, or a checked .clay-theme-input inside a [data-clay] element.
   :is() is a forgiving list, so browsers without :has() still apply data-clay="dark" */
[data-clay]:is([data-clay="dark"],:has(.clay-theme-input:checked)){
  --clay-bg:#1a1530;--clay-surface:#2a2347;
  --clay-peach:#6e3f33;--clay-lilac:#4a3a8a;--clay-mint:#215a4a;--clay-sky:#26497c;--clay-lemon:#5f5220;
  --clay-ink:#f7f3ff;--clay-muted:#d2c9ea;--clay-edge:#8f83b8;--clay-line:rgba(255,255,255,.1);
  --clay-accent:#bba6ff;--clay-on-accent:#1a1530;--clay-tint:#3a2f66;
  --clay-drop:rgba(4,2,14,.62);--clay-hi:rgba(255,255,255,.2);--clay-lo:rgba(0,0,0,.34);
  --clay-success:#86e3b0;--clay-warning:#ffc76e;--clay-danger:#ffa196;color-scheme:dark}
/* More contrast requested: soft shading stays, but every edge and secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-clay]:is([data-clay],:has(.clay-theme-input:checked)){
  --clay-edge:var(--clay-ink);--clay-line:var(--clay-ink);--clay-muted:var(--clay-ink);--clay-bw:2px}}
:root,[data-clay]{
  --clay-shadow:0 var(--clay-lift) calc(var(--clay-lift)*2.2) calc(var(--clay-lift)*-.3) var(--clay-drop),
    inset calc(var(--clay-lift)*.45) calc(var(--clay-lift)*.5) calc(var(--clay-lift)*.9) var(--clay-hi),
    inset calc(var(--clay-lift)*-.45) calc(var(--clay-lift)*-.6) calc(var(--clay-lift)*.9) var(--clay-lo);
  --clay-shadow-sm:0 calc(var(--clay-lift)*.55) calc(var(--clay-lift)*1.2) calc(var(--clay-lift)*-.15) var(--clay-drop),
    inset calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.3) calc(var(--clay-lift)*.5) var(--clay-hi),
    inset calc(var(--clay-lift)*-.25) calc(var(--clay-lift)*-.35) calc(var(--clay-lift)*.5) var(--clay-lo);
  --clay-press:0 calc(var(--clay-lift)*.12) calc(var(--clay-lift)*.25) 0 var(--clay-drop),
    inset calc(var(--clay-lift)*.2) calc(var(--clay-lift)*.25) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
  --clay-well:inset calc(var(--clay-lift)*.15) calc(var(--clay-lift)*.22) calc(var(--clay-lift)*.45) var(--clay-lo),
    inset calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*-.12) calc(var(--clay-lift)*.3) var(--clay-hi);
}
[data-clay]{background:var(--clay-bg);color:var(--clay-ink)}
/* The tokens above, exposed as Tailwind utilities: bg-clay-peach, text-clay-muted, border-clay-edge,
   shadow-clay, shadow-clay-sm, shadow-clay-press, shadow-clay-well, rounded-clay, rounded-clay-field, font-clay… */
@theme inline {
  --color-clay-bg: var(--clay-bg); --color-clay-surface: var(--clay-surface);
  --color-clay-peach: var(--clay-peach); --color-clay-lilac: var(--clay-lilac); --color-clay-mint: var(--clay-mint);
  --color-clay-sky: var(--clay-sky); --color-clay-lemon: var(--clay-lemon);
  --color-clay-ink: var(--clay-ink); --color-clay-muted: var(--clay-muted); --color-clay-edge: var(--clay-edge); --color-clay-line: var(--clay-line);
  --color-clay-accent: var(--clay-accent); --color-clay-on-accent: var(--clay-on-accent); --color-clay-tint: var(--clay-tint);
  --color-clay-success: var(--clay-success); --color-clay-warning: var(--clay-warning); --color-clay-danger: var(--clay-danger);
  --shadow-clay: var(--clay-shadow); --shadow-clay-sm: var(--clay-shadow-sm); --shadow-clay-press: var(--clay-press); --shadow-clay-well: var(--clay-well);
  --radius-clay: var(--clay-radius); --radius-clay-field: calc(var(--clay-radius) * .55); --radius-clay-sm: calc(var(--clay-radius) * .4);
  --font-clay: var(--clay-font);
}

About this set

Four kinds of card moulded from the same clay. Stat cards are coloured slabs in peach, lemon, mint and sky, each with a white blob icon, a label, a big number and a sentence that explains it, such as a 12-day learning streak or 340 stars earned. The content card opens with an illustration built only from CSS shapes, a sun, clouds, rolling hills and raindrops, followed by a subject chip, a title, a short description, a progress bar for the lesson and a Keep going button. The profile card puts a round initials avatar on its own drop shadow above a name, a role, three inset stat wells and Message and Follow buttons. The pricing pair sets a free plan beside a lilac paid plan with a Most popular badge, ticked feature lists and full-width buttons. Use them for dashboards, learning apps, team pages and upgrade screens. Headings are real h3 elements, the progress bar has progressbar semantics and a label, and the illustration is hidden from screen readers. Fills are set per object, so a lilac card does not turn the buttons inside it lilac.

What’s included

Coloured stat slabs with blob icons and explanatory notes
Content card with an illustration drawn from CSS shapes
Profile card with an initials avatar and inset stat wells
Free and paid pricing pair with a Most popular badge
Bootstrap version built on .card, .progress and .badge

Accessibility

Text on every pastel fill uses the deep ink colour at 11:1 or more and secondary text stays above 5.7:1. The lesson progress bar has role="progressbar", a label and its value, and the decorative illustration and avatar are hidden with aria-hidden. Buttons and links show a 3px accent focus ring.

Customise it

Pick a fill class (clay-peach, clay-mint, clay-sky, clay-lemon, clay-lilac) per card and tune --clay-lift and --clay-radius for depth and roundness. Bootstrap maps the tokens onto --bs-card-*, and Tailwind exposes rounded-clay, shadow-clay and bg-clay-* utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Claymorphism