Claymorphism Kids Learning App & Habit Tracker UI

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-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M8 5.5v13l10.5-6.5z"/></symbol>
  <symbol id="clay-i-starFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" 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-abc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l3-9 3 9M4 14.2h4M11.5 8v9h2.8a2.3 2.3 0 0 0 0-4.6h-2.8M11.5 12.4h2.3a2.2 2.2 0 0 0 0-4.4h-2.3M21 9.2A3.8 3.8 0 1 0 21 16"/></symbol>
  <symbol id="clay-i-calc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01"/></symbol>
  <symbol id="clay-i-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5a8.5 8.5 0 0 0 0 17c1.4 0 2-1 1.5-2.2-.6-1.4.3-2.8 1.8-2.8H17a3.5 3.5 0 0 0 3.5-3.5c0-4.7-3.8-8.5-8.5-8.5z"/><circle cx="8" cy="11" r="1.2" fill="currentColor"/><circle cx="11" cy="7.5" r="1.2" fill="currentColor"/><circle cx="15.5" cy="8.5" r="1.2" fill="currentColor"/></symbol>
  <symbol id="clay-i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="10" rx="3"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></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-tooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 4C5 4 3.5 6 4 9c.5 3 1.5 4 2 7.5.3 2.2 1 4 2 4s1.5-1.5 2-4 1-3 2-3 1.5.5 2 3 1 4 2 4 1.7-1.8 2-4c.5-3.5 1.5-4.5 2-7.5.5-3-1-5-3.5-5-2 0-2.5 1-4.5 1S9.5 4 7.5 4z"/></symbol>
  <symbol id="clay-i-plant" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4 3-6.5 7-6.5 0 4-3 6.5-7 6.5zM12 14c0-3-2.5-5-6-5 0 3 2.5 5 6 5z"/><path d="M7.5 20h9"/></symbol>
  <symbol id="clay-i-toy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="16" height="11" rx="3"/><path d="M9 9V6.5a3 3 0 0 1 6 0V9M12 13v3"/></symbol>
  <symbol id="clay-i-bed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18V7M3 14h18v4M21 14v-2.5a3 3 0 0 0-3-3h-7v5.5"/><circle cx="7" cy="11" r="2"/></symbol>
</svg>
<div class="clay-app" data-clay="light">
<header class="clay-app__head">
<div class="clay-app__hello"><span class="clay-app__avatar" aria-hidden="true">L</span><div><h1 class="clay-app__title">Hi Leo, ready for day 13?</h1><p class="clay-app__sub">Monday 19 October · 2 lessons and 5 habits today</p></div></div>
<label class="clay-switch clay-app__theme"><input class="clay-sr clay-theme-input" type="checkbox" role="switch"><span class="clay-switch__text">Night mode<span class="clay-switch__hint">Dark clay for bedtime</span></span><span class="clay-switch__state" aria-hidden="true"></span><span class="clay-switch__track" aria-hidden="true"></span></label>
</header>
<div class="clay-app__grid">
<article class="clay-card clay-stat clay-peach"><div class="clay-lcard__top"><h2 class="clay-app__label">Learning streak</h2><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-fire"/></svg></span></div><p class="clay-stat__value">12 <span class="clay-stat__unit">days</span></p><ul class="clay-week" aria-label="Last seven days"><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Tu<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>We<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Th<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Fr<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Sa<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Su<span class="clay-sr">, done</span></li><li class="clay-week__day"><span class="clay-week__dot"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Mo<span class="clay-sr">, not yet</span></li></ul></article>
<article class="clay-card clay-stat clay-lemon"><div class="clay-lcard__top"><h2 class="clay-app__label">Stars this week</h2><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-starFill"/></svg></span></div><p class="clay-stat__value">340</p><div class="clay-meter"><span>7 of 10 stickers to the Rocket</span><span class="clay-meter__bar" role="progressbar" aria-label="Stickers until the Rocket sticker" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10" aria-valuetext="7 of 10 stickers to the Rocket"><span class="clay-meter__fill" style="--clay-pct:70%"></span></span></div></article>
</div>
<section><h2 class="clay-app__h2">Today's lessons</h2><div class="clay-lessons">
<article class="clay-card clay-lcard clay-sky"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-abc"/></svg></span><button class="clay-iconbtn clay-iconbtn--accent" type="button" aria-label="Play Letter sounds"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Letter sounds: sh and ch</h3><p class="clay-lcard__meta">Reading · 6 min · step 2 of 4</p></div><span class="clay-meter__bar" role="progressbar" aria-label="Letter sounds: sh and ch progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span class="clay-meter__fill" style="--clay-pct:50%"></span></span></article>
<article class="clay-card clay-lcard clay-mint"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-calc"/></svg></span><button class="clay-iconbtn clay-iconbtn--accent" type="button" aria-label="Play Counting in fives"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Counting in fives</h3><p class="clay-lcard__meta">Maths · 8 min · new</p></div><span class="clay-meter__bar" role="progressbar" aria-label="Counting in fives progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="clay-meter__fill" style="--clay-pct:0%"></span></span></article>
<article class="clay-card clay-lcard clay-lilac"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-palette"/></svg></span><button class="clay-iconbtn clay-iconbtn--accent" type="button" aria-label="Replay Paint a rainy day"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Paint a rainy day</h3><p class="clay-lcard__meta">Art · 10 min · finished</p></div><span class="clay-meter__bar" role="progressbar" aria-label="Paint a rainy day progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><span class="clay-meter__fill" style="--clay-pct:100%"></span></span></article>
</div></section>
<section class="clay-card"><h2 class="clay-app__h2">Habit tracker</h2>
<div class="clay-habits__scroll"><table class="clay-habits"><caption class="clay-sr">Habits for the last seven days</caption><thead><tr><th class="clay-habits__th clay-habits__th--name" scope="col">Habit</th><th class="clay-habits__th" scope="col"><abbr title="Tuesday 13">Tue</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Wednesday 14">Wed</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Thursday 15">Thu</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Friday 16">Fri</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Saturday 17">Sat</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Sunday 18">Sun</abbr></th><th class="clay-habits__th clay-habits__th--today" scope="col"><abbr title="Monday 19">Mon</abbr></th></tr></thead><tbody>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg>Brush teeth twice</th><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Tuesday 13" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Wednesday 14" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Thursday 15" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Friday 16" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Saturday 17" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Sunday 18" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell clay-habits__cell--today"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Brush teeth twice, Monday 19, today" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg>Read for 15 minutes</th><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Tuesday 13" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Wednesday 14" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Thursday 15"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Friday 16" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Saturday 17" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Sunday 18" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell clay-habits__cell--today"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Read for 15 minutes, Monday 19, today"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg>Water the plants</th><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Tuesday 13" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Wednesday 14"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Thursday 15" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Friday 16"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Saturday 17" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Sunday 18"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell clay-habits__cell--today"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Water the plants, Monday 19, today"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-toy"/></svg>Tidy the toys away</th><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Tuesday 13"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Wednesday 14" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Thursday 15" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Friday 16" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Saturday 17"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Sunday 18" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell clay-habits__cell--today"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Tidy the toys away, Monday 19, today"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-bed"/></svg>Lights out by 8</th><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Tuesday 13" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Wednesday 14" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Thursday 15" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Friday 16" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Saturday 17" checked><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Sunday 18"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="clay-habits__cell clay-habits__cell--today"><label class="clay-check"><input class="clay-sr" type="checkbox" aria-label="Lights out by 8, Monday 19, today"><span class="clay-check__box"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
</tbody></table></div>
</section>
<section class="clay-card"><h2 class="clay-app__h2">Sticker shelf</h2><ul class="clay-stickers">
<li class="clay-sticker"><span class="clay-sticker__blob clay-sky"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span>Bookworm<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg></span>Green thumb<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-peach"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg></span>Sparkle smile<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-sticker__blob--locked"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-lock"/></svg></span>Rocket<span class="clay-sticker__state">3 more stickers</span></li>
</ul></section>
</div>

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}}
/* Switches: a checkbox with role="switch". On = the puffy knob slides right, the track fills with accent and says On */
.clay-switch{position:relative;display:flex;align-items:center;gap:1rem;cursor:pointer}
.clay-switch__text{flex:1;min-width:0;font-weight:800;line-height:1.3}
.clay-switch__hint{display:block;margin-top:.15rem;font-size:.86rem;font-weight:500;color:var(--clay-muted)}
.clay-switch__state{min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--clay-muted)}
.clay-switch__state::after{content:"Off"}
.clay-switch__track{position:relative;flex:none;width:64px;height:36px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;
  background:var(--clay-bg);box-shadow:var(--clay-well);transition:background-color .2s,border-color .2s}
.clay-switch__track::before{content:"";position:absolute;top:50%;left:3px;width:27px;height:27px;margin-top:-13.5px;border:var(--clay-bw) solid var(--clay-edge);
  border-radius:50%;background:var(--clay-surface);box-shadow:var(--clay-shadow-sm);transition:transform .2s}
.clay-switch input:checked~.clay-switch__track{background:var(--clay-accent);border-color:var(--clay-accent)}
.clay-switch input:checked~.clay-switch__track::before{transform:translateX(28px);border-color:var(--clay-on-accent)}
.clay-switch input:checked~.clay-switch__state{color:var(--clay-accent)}
.clay-switch input:checked~.clay-switch__state::after{content:"On"}
.clay-switch input:focus-visible~.clay-switch__track{outline:3px solid var(--clay-accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.clay-switch__track,.clay-switch__track::before{transition:none}}
/* Fields: soft white wells with a 4:1 edge and a label above. Focus adds an accent edge and ring */
.clay-field{display:grid;align-content:start;gap:.45rem;min-width:0}
.clay-label{font-size:.92rem;font-weight:800;line-height:1.3}
.clay-control{position:relative;display:flex;align-items:center}
.clay-control>.clay-ico{position:absolute;left:16px;color:var(--clay-muted);pointer-events:none}
.clay-input{display:block;width:100%;min-height:52px;margin:0;padding:.75rem 1.1rem;border:var(--clay-bw) solid var(--clay-edge);border-radius:calc(var(--clay-radius)*.55);
  background:var(--clay-surface);color:var(--clay-ink);font-family:inherit;font-size:1rem;font-weight:600;line-height:1.35;box-shadow:var(--clay-well);
  appearance:none;transition:border-color .18s,box-shadow .18s}
.clay-input::placeholder{color:var(--clay-muted);opacity:1;font-weight:500}
.clay-input:focus{outline:3px solid var(--clay-accent);outline-offset:3px;border-color:var(--clay-accent)}
.clay-input--icon{padding-left:3.05rem}
.clay-input--select{padding-right:3rem;cursor:pointer}
.clay-control>.clay-ico.clay-control__chev{left:auto;right:16px;color:var(--clay-ink)}
.clay-input--area{min-height:104px;resize:vertical}
.clay-input--error{border-color:var(--clay-danger);border-width:2px}
.clay-help{margin:0;font-size:.85rem;color:var(--clay-muted)}
.clay-error{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem;font-weight:700;color:var(--clay-danger)}
.clay-error .clay-ico{width:18px;height:18px}
/* Checkboxes and radios: a hidden input and a puffy box. Checked = squashed flat, accent fill and a tick or dot */
.clay-group{min-width:0;margin:0;padding:0;border:0}
.clay-group__legend{float:none;width:auto;margin:0 0 .75rem;padding:0;font-size:.92rem;font-weight:800;line-height:1.3}
.clay-group__list{display:grid;gap:.8rem}
.clay-check{position:relative;display:flex;align-items:center;gap:.8rem;font-weight:700;cursor:pointer}
.clay-check__box{display:grid;place-items:center;flex:none;width:28px;height:28px;border:var(--clay-bw) solid var(--clay-edge);border-radius:10px;
  background:var(--clay-surface);color:transparent;box-shadow:var(--clay-shadow-sm);transition:transform .18s,box-shadow .18s,background-color .18s}
.clay-check__box .clay-ico{width:18px;height:18px}
.clay-check__box--radio{border-radius:50%}
.clay-check__box--radio::before{content:"";width:10px;height:10px;border-radius:50%;background:transparent}
.clay-check input:checked+.clay-check__box{transform:translateY(2px);border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent);box-shadow:var(--clay-press)}
.clay-check input:checked+.clay-check__box--radio::before{background:var(--clay-on-accent)}
.clay-check input:focus-visible+.clay-check__box{outline:3px solid var(--clay-accent);outline-offset:3px}
.clay-check__hint{display:block;font-size:.84rem;font-weight:500;color:var(--clay-muted)}
/* Login card */
.clay-login{max-width:420px;width:100%;margin:0 auto}
.clay-login__badge{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border:var(--clay-bw) solid var(--clay-line);border-radius:22px;
  background:var(--clay-fill,var(--clay-lemon));box-shadow:var(--clay-shadow-sm)}
.clay-login__title{margin:0;font-size:1.5rem;font-weight:800;line-height:1.2;text-align:center}
.clay-login__sub{margin:.35rem 0 1.5rem;color:var(--clay-muted);text-align:center}
.clay-login__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.clay-link{color:var(--clay-accent);font-weight:800;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.clay-link:hover{color:var(--clay-ink)}
.clay-link:focus-visible{outline:3px solid var(--clay-accent);outline-offset:3px}
.clay-login__foot{margin:1.25rem 0 0;font-size:.92rem;color:var(--clay-muted);text-align:center}
.clay-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.4rem}
@media (prefers-reduced-motion:reduce){.clay-input,.clay-check__box{transition: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))}
/* Kids learning app shell. The Night mode switch is a checkbox with class .clay-theme-input: the token block's
   [data-clay]:has(.clay-theme-input:checked) rule swaps every token to dark clay, so no script is involved */
.clay-app{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:28px;border:var(--clay-bw) solid var(--clay-line);border-radius:calc(var(--clay-radius)*1.3);box-shadow:var(--clay-shadow);transition:background-color .3s,color .3s}
.clay-app__head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.clay-app__hello{display:flex;align-items:center;gap:14px;margin-right:auto}
.clay-app__avatar{display:grid;place-items:center;flex:none;width:64px;height:64px;border:var(--clay-bw) solid var(--clay-line);border-radius:22px;background:var(--clay-mint);font-size:1.5rem;font-weight:800;box-shadow:var(--clay-shadow-sm)}
.clay-app__title{margin:0;font-size:1.6rem;font-weight:800;line-height:1.2}
.clay-app__sub{margin:0;color:var(--clay-muted)}
.clay-app__theme{min-width:250px}
.clay-app__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.clay-app__label{margin:0;font-size:.9rem;font-weight:800;color:var(--clay-muted)}
.clay-app__h2{margin:0 0 14px;font-size:1.2rem;font-weight:800}
/* Streak week: seven pebbles, done days are filled and ticked */
.clay-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:1rem 0 0;padding:0;list-style:none;text-align:center}
.clay-week__day{display:grid;justify-items:center;gap:4px;font-size:.74rem;font-weight:800}
.clay-week__dot{display:grid;place-items:center;width:30px;height:30px;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;background:var(--clay-surface);color:transparent;box-shadow:var(--clay-well)}
.clay-week__dot .clay-ico{width:16px;height:16px}
.clay-week__dot--done{border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent);box-shadow:var(--clay-shadow-sm)}
/* Lessons */
.clay-lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px}
.clay-lcard{display:grid;gap:.8rem;padding:1.3rem}
.clay-lcard__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.clay-lcard__title{margin:0;font-size:1.1rem;font-weight:800;line-height:1.3}
.clay-lcard__meta{margin:0;font-size:.86rem;font-weight:600;color:var(--clay-muted)}
/* Habit tracker: a table of checkboxes, today's column on a tint */
.clay-habits__scroll{overflow-x:auto;margin:0 -.4rem;padding:.4rem}
.clay-habits{width:100%;min-width:520px;border-collapse:separate;border-spacing:0 8px}
.clay-habits__th{padding:0 .3rem .2rem;font-size:.74rem;font-weight:800;color:var(--clay-muted);text-align:center;text-transform:uppercase}
.clay-habits__th--name{text-align:left}
.clay-habits__th abbr{text-decoration:none;cursor:help}
.clay-habits__th--today{color:var(--clay-accent)}
.clay-habits__name{padding:.3rem .6rem .3rem 0;font-weight:800;text-align:left;white-space:nowrap}
.clay-habits__name .clay-ico{vertical-align:-5px;margin-right:.45rem}
.clay-habits__cell{padding:.3rem;text-align:center}
.clay-habits__cell .clay-check{justify-content:center}
.clay-habits__cell--today{background:var(--clay-tint)}
.clay-habits__cell--today:last-child{border-radius:0 16px 16px 0}
/* Sticker shelf */
.clay-stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.clay-sticker{display:grid;justify-items:center;gap:.45rem;font-size:.84rem;font-weight:800;text-align:center}
.clay-sticker__blob{display:grid;place-items:center;width:64px;height:64px;border:var(--clay-bw) solid var(--clay-line);border-radius:50%;background:var(--clay-fill,var(--clay-surface));box-shadow:var(--clay-shadow-sm)}
.clay-sticker__blob .clay-ico{width:30px;height:30px}
.clay-sticker__blob--locked{border:2px dashed var(--clay-edge);background:var(--clay-bg);color:var(--clay-muted);box-shadow:var(--clay-well)}
.clay-sticker__state{font-weight:600;color:var(--clay-muted)}
@media (max-width:600px){.clay-app{padding:18px}}
@media (prefers-reduced-motion:reduce){.clay-app{transition:none}}

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-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M8 5.5v13l10.5-6.5z"/></symbol>
  <symbol id="clay-i-starFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" 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-abc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l3-9 3 9M4 14.2h4M11.5 8v9h2.8a2.3 2.3 0 0 0 0-4.6h-2.8M11.5 12.4h2.3a2.2 2.2 0 0 0 0-4.4h-2.3M21 9.2A3.8 3.8 0 1 0 21 16"/></symbol>
  <symbol id="clay-i-calc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01"/></symbol>
  <symbol id="clay-i-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5a8.5 8.5 0 0 0 0 17c1.4 0 2-1 1.5-2.2-.6-1.4.3-2.8 1.8-2.8H17a3.5 3.5 0 0 0 3.5-3.5c0-4.7-3.8-8.5-8.5-8.5z"/><circle cx="8" cy="11" r="1.2" fill="currentColor"/><circle cx="11" cy="7.5" r="1.2" fill="currentColor"/><circle cx="15.5" cy="8.5" r="1.2" fill="currentColor"/></symbol>
  <symbol id="clay-i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="10" rx="3"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></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-tooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 4C5 4 3.5 6 4 9c.5 3 1.5 4 2 7.5.3 2.2 1 4 2 4s1.5-1.5 2-4 1-3 2-3 1.5.5 2 3 1 4 2 4 1.7-1.8 2-4c.5-3.5 1.5-4.5 2-7.5.5-3-1-5-3.5-5-2 0-2.5 1-4.5 1S9.5 4 7.5 4z"/></symbol>
  <symbol id="clay-i-plant" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4 3-6.5 7-6.5 0 4-3 6.5-7 6.5zM12 14c0-3-2.5-5-6-5 0 3 2.5 5 6 5z"/><path d="M7.5 20h9"/></symbol>
  <symbol id="clay-i-toy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="16" height="11" rx="3"/><path d="M9 9V6.5a3 3 0 0 1 6 0V9M12 13v3"/></symbol>
  <symbol id="clay-i-bed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18V7M3 14h18v4M21 14v-2.5a3 3 0 0 0-3-3h-7v5.5"/><circle cx="7" cy="11" r="2"/></symbol>
</svg>
<div class="clay-app" data-clay="light">
<header class="clay-app__head">
<div class="clay-app__hello"><span class="clay-app__avatar" aria-hidden="true">L</span><div><h1 class="clay-app__title">Hi Leo, ready for day 13?</h1><p class="clay-app__sub">Monday 19 October · 2 lessons and 5 habits today</p></div></div>
<div class="form-check form-switch clay-bswitch clay-app__theme"><input class="form-check-input clay-theme-input" type="checkbox" role="switch" id="night-mode"><label class="form-check-label" for="night-mode">Night mode<span class="clay-switch-hint">Dark clay for bedtime</span></label><span class="clay-switch-state" aria-hidden="true"></span></div>
</header>
<div class="clay-app__grid">
<article class="card clay-card clay-peach"><div class="card-body clay-stat"><div class="clay-lcard__top"><h2 class="clay-app__label">Learning streak</h2><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-fire"/></svg></span></div><p class="clay-stat__value">12 <span class="clay-stat__unit">days</span></p><ul class="clay-week" aria-label="Last seven days"><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Tu<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>We<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Th<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Fr<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Sa<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot clay-week__dot--done"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Su<span class="visually-hidden">, done</span></li><li class="clay-week__day"><span class="clay-week__dot"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Mo<span class="visually-hidden">, not yet</span></li></ul></div></article>
<article class="card clay-card clay-lemon"><div class="card-body clay-stat"><div class="clay-lcard__top"><h2 class="clay-app__label">Stars this week</h2><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-starFill"/></svg></span></div><p class="clay-stat__value">340</p><div class="clay-meter"><span>7 of 10 stickers to the Rocket</span><div class="progress clay-progress-bar" role="progressbar" aria-label="Stickers until the Rocket sticker" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10" aria-valuetext="7 of 10 stickers to the Rocket"><div class="progress-bar" style="width:70%"></div></div></div></div></article>
</div>
<section><h2 class="clay-app__h2">Today's lessons</h2><div class="clay-lessons">
<article class="card clay-card clay-sky"><div class="card-body clay-lcard"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-abc"/></svg></span><button class="btn btn-clay btn-clay-icon btn-clay-accent" type="button" aria-label="Play Letter sounds"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Letter sounds: sh and ch</h3><p class="clay-lcard__meta">Reading · 6 min · step 2 of 4</p></div><div class="progress clay-progress-bar" role="progressbar" aria-label="Letter sounds: sh and ch progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:50%"></div></div></div></article>
<article class="card clay-card clay-mint"><div class="card-body clay-lcard"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-calc"/></svg></span><button class="btn btn-clay btn-clay-icon btn-clay-accent" type="button" aria-label="Play Counting in fives"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Counting in fives</h3><p class="clay-lcard__meta">Maths · 8 min · new</p></div><div class="progress clay-progress-bar" role="progressbar" aria-label="Counting in fives progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:0%"></div></div></div></article>
<article class="card clay-card clay-lilac"><div class="card-body clay-lcard"><div class="clay-lcard__top"><span class="clay-blob"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-palette"/></svg></span><button class="btn btn-clay btn-clay-icon btn-clay-accent" type="button" aria-label="Replay Paint a rainy day"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="clay-lcard__title">Paint a rainy day</h3><p class="clay-lcard__meta">Art · 10 min · finished</p></div><div class="progress clay-progress-bar" role="progressbar" aria-label="Paint a rainy day progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:100%"></div></div></div></article>
</div></section>
<section class="card clay-card"><div class="card-body"><h2 class="clay-app__h2">Habit tracker</h2>
<div class="clay-habits__scroll"><table class="clay-habits"><caption class="visually-hidden">Habits for the last seven days</caption><thead><tr><th class="clay-habits__th clay-habits__th--name" scope="col">Habit</th><th class="clay-habits__th" scope="col"><abbr title="Tuesday 13">Tue</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Wednesday 14">Wed</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Thursday 15">Thu</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Friday 16">Fri</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Saturday 17">Sat</abbr></th><th class="clay-habits__th" scope="col"><abbr title="Sunday 18">Sun</abbr></th><th class="clay-habits__th clay-habits__th--today" scope="col"><abbr title="Monday 19">Mon</abbr></th></tr></thead><tbody>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg>Brush teeth twice</th><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Tuesday 13" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Wednesday 14" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Thursday 15" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Friday 16" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Saturday 17" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Sunday 18" checked></td><td class="clay-habits__cell clay-habits__cell--today"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Brush teeth twice, Monday 19, today" checked></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg>Read for 15 minutes</th><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Tuesday 13" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Wednesday 14" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Thursday 15"></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Friday 16" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Saturday 17" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Sunday 18" checked></td><td class="clay-habits__cell clay-habits__cell--today"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Read for 15 minutes, Monday 19, today"></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg>Water the plants</th><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Tuesday 13" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Wednesday 14"></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Thursday 15" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Friday 16"></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Saturday 17" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Sunday 18"></td><td class="clay-habits__cell clay-habits__cell--today"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Water the plants, Monday 19, today"></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-toy"/></svg>Tidy the toys away</th><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Tuesday 13"></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Wednesday 14" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Thursday 15" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Friday 16" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Saturday 17"></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Sunday 18" checked></td><td class="clay-habits__cell clay-habits__cell--today"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Tidy the toys away, Monday 19, today"></td></tr>
<tr><th class="clay-habits__name" scope="row"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-bed"/></svg>Lights out by 8</th><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Tuesday 13" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Wednesday 14" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Thursday 15" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Friday 16" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Saturday 17" checked></td><td class="clay-habits__cell"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Sunday 18"></td><td class="clay-habits__cell clay-habits__cell--today"><input class="form-check-input clay-hcheck" type="checkbox" aria-label="Lights out by 8, Monday 19, today"></td></tr>
</tbody></table></div>
</div></section>
<section class="card clay-card"><div class="card-body"><h2 class="clay-app__h2">Sticker shelf</h2><ul class="clay-stickers">
<li class="clay-sticker"><span class="clay-sticker__blob clay-sky"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span>Bookworm<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-mint"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg></span>Green thumb<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-peach"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg></span>Sparkle smile<span class="clay-sticker__state">Earned</span></li>
<li class="clay-sticker"><span class="clay-sticker__blob clay-sticker__blob--locked"><svg class="clay-ico" aria-hidden="true" focusable="false"><use href="#clay-i-lock"/></svg></span>Rocket<span class="clay-sticker__state">3 more stickers</span></li>
</ul></div></section>
</div>

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}}
/* Toggle tiles: Bootstrap .btn-check + .btn. On = squashed flat, accent edge, a filled tick badge and the word On */
.btn-clay-tile{--bs-btn-padding-x:1.2rem;--bs-btn-padding-y:1.1rem;--bs-btn-border-radius:calc(var(--clay-radius)*.8);--clay-btn-shadow:var(--clay-shadow);
  flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.35rem;width:100%;height:100%;padding-bottom:1rem;text-align:left}
.btn-clay-tile:hover{--clay-btn-shadow:var(--clay-shadow);transform:none}
.btn-check:checked+.btn-clay-tile{--clay-btn-shadow:var(--clay-press);--bs-btn-active-border-color:var(--clay-accent);transform:translateY(4px)}
.clay-tile-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:.4rem;border-radius:17px;background:var(--clay-surface);box-shadow:var(--clay-shadow-sm)}
.clay-tile-name{font-size:1.02rem;font-weight:800;line-height:1.25}
.clay-tile-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:800;color:var(--clay-muted)}
.clay-tile-state::after{content:"Off"}
.clay-tile-mark{display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--clay-edge);border-radius:50%;color:transparent;background:var(--clay-surface)}
.clay-tile-mark .clay-ico{width:14px;height:14px}
.btn-check:checked+.btn-clay-tile .clay-tile-state{color:var(--clay-ink)}
.btn-check:checked+.btn-clay-tile .clay-tile-state::after{content:"On"}
.btn-check:checked+.btn-clay-tile .clay-tile-mark{border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent)}
/* Icon toggle: .btn-check + a round .btn-clay. Pressed = flat, accent edge, filled icon */
.btn-check+.btn-clay-icon .clay-ico+.clay-ico,.btn-check:checked+.btn-clay-icon .clay-ico:first-of-type{display:none}
.btn-check:checked+.btn-clay-icon .clay-ico+.clay-ico{display:block}
.btn-check:checked+.btn-clay-icon{--clay-btn-shadow:var(--clay-press);--bs-btn-active-border-color:var(--clay-accent);transform:translateY(3px)}
/* Switches: Bootstrap .form-check.form-switch. The knob is a token-coloured radial gradient so it follows light and dark */
.clay-bswitch{display:flex;align-items:center;gap:1rem;min-height:0;margin:0;padding:0}
.clay-bswitch .form-check-label{flex:1;min-width:0;font-weight:800;line-height:1.3;cursor:pointer}
.clay-bswitch .clay-switch-hint{display:block;margin-top:.15rem;font-size:.86rem;font-weight:500;color:var(--clay-muted)}
.clay-bswitch .clay-switch-state{order:2;min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--clay-muted)}
.clay-bswitch .clay-switch-state::after{content:"Off"}
.clay-bswitch.form-switch .form-check-input,.clay-bswitch.form-switch .form-check-input:focus,.clay-bswitch.form-switch .form-check-input:checked,.clay-bswitch.form-switch .form-check-input:not(:checked):not(:focus){
  --bs-form-switch-bg:radial-gradient(circle at 50% 50%,var(--clay-knob) 0 12px,var(--clay-knob-edge) 12.5px 14px,transparent 14.5px)}
.clay-bswitch.form-switch .form-check-input{--clay-knob:var(--clay-surface);--clay-knob-edge:var(--clay-edge);order:3;flex:none;float:none;width:64px;height:36px;margin:0;
  border:var(--clay-bw) solid var(--clay-edge);background-color:var(--clay-bg);background-size:34px 34px;background-position:left center;box-shadow:var(--clay-well);cursor:pointer;
  transition:background-position .2s,background-color .2s,border-color .2s}
.clay-bswitch.form-switch .form-check-input:focus{border-color:var(--clay-edge);box-shadow:var(--clay-well)}
.clay-bswitch.form-switch .form-check-input:checked{--clay-knob-edge:var(--clay-on-accent);background-color:var(--clay-accent);border-color:var(--clay-accent);background-position:right center}
.clay-bswitch.form-switch .form-check-input:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px}
.clay-bswitch.form-switch .form-check-input:checked~.clay-switch-state{color:var(--clay-accent)}
.clay-bswitch.form-switch .form-check-input:checked~.clay-switch-state::after{content:"On"}
/* Segmented control: .btn-group of .btn-check radios. The chosen option pops up as a lifted pebble with a dot */
.clay-bseg{min-width:0;margin:0;padding:0;border:0}
.clay-bseg legend{float:none;width:auto;margin:0 0 .65rem;padding:0;font-size:.92rem;font-weight:800;line-height:1.4}
.clay-bseg .btn-group{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding:6px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well)}
.clay-bseg .btn{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.92rem;--bs-btn-font-weight:800;--bs-btn-border-width:var(--clay-bw);
  --bs-btn-color:var(--clay-muted);--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--clay-ink);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:var(--clay-surface);--bs-btn-active-color:var(--clay-accent);--bs-btn-active-border-color:var(--clay-accent);
  display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.4rem;min-height:42px;border-radius:999px!important;margin:0!important;transition:box-shadow .18s,background-color .18s}
.clay-bseg .btn-check:checked+.btn{box-shadow:var(--clay-shadow-sm)}
.clay-bseg .btn-check:checked+.btn::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.clay-bseg .btn-check:focus-visible+.btn{outline:3px solid var(--clay-accent);outline-offset:2px;box-shadow:var(--clay-shadow-sm)}
@media (prefers-reduced-motion:reduce){.clay-bswitch.form-switch .form-check-input,.clay-bseg .btn{transition: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))}
/* Seek bar: Bootstrap .form-range with a well track, a puffy thumb and a painted fill */
.form-range.clay-bseek{--clay-val:50%;height:30px}
.clay-bseek::-webkit-slider-runnable-track{height:14px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;box-shadow:var(--clay-well);
  background:linear-gradient(90deg,var(--clay-accent) var(--clay-val),var(--clay-bg) var(--clay-val))}
.clay-bseek::-moz-range-track{height:14px;border:var(--clay-bw) solid var(--clay-edge);border-radius:999px;background:var(--clay-bg);box-shadow:var(--clay-well)}
.clay-bseek::-moz-range-progress{height:14px;border-radius:999px;background:var(--clay-accent)}
.clay-bseek::-webkit-slider-thumb{width:28px;height:28px;margin-top:-8.5px;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;background:var(--clay-lemon);box-shadow:var(--clay-shadow-sm)}
.clay-bseek::-moz-range-thumb{width:28px;height:28px;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;background:var(--clay-lemon);box-shadow:var(--clay-shadow-sm)}
.clay-bseek:focus::-webkit-slider-thumb,.clay-bseek:focus::-moz-range-thumb{box-shadow:var(--clay-shadow-sm)}
.clay-bseek:focus-visible{outline:3px solid var(--clay-accent);outline-offset:4px;border-radius:999px}
/* Progress bars: Bootstrap .progress through --bs-progress-* */
.progress.clay-progress-bar{--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)}
.clay-progress-bar .progress-bar{border-radius:999px}
/* Kids learning app shell. The Night mode switch is a checkbox with class .clay-theme-input: the token block's
   [data-clay]:has(.clay-theme-input:checked) rule swaps every token to dark clay, so no script is involved */
.clay-app{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:28px;border:var(--clay-bw) solid var(--clay-line);border-radius:calc(var(--clay-radius)*1.3);box-shadow:var(--clay-shadow);transition:background-color .3s,color .3s}
.clay-app__head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.clay-app__hello{display:flex;align-items:center;gap:14px;margin-right:auto}
.clay-app__avatar{display:grid;place-items:center;flex:none;width:64px;height:64px;border:var(--clay-bw) solid var(--clay-line);border-radius:22px;background:var(--clay-mint);font-size:1.5rem;font-weight:800;box-shadow:var(--clay-shadow-sm)}
.clay-app__title{margin:0;font-size:1.6rem;font-weight:800;line-height:1.2}
.clay-app__sub{margin:0;color:var(--clay-muted)}
.clay-app__theme{min-width:250px}
.clay-app__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.clay-app__label{margin:0;font-size:.9rem;font-weight:800;color:var(--clay-muted)}
.clay-app__h2{margin:0 0 14px;font-size:1.2rem;font-weight:800}
/* Streak week: seven pebbles, done days are filled and ticked */
.clay-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:1rem 0 0;padding:0;list-style:none;text-align:center}
.clay-week__day{display:grid;justify-items:center;gap:4px;font-size:.74rem;font-weight:800}
.clay-week__dot{display:grid;place-items:center;width:30px;height:30px;border:var(--clay-bw) solid var(--clay-edge);border-radius:50%;background:var(--clay-surface);color:transparent;box-shadow:var(--clay-well)}
.clay-week__dot .clay-ico{width:16px;height:16px}
.clay-week__dot--done{border-color:var(--clay-accent);background:var(--clay-accent);color:var(--clay-on-accent);box-shadow:var(--clay-shadow-sm)}
/* Lessons */
.clay-lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px}
.clay-lcard{display:grid;gap:.8rem;padding:1.3rem}
.clay-lcard__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.clay-lcard__title{margin:0;font-size:1.1rem;font-weight:800;line-height:1.3}
.clay-lcard__meta{margin:0;font-size:.86rem;font-weight:600;color:var(--clay-muted)}
/* Habit tracker: a table of checkboxes, today's column on a tint */
.clay-habits__scroll{overflow-x:auto;margin:0 -.4rem;padding:.4rem}
.clay-habits{width:100%;min-width:520px;border-collapse:separate;border-spacing:0 8px}
.clay-habits__th{padding:0 .3rem .2rem;font-size:.74rem;font-weight:800;color:var(--clay-muted);text-align:center;text-transform:uppercase}
.clay-habits__th--name{text-align:left}
.clay-habits__th abbr{text-decoration:none;cursor:help}
.clay-habits__th--today{color:var(--clay-accent)}
.clay-habits__name{padding:.3rem .6rem .3rem 0;font-weight:800;text-align:left;white-space:nowrap}
.clay-habits__name .clay-ico{vertical-align:-5px;margin-right:.45rem}
.clay-habits__cell{padding:.3rem;text-align:center}
.clay-habits__cell .clay-check{justify-content:center}
.clay-habits__cell--today{background:var(--clay-tint)}
.clay-habits__cell--today:last-child{border-radius:0 16px 16px 0}
/* Sticker shelf */
.clay-stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.clay-sticker{display:grid;justify-items:center;gap:.45rem;font-size:.84rem;font-weight:800;text-align:center}
.clay-sticker__blob{display:grid;place-items:center;width:64px;height:64px;border:var(--clay-bw) solid var(--clay-line);border-radius:50%;background:var(--clay-fill,var(--clay-surface));box-shadow:var(--clay-shadow-sm)}
.clay-sticker__blob .clay-ico{width:30px;height:30px}
.clay-sticker__blob--locked{border:2px dashed var(--clay-edge);background:var(--clay-bg);color:var(--clay-muted);box-shadow:var(--clay-well)}
.clay-sticker__state{font-weight:600;color:var(--clay-muted)}
@media (max-width:600px){.clay-app{padding:18px}}
@media (prefers-reduced-motion:reduce){.clay-app{transition:none}}
/* Habit checkboxes: Bootstrap .form-check-input as puffy boxes that squash flat and fill with accent */
.form-check-input.clay-hcheck{--bs-form-check-bg:var(--clay-surface);width:28px;height:28px;margin:0;border:var(--clay-bw) solid var(--clay-edge);border-radius:10px;
  background-size:18px;box-shadow:var(--clay-shadow-sm);vertical-align:middle;cursor:pointer;transition:transform .18s,box-shadow .18s,background-color .18s}
.form-check-input.clay-hcheck:focus{border-color:var(--clay-edge);box-shadow:var(--clay-shadow-sm)}
.form-check-input.clay-hcheck:checked{transform:translateY(2px);border-color:var(--clay-accent);background-color:var(--clay-accent);box-shadow:var(--clay-press)}
.form-check-input.clay-hcheck:focus-visible{outline:3px solid var(--clay-accent);outline-offset:3px}
.clay-app .card-body.clay-lcard{padding:1.3rem}
@media (prefers-reduced-motion:reduce){.form-check-input.clay-hcheck{transition:none}}

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-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M8 5.5v13l10.5-6.5z"/></symbol>
  <symbol id="clay-i-starFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" 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-abc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l3-9 3 9M4 14.2h4M11.5 8v9h2.8a2.3 2.3 0 0 0 0-4.6h-2.8M11.5 12.4h2.3a2.2 2.2 0 0 0 0-4.4h-2.3M21 9.2A3.8 3.8 0 1 0 21 16"/></symbol>
  <symbol id="clay-i-calc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01"/></symbol>
  <symbol id="clay-i-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5a8.5 8.5 0 0 0 0 17c1.4 0 2-1 1.5-2.2-.6-1.4.3-2.8 1.8-2.8H17a3.5 3.5 0 0 0 3.5-3.5c0-4.7-3.8-8.5-8.5-8.5z"/><circle cx="8" cy="11" r="1.2" fill="currentColor"/><circle cx="11" cy="7.5" r="1.2" fill="currentColor"/><circle cx="15.5" cy="8.5" r="1.2" fill="currentColor"/></symbol>
  <symbol id="clay-i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="10" rx="3"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></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-tooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 4C5 4 3.5 6 4 9c.5 3 1.5 4 2 7.5.3 2.2 1 4 2 4s1.5-1.5 2-4 1-3 2-3 1.5.5 2 3 1 4 2 4 1.7-1.8 2-4c.5-3.5 1.5-4.5 2-7.5.5-3-1-5-3.5-5-2 0-2.5 1-4.5 1S9.5 4 7.5 4z"/></symbol>
  <symbol id="clay-i-plant" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-8M12 12c0-4 3-6.5 7-6.5 0 4-3 6.5-7 6.5zM12 14c0-3-2.5-5-6-5 0 3 2.5 5 6 5z"/><path d="M7.5 20h9"/></symbol>
  <symbol id="clay-i-toy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="16" height="11" rx="3"/><path d="M9 9V6.5a3 3 0 0 1 6 0V9M12 13v3"/></symbol>
  <symbol id="clay-i-bed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18V7M3 14h18v4M21 14v-2.5a3 3 0 0 0-3-3h-7v5.5"/><circle cx="7" cy="11" r="2"/></symbol>
</svg>
<div class="grid grid-cols-[minmax(0,1fr)] gap-7 rounded-[calc(var(--clay-radius)*1.3)] border-(length:--clay-bw) border-clay-line p-7 shadow-clay transition-colors duration-300 motion-reduce:transition-none max-[600px]:p-[18px]" data-clay="light">
<header class="flex flex-wrap items-center gap-x-6 gap-y-4">
<div class="mr-auto flex items-center gap-3.5"><span class="grid size-16 flex-none place-items-center rounded-[22px] border-(length:--clay-bw) border-clay-line bg-clay-mint text-2xl font-extrabold shadow-clay-sm" aria-hidden="true">L</span><div><h1 class="m-0 text-[1.6rem] leading-[1.2] font-extrabold">Hi Leo, ready for day 13?</h1><p class="m-0 text-clay-muted">Monday 19 October · 2 lessons and 5 habits today</p></div></div>
<label class="group/sw relative flex cursor-pointer items-center gap-4 min-w-[250px]"><input class="sr-only clay-theme-input" type="checkbox" role="switch"><span class="min-w-0 flex-1 leading-[1.3] font-extrabold">Night mode<span class="mt-[.15rem] block text-[.86rem] font-medium text-clay-muted">Dark clay for bedtime</span></span><span class="min-w-[2.2em] text-right text-xs font-extrabold tracking-[.08em] text-clay-muted uppercase after:content-['Off'] group-has-checked/sw:text-clay-accent group-has-checked/sw:after:content-['On']" aria-hidden="true"></span><span class="relative h-9 w-16 flex-none rounded-full border-(length:--clay-bw) border-clay-edge bg-clay-bg shadow-clay-well transition-colors duration-200 motion-reduce:transition-none before:absolute before:top-1/2 before:left-[3px] before:-mt-[13.5px] before:size-[27px] before:rounded-full before:border-(length:--clay-bw) before:border-clay-edge before:bg-clay-surface before:shadow-clay-sm before:transition-transform before:duration-200 before:content-[''] motion-reduce:before:transition-none group-has-checked/sw:border-clay-accent group-has-checked/sw:bg-clay-accent group-has-checked/sw:before:translate-x-7 group-has-checked/sw:before:border-clay-on-accent group-has-focus-visible/sw:outline-3 group-has-focus-visible/sw:outline-offset-4 group-has-focus-visible/sw:outline-clay-accent" aria-hidden="true"></span></label>
</header>
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),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)]"><div class="flex items-center justify-between gap-2"><h2 class="m-0 text-[.9rem] font-extrabold text-clay-muted">Learning streak</h2><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></div><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">12 <span class="text-base font-bold">days</span></p><ul class="mt-4 mb-0 grid list-none grid-cols-7 gap-1.5 p-0 text-center" aria-label="Last seven days"><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Tu<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>We<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Th<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Fr<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Sa<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) [&_svg]:size-4 border-clay-accent bg-clay-accent text-clay-on-accent shadow-clay-sm"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Su<span class="sr-only">, done</span></li><li class="grid justify-items-center gap-1 text-[.74rem] font-extrabold"><span class="grid size-[30px] place-items-center rounded-full border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-well [&_svg]:size-4"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span>Mo<span class="sr-only">, not yet</span></li></ul></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)]"><div class="flex items-center justify-between gap-2"><h2 class="m-0 text-[.9rem] font-extrabold text-clay-muted">Stars this week</h2><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-starFill"/></svg></span></div><p class="m-0 text-[2.2rem] leading-[1.1] font-extrabold tracking-[-.01em]">340</p><div class="grid min-w-[140px] flex-1 gap-[.35rem] text-[.84rem] font-bold text-clay-muted"><span>7 of 10 stickers to the Rocket</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="Stickers until the Rocket sticker" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10" aria-valuetext="7 of 10 stickers to the Rocket"><span class="block h-full w-(--clay-pct) rounded-full bg-clay-accent" style="--clay-pct:70%"></span></span></div></article>
</div>
<section><h2 class="mt-0 mb-3.5 text-[1.2rem] font-extrabold">Today's lessons</h2><div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,230px),1fr))] gap-6">
<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 grid gap-[.8rem] p-[1.3rem] [--clay-fill:var(--clay-sky)]"><div class="flex items-center justify-between gap-2"><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-abc"/></svg></span><button class="m-0 inline-grid size-[58px] cursor-pointer place-items-center rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] p-0 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" aria-label="Play Letter sounds"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="m-0 text-[1.1rem] leading-[1.3] font-extrabold">Letter sounds: sh and ch</h3><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Reading · 6 min · step 2 of 4</p></div><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="Letter sounds: sh and ch progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-(--clay-pct) rounded-full bg-clay-accent" style="--clay-pct:50%"></span></span></article>
<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 grid gap-[.8rem] p-[1.3rem] [--clay-fill:var(--clay-mint)]"><div class="flex items-center justify-between gap-2"><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-calc"/></svg></span><button class="m-0 inline-grid size-[58px] cursor-pointer place-items-center rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] p-0 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" aria-label="Play Counting in fives"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="m-0 text-[1.1rem] leading-[1.3] font-extrabold">Counting in fives</h3><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Maths · 8 min · new</p></div><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="Counting in fives progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-(--clay-pct) rounded-full bg-clay-accent" style="--clay-pct:0%"></span></span></article>
<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 grid gap-[.8rem] p-[1.3rem] [--clay-fill:var(--clay-lilac)]"><div class="flex items-center justify-between gap-2"><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-palette"/></svg></span><button class="m-0 inline-grid size-[58px] cursor-pointer place-items-center rounded-full border-(length:--clay-bw) bg-[var(--clay-fill,var(--clay-surface))] p-0 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" aria-label="Replay Paint a rainy day"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-play"/></svg></button></div><div><h3 class="m-0 text-[1.1rem] leading-[1.3] font-extrabold">Paint a rainy day</h3><p class="m-0 text-[.86rem] font-semibold text-clay-muted">Art · 10 min · finished</p></div><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="Paint a rainy day progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-(--clay-pct) rounded-full bg-clay-accent" style="--clay-pct:100%"></span></span></article>
</div></section>
<section 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"><h2 class="mt-0 mb-3.5 text-[1.2rem] font-extrabold">Habit tracker</h2>
<div class="-mx-[.4rem] overflow-x-auto p-[.4rem]"><table class="w-full min-w-[520px] border-separate border-spacing-x-0 border-spacing-y-2"><caption class="sr-only">Habits for the last seven days</caption><thead><tr><th class="px-[.3rem] pt-0 pb-[.2rem] text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline text-left" scope="col">Habit</th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Tuesday 13">Tue</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Wednesday 14">Wed</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Thursday 15">Thu</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Friday 16">Fri</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Saturday 17">Sat</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold text-clay-muted uppercase [&_abbr]:no-underline" scope="col"><abbr title="Sunday 18">Sun</abbr></th><th class="px-[.3rem] pt-0 pb-[.2rem] text-center text-[.74rem] font-extrabold uppercase [&_abbr]:no-underline text-clay-accent" scope="col"><abbr title="Monday 19">Mon</abbr></th></tr></thead><tbody>
<tr><th class="py-[.3rem] pr-[.6rem] pl-0 text-left font-extrabold whitespace-nowrap [&_svg]:mr-[.45rem] [&_svg]:inline [&_svg]:align-[-5px]" scope="row"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg>Brush teeth twice</th><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Tuesday 13" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Wednesday 14" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Thursday 15" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Friday 16" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Saturday 17" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Sunday 18" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center bg-clay-tint last:rounded-r-2xl"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Brush teeth twice, Monday 19, today" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="py-[.3rem] pr-[.6rem] pl-0 text-left font-extrabold whitespace-nowrap [&_svg]:mr-[.45rem] [&_svg]:inline [&_svg]:align-[-5px]" scope="row"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg>Read for 15 minutes</th><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Tuesday 13" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Wednesday 14" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Thursday 15"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Friday 16" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Saturday 17" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Sunday 18" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center bg-clay-tint last:rounded-r-2xl"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Read for 15 minutes, Monday 19, today"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="py-[.3rem] pr-[.6rem] pl-0 text-left font-extrabold whitespace-nowrap [&_svg]:mr-[.45rem] [&_svg]:inline [&_svg]:align-[-5px]" scope="row"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg>Water the plants</th><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Tuesday 13" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Wednesday 14"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Thursday 15" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Friday 16"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Saturday 17" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Sunday 18"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center bg-clay-tint last:rounded-r-2xl"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Water the plants, Monday 19, today"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="py-[.3rem] pr-[.6rem] pl-0 text-left font-extrabold whitespace-nowrap [&_svg]:mr-[.45rem] [&_svg]:inline [&_svg]:align-[-5px]" scope="row"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-toy"/></svg>Tidy the toys away</th><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Tuesday 13"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Wednesday 14" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Thursday 15" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Friday 16" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Saturday 17"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Sunday 18" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center bg-clay-tint last:rounded-r-2xl"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Tidy the toys away, Monday 19, today"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
<tr><th class="py-[.3rem] pr-[.6rem] pl-0 text-left font-extrabold whitespace-nowrap [&_svg]:mr-[.45rem] [&_svg]:inline [&_svg]:align-[-5px]" scope="row"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-bed"/></svg>Lights out by 8</th><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Tuesday 13" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Wednesday 14" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Thursday 15" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Friday 16" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Saturday 17" checked><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Sunday 18"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td><td class="p-[.3rem] text-center [&>label]:justify-center bg-clay-tint last:rounded-r-2xl"><label class="group/ck relative flex cursor-pointer items-center gap-[.8rem] font-bold"><input class="sr-only" type="checkbox" aria-label="Lights out by 8, Monday 19, today"><span class="grid size-7 flex-none place-items-center rounded-[10px] border-(length:--clay-bw) border-clay-edge bg-clay-surface text-transparent shadow-clay-sm transition-[translate,box-shadow,background-color] duration-[180ms] motion-reduce:transition-none [&_svg]:size-[18px] group-has-checked/ck:translate-y-0.5 group-has-checked/ck:border-clay-accent group-has-checked/ck:bg-clay-accent group-has-checked/ck:text-clay-on-accent group-has-checked/ck:shadow-clay-press group-has-focus-visible/ck:outline-3 group-has-focus-visible/ck:outline-offset-3 group-has-focus-visible/ck:outline-clay-accent"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-check"/></svg></span></label></td></tr>
</tbody></table></div>
</section>
<section 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"><h2 class="mt-0 mb-3.5 text-[1.2rem] font-extrabold">Sticker shelf</h2><ul class="m-0 grid list-none grid-cols-[repeat(auto-fit,minmax(96px,1fr))] gap-4 p-0">
<li class="grid justify-items-center gap-[.45rem] text-center text-[.84rem] font-extrabold"><span class="grid size-16 place-items-center rounded-full border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-[30px] [--clay-fill:var(--clay-sky)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-book"/></svg></span>Bookworm<span class="font-semibold text-clay-muted">Earned</span></li>
<li class="grid justify-items-center gap-[.45rem] text-center text-[.84rem] font-extrabold"><span class="grid size-16 place-items-center rounded-full border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-[30px] [--clay-fill:var(--clay-mint)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-plant"/></svg></span>Green thumb<span class="font-semibold text-clay-muted">Earned</span></li>
<li class="grid justify-items-center gap-[.45rem] text-center text-[.84rem] font-extrabold"><span class="grid size-16 place-items-center rounded-full border-(length:--clay-bw) border-clay-line bg-[var(--clay-fill,var(--clay-surface))] shadow-clay-sm [&_svg]:size-[30px] [--clay-fill:var(--clay-peach)]"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-tooth"/></svg></span>Sparkle smile<span class="font-semibold text-clay-muted">Earned</span></li>
<li class="grid justify-items-center gap-[.45rem] text-center text-[.84rem] font-extrabold"><span class="grid size-16 place-items-center rounded-full bg-[var(--clay-fill,var(--clay-surface))] [&_svg]:size-[30px] border-2 border-dashed border-clay-edge bg-clay-bg! text-clay-muted shadow-clay-well"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#clay-i-lock"/></svg></span>Rocket<span class="font-semibold text-clay-muted">3 more stickers</span></li>
</ul></section>
</div>

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

A complete screen for a children’s learning app, built only from the kit. A greeting header with an initials avatar sits beside a Night mode switch. Below it a peach streak card counts 12 days and shows the last seven days as ticked pebbles, and a lemon stars card shows 340 stars with a progress bar towards the next sticker. Three lesson cards in sky, mint and lilac list a reading, a maths and an art lesson with their length, a progress bar and a round play button. The habit tracker is a table of five habits, such as brushing teeth and reading for 15 minutes, across the last seven days, with today’s column on an accent tint and a puffy checkbox in every cell. A sticker shelf shows three earned stickers and a locked one. The Night mode switch is a checkbox with the class clay-theme-input, and the token block’s :has() rule turns the whole app into dark clay with no JavaScript. Under 600 pixels the cards stack and the habit table scrolls sideways inside its card.

What’s included

Learning streak, stars, lessons, habit tracker and sticker shelf in one screen
Night mode switch that re-themes the app with :has() and no JavaScript
Habit table with a labelled checkbox in every cell
Lesson cards with progress bars and labelled play buttons
Responsive layout; the habit table scrolls inside its card on phones

Accessibility

Every habit checkbox has an aria-label that names the habit and the day, and the table has a caption, column headers and row headers. Week pebbles spell out done or not yet in hidden text, progress bars carry labels and values, and the Night mode control is a labelled switch with an On or Off word. Focus is a 3px accent ring and transitions stop under prefers-reduced-motion.

Customise it

Change the light and dark token blocks to re-colour both themes, and swap the fill classes on each card. The theme switch works in any wrapper with a data-clay attribute that contains a checked .clay-theme-input.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Claymorphism