Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="neu-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="neu-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="neu-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></symbol>
  <symbol id="neu-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></symbol>
  <symbol id="neu-i-wifi" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 9a14 14 0 0 1 19 0"/><path d="M5.5 12.5a9.5 9.5 0 0 1 13 0"/><path d="M8.6 15.9a5 5 0 0 1 6.8 0"/><path d="M12 19.5h.01"/></symbol>
  <symbol id="neu-i-bluetooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10-5 4V3l5 4L7 17"/></symbol>
  <symbol id="neu-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="neu-i-leaf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20c0-9 5.5-14 15-15-.5 9.5-6 15-15 15z"/><path d="M5 20c3.5-4.5 6.5-7 10-8.5"/></symbol>
  <symbol id="neu-i-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 4h3.3l1.7 4.4-2.2 1.4a10.5 10.5 0 0 0 5.9 5.9l1.4-2.2 4.4 1.7v3.3a1.5 1.5 0 0 1-1.6 1.5A15.5 15.5 0 0 1 4 5.6 1.5 1.5 0 0 1 5.5 4z"/></symbol>
  <symbol id="neu-i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z"/></symbol>
  <symbol id="neu-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></symbol>
  <symbol id="neu-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol>
  <symbol id="neu-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="neu-i-heartFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
</svg>
<section><span class="lbl">Raised buttons · pressed in while held</span><div class="neu-cluster">
<button class="neu-btn neu-btn--accent" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-check"/></svg>Save scene</button>
<button class="neu-btn" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg>Add device</button>
<button class="neu-btn" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-calendar"/></svg>Schedule</button>
<button class="neu-btn" type="button">Cancel</button>
<button class="neu-btn neu-btn--sm" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-edit"/></svg>Edit</button>
<button class="neu-btn neu-btn--accent neu-btn--sm" type="button">Apply</button>
</div></section>
<section><span class="lbl">Toggle buttons · on means pressed in, accent and the word On</span><div class="neu-tiles">
<label class="neu-toggle"><input class="neu-sr" type="checkbox" checked><span class="neu-toggle__face"><span class="neu-toggle__icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-wifi"/></svg></span><span class="neu-toggle__name">Wi-Fi</span><span class="neu-toggle__state" aria-hidden="true"></span></span></label>
<label class="neu-toggle"><input class="neu-sr" type="checkbox"><span class="neu-toggle__face"><span class="neu-toggle__icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-bluetooth"/></svg></span><span class="neu-toggle__name">Bluetooth</span><span class="neu-toggle__state" aria-hidden="true"></span></span></label>
<label class="neu-toggle"><input class="neu-sr" type="checkbox" checked><span class="neu-toggle__face"><span class="neu-toggle__icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-moon"/></svg></span><span class="neu-toggle__name">Do not disturb</span><span class="neu-toggle__state" aria-hidden="true"></span></span></label>
<label class="neu-toggle"><input class="neu-sr" type="checkbox"><span class="neu-toggle__face"><span class="neu-toggle__icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-leaf"/></svg></span><span class="neu-toggle__name">Eco mode</span><span class="neu-toggle__state" aria-hidden="true"></span></span></label>
</div></section>
<div class="cols">
<div><section><span class="lbl">Switches</span><div class="neu-card"><div class="neu-stack">
<label class="neu-switch"><input class="neu-sr" type="checkbox" role="switch" checked><span class="neu-switch__text">Living room lamp<small>Floor lamp, 2 bulbs</small></span><span class="neu-switch__state" aria-hidden="true"></span><span class="neu-switch__track" aria-hidden="true"></span></label>
<label class="neu-switch"><input class="neu-sr" type="checkbox" role="switch"><span class="neu-switch__text">Porch light<small>Turns off at sunrise</small></span><span class="neu-switch__state" aria-hidden="true"></span><span class="neu-switch__track" aria-hidden="true"></span></label>
<label class="neu-switch"><input class="neu-sr" type="checkbox" role="switch" checked><span class="neu-switch__text">Motion alerts<small>Front door camera</small></span><span class="neu-switch__state" aria-hidden="true"></span><span class="neu-switch__track" aria-hidden="true"></span></label>
</div></div></section></div>
<div><section><span class="lbl">Icon buttons and an icon toggle</span><div class="neu-cluster">
<button class="neu-btn neu-btn--icon" type="button" aria-label="Call the front door"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-phone"/></svg></button>
<button class="neu-btn neu-btn--icon" type="button" aria-label="Message household"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-message"/></svg></button>
<button class="neu-btn neu-btn--icon" type="button" aria-label="Share scene"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-share"/></svg></button>
<button class="neu-btn neu-btn--icon neu-btn--square" type="button" aria-label="More options"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-more"/></svg></button>
<button class="neu-btn neu-btn--accent neu-btn--icon" type="button" aria-label="Add scene"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg></button>
<label class="neu-itoggle"><input class="neu-sr" type="checkbox" aria-label="Favourite scene" checked><span class="neu-itoggle__face"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-heart"/></svg><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-heartFill"/></svg></span></label>
</div></section>
<section class="neu-mt"><span class="lbl">Segmented control</span><fieldset class="neu-seg"><legend class="neu-seg__legend">Fan speed</legend><div class="neu-seg__opts"><label class="neu-seg__opt"><input class="neu-sr" type="radio" name="fan" value="low"><span>Low</span></label><label class="neu-seg__opt"><input class="neu-sr" type="radio" name="fan" value="medium"><span>Medium</span></label><label class="neu-seg__opt"><input class="neu-sr" type="radio" name="fan" value="high"><span>High</span></label><label class="neu-seg__opt"><input class="neu-sr" type="radio" name="fan" value="auto" checked><span>Auto</span></label></div></fieldset></section></div>
</div>
CSS 
/* ── Neumorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is moulded from --neu-bg and lit from the top left. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --neu-bg:#e0e5ec;          /* the one surface colour */
  --neu-light:#ffffff;       /* highlight, top left */
  --neu-dark:#a3b1c6;        /* shade, bottom right */
  --neu-distance:6px;        /* how far a shape rises */
  --neu-blur:14px;           /* how soft its shadow is */
  --neu-radius:18px;         /* cards; buttons use .75 of it, fields .6 */
  --neu-accent:#4f46e5;      /* focus ring and on / selected / current states, 4.9:1 on --neu-bg */
  --neu-on-accent:#ffffff;   /* text and marks on accent fills, 6.3:1 */
  --neu-ink:#1f2937;         /* text, 11.6:1 */
  --neu-muted:#4a5568;       /* secondary text, 5.9:1 */
  --neu-edge:#74819a;        /* control boundary (fields, tracks, boxes, buttons), 3.1:1 */
  --neu-line:rgba(255,255,255,.6); /* decorative edge on cards and panels */
  --neu-bw:1px;              /* control border width */
  --neu-success:#126b35;--neu-warning:#8a5300;--neu-danger:#b42318;
}
/* Dark neumorphism: data-neu="dark" on any wrapper, or a checked .neu-theme-input inside a [data-neu] element.
   :is() is a forgiving list, so browsers without :has() still apply data-neu="dark" */
[data-neu]:is([data-neu="dark"],:has(.neu-theme-input:checked)){
  --neu-bg:#262b33;--neu-light:#323944;--neu-dark:#14171c;
  --neu-accent:#8f88ff;--neu-on-accent:#14161b;--neu-ink:#e7ebf2;--neu-muted:#aab4c3;--neu-edge:#717d90;
  --neu-line:rgba(255,255,255,.06);--neu-success:#6fdc9a;--neu-warning:#f3c164;--neu-danger:#ff8f84;color-scheme:dark}
/* More contrast requested: the soft shadows go, every control and panel gets a solid outline */
@media (prefers-contrast:more){:root,[data-neu]:is([data-neu],:has(.neu-theme-input:checked)){
  --neu-light:transparent;--neu-dark:transparent;--neu-edge:var(--neu-ink);--neu-line:var(--neu-ink);--neu-muted:var(--neu-ink);--neu-bw:2px}}
:root,[data-neu]{
  --neu-raised:var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance)*-1) calc(var(--neu-distance)*-1) var(--neu-blur) var(--neu-light);
  --neu-raised-sm:calc(var(--neu-distance)*.5) calc(var(--neu-distance)*.5) calc(var(--neu-blur)*.5) var(--neu-dark),calc(var(--neu-distance)*-.5) calc(var(--neu-distance)*-.5) calc(var(--neu-blur)*.5) var(--neu-light);
  --neu-inset:inset calc(var(--neu-distance)*.6) calc(var(--neu-distance)*.6) calc(var(--neu-blur)*.6) var(--neu-dark),inset calc(var(--neu-distance)*-.6) calc(var(--neu-distance)*-.6) calc(var(--neu-blur)*.6) var(--neu-light);
  --neu-inset-sm:inset calc(var(--neu-distance)*.35) calc(var(--neu-distance)*.35) calc(var(--neu-blur)*.35) var(--neu-dark),inset calc(var(--neu-distance)*-.35) calc(var(--neu-distance)*-.35) calc(var(--neu-blur)*.35) var(--neu-light);
}
[data-neu]{background:var(--neu-bg);color:var(--neu-ink)}
/* Components */
:where([class*="neu-"]),:where([class*="neu-"])::before,:where([class*="neu-"])::after{box-sizing:border-box}
.neu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.neu-ico{width:20px;height:20px;flex:none}
/* Buttons: raised by default, pressed (inset) while held, accent ring on keyboard focus */
.neu-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.65rem 1.35rem;
  border:var(--neu-bw) solid var(--neu-edge);border-radius:calc(var(--neu-radius)*.75);background:var(--neu-bg);color:var(--neu-ink);
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:var(--neu-raised-sm);transition:box-shadow .2s,color .2s,background-color .2s}
.neu-btn:hover{box-shadow:var(--neu-raised)}
.neu-btn:active{box-shadow:var(--neu-inset-sm)}
.neu-btn:focus-visible{outline:3px solid var(--neu-accent);outline-offset:3px}
.neu-btn--accent{background:var(--neu-accent);border-color:var(--neu-accent);color:var(--neu-on-accent)}
.neu-btn--sm{min-height:38px;padding:.45rem 1rem;font-size:.85rem}
.neu-btn--block{width:100%}
.neu-btn--icon{width:50px;height:50px;min-height:0;padding:0;border-radius:50%}
.neu-btn--square{border-radius:calc(var(--neu-radius)*.75)}
.neu-btn--icon-sm{width:42px;height:42px}
.neu-btn--icon-lg{width:64px;height:64px}
.neu-btn--icon .neu-ico{width:22px;height:22px}
/* Icon toggle: a checkbox behind a round face. Pressed = inset, accent edge, and the outline icon becomes a filled one */
.neu-itoggle{position:relative;display:inline-flex}
.neu-itoggle__face{display:grid;place-items:center;width:50px;height:50px;border:var(--neu-bw) solid var(--neu-edge);border-radius:50%;
  background:var(--neu-bg);color:var(--neu-ink);box-shadow:var(--neu-raised-sm);cursor:pointer;transition:box-shadow .2s,color .2s,border-color .2s}
.neu-itoggle__face .neu-ico{width:22px;height:22px}
.neu-itoggle__face .neu-ico+.neu-ico,.neu-itoggle input:checked+.neu-itoggle__face .neu-ico:first-child{display:none}
.neu-itoggle input:checked+.neu-itoggle__face{border-color:var(--neu-accent);color:var(--neu-accent);box-shadow:var(--neu-inset-sm)}
.neu-itoggle input:checked+.neu-itoggle__face .neu-ico+.neu-ico{display:block}
.neu-itoggle input:focus-visible+.neu-itoggle__face{outline:3px solid var(--neu-accent);outline-offset:3px}
/* Toggle tiles: a visually hidden checkbox and a face. On = pressed in (inset), accent border,
   accent icon, a filled dot and the word On — never colour alone. */
.neu-toggle{position:relative;display:inline-flex;cursor:pointer}
.neu-toggle__face{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;width:100%;min-width:132px;padding:1rem 1.1rem;
  border:var(--neu-bw) solid var(--neu-edge);border-radius:var(--neu-radius);background:var(--neu-bg);color:var(--neu-ink);
  box-shadow:var(--neu-raised-sm);transition:box-shadow .25s,border-color .25s}
.neu-toggle__icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.35rem;border-radius:50%;color:var(--neu-muted);box-shadow:var(--neu-inset-sm);transition:color .25s,background-color .25s}
.neu-toggle__icon .neu-ico{width:22px;height:22px}
.neu-toggle__name{font-weight:600;line-height:1.25}
.neu-toggle__state{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--neu-muted)}
.neu-toggle__state::before{content:"";width:9px;height:9px;border:2px solid currentColor;border-radius:50%}
.neu-toggle__state::after{content:"Off"}
.neu-toggle input:checked+.neu-toggle__face{box-shadow:var(--neu-inset);border-color:var(--neu-accent)}
.neu-toggle input:checked+.neu-toggle__face .neu-toggle__icon{color:var(--neu-on-accent);background:var(--neu-accent)}
.neu-toggle input:checked+.neu-toggle__face .neu-toggle__state{color:var(--neu-accent)}
.neu-toggle input:checked+.neu-toggle__face .neu-toggle__state::before{background:currentColor}
.neu-toggle input:checked+.neu-toggle__face .neu-toggle__state::after{content:"On"}
.neu-toggle input:focus-visible+.neu-toggle__face{outline:3px solid var(--neu-accent);outline-offset:3px}
/* Switches: a checkbox with role="switch". On = knob travels right, track fills with accent and the word On appears */
.neu-switch{position:relative;display:flex;align-items:center;gap:.9rem;cursor:pointer}
.neu-switch__text{flex:1;min-width:0;font-weight:600;line-height:1.3}
.neu-switch__text small{display:block;margin-top:.15rem;font-size:.82rem;font-weight:400;color:var(--neu-muted)}
.neu-switch__state{min-width:2.1em;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--neu-muted)}
.neu-switch__state::after{content:"Off"}
.neu-switch__track{position:relative;flex:none;width:58px;height:32px;border:var(--neu-bw) solid var(--neu-edge);border-radius:999px;
  background:var(--neu-bg);box-shadow:var(--neu-inset-sm);transition:background-color .25s,border-color .25s}
.neu-switch__track::before{content:"";position:absolute;top:50%;left:3px;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  border:var(--neu-bw) solid var(--neu-edge);background:var(--neu-bg);box-shadow:var(--neu-raised-sm);transition:transform .25s,background-color .25s}
.neu-switch input:checked~.neu-switch__track{background:var(--neu-accent);border-color:var(--neu-accent)}
.neu-switch input:checked~.neu-switch__track::before{transform:translateX(calc(28px - 2*var(--neu-bw)));background:var(--neu-on-accent);border-color:var(--neu-on-accent)}
.neu-switch input:checked~.neu-switch__state{color:var(--neu-accent)}
.neu-switch input:checked~.neu-switch__state::after{content:"On"}
.neu-switch input:focus-visible~.neu-switch__track{outline:3px solid var(--neu-accent);outline-offset:3px}
/* Segmented control: radios in a fieldset. The chosen option rises out of the well, turns accent and gains a dot */
.neu-seg{min-width:0;margin:0;padding:0;border:0}
.neu-seg__legend{margin-bottom:.6rem;padding:0;font-size:.88rem;font-weight:600}
.neu-seg__opts{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:var(--neu-bw) solid var(--neu-edge);border-radius:calc(var(--neu-radius)*.75);box-shadow:var(--neu-inset-sm)}
.neu-seg__opt{position:relative;flex:1 1 auto}
.neu-seg__opt span{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.4rem .9rem;border:var(--neu-bw) solid transparent;
  border-radius:calc(var(--neu-radius)*.5);color:var(--neu-muted);font-size:.9rem;font-weight:600;cursor:pointer;transition:box-shadow .2s,color .2s}
.neu-seg__opt input:checked+span{border-color:var(--neu-accent);color:var(--neu-accent);box-shadow:var(--neu-raised-sm)}
.neu-seg__opt input:checked+span::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.neu-seg__opt input:focus-visible+span{outline:3px solid var(--neu-accent);outline-offset:2px}
/* Card: a raised panel with a faint highlight edge (a solid outline under prefers-contrast: more) */
.neu-card{padding:1.5rem;border:var(--neu-bw) solid var(--neu-line);border-radius:var(--neu-radius);background:var(--neu-bg);color:var(--neu-ink);box-shadow:var(--neu-raised)}
.neu-card h2,.neu-card h3,.neu-card p{margin:0}
/* Layout helpers */
.neu-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.neu-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.neu-stack{display:grid;gap:1.35rem}
@media (prefers-reduced-motion:reduce){.neu-btn,.neu-itoggle__face,.neu-toggle__face,.neu-toggle__icon,.neu-switch__track,.neu-switch__track::before,.neu-seg__opt span{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="neu-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="neu-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="neu-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></symbol>
  <symbol id="neu-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></symbol>
  <symbol id="neu-i-wifi" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 9a14 14 0 0 1 19 0"/><path d="M5.5 12.5a9.5 9.5 0 0 1 13 0"/><path d="M8.6 15.9a5 5 0 0 1 6.8 0"/><path d="M12 19.5h.01"/></symbol>
  <symbol id="neu-i-bluetooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10-5 4V3l5 4L7 17"/></symbol>
  <symbol id="neu-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="neu-i-leaf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20c0-9 5.5-14 15-15-.5 9.5-6 15-15 15z"/><path d="M5 20c3.5-4.5 6.5-7 10-8.5"/></symbol>
  <symbol id="neu-i-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 4h3.3l1.7 4.4-2.2 1.4a10.5 10.5 0 0 0 5.9 5.9l1.4-2.2 4.4 1.7v3.3a1.5 1.5 0 0 1-1.6 1.5A15.5 15.5 0 0 1 4 5.6 1.5 1.5 0 0 1 5.5 4z"/></symbol>
  <symbol id="neu-i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z"/></symbol>
  <symbol id="neu-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></symbol>
  <symbol id="neu-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol>
  <symbol id="neu-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="neu-i-heartFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
</svg>
<section><span class="lbl">Raised buttons · pressed in while held</span><div class="d-flex flex-wrap align-items-center gap-3">
<button class="btn btn-neu btn-neu-accent" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-check"/></svg>Save scene</button>
<button class="btn btn-neu" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg>Add device</button>
<button class="btn btn-neu" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-calendar"/></svg>Schedule</button>
<button class="btn btn-neu" type="button">Cancel</button>
<button class="btn btn-neu btn-sm" type="button"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-edit"/></svg>Edit</button>
<button class="btn btn-neu btn-neu-accent btn-sm" type="button">Apply</button>
</div></section>
<section><span class="lbl">Toggle buttons · on means pressed in, accent and the word On</span><div class="row row-cols-2 row-cols-md-4 g-4">
<div class="col"><input class="btn-check" type="checkbox" id="qs-wifi" checked autocomplete="off"><label class="btn btn-neu btn-neu-tile" for="qs-wifi"><span class="neu-tile-icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-wifi"/></svg></span><span class="neu-tile-name">Wi-Fi</span><span class="neu-tile-state" aria-hidden="true"></span></label></div>
<div class="col"><input class="btn-check" type="checkbox" id="qs-bt" autocomplete="off"><label class="btn btn-neu btn-neu-tile" for="qs-bt"><span class="neu-tile-icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-bluetooth"/></svg></span><span class="neu-tile-name">Bluetooth</span><span class="neu-tile-state" aria-hidden="true"></span></label></div>
<div class="col"><input class="btn-check" type="checkbox" id="qs-dnd" checked autocomplete="off"><label class="btn btn-neu btn-neu-tile" for="qs-dnd"><span class="neu-tile-icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-moon"/></svg></span><span class="neu-tile-name">Do not disturb</span><span class="neu-tile-state" aria-hidden="true"></span></label></div>
<div class="col"><input class="btn-check" type="checkbox" id="qs-eco" autocomplete="off"><label class="btn btn-neu btn-neu-tile" for="qs-eco"><span class="neu-tile-icon"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-leaf"/></svg></span><span class="neu-tile-name">Eco mode</span><span class="neu-tile-state" aria-hidden="true"></span></label></div>
</div></section>
<div class="cols">
<div><section><span class="lbl">Switches</span><div class="card neu-card card-body"><div class="neu-stack">
<div class="form-check form-switch neu-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-lamp" checked><label class="form-check-label" for="sw-lamp">Living room lamp<small>Floor lamp, 2 bulbs</small></label><span class="neu-switch-state" aria-hidden="true"></span></div>
<div class="form-check form-switch neu-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-porch"><label class="form-check-label" for="sw-porch">Porch light<small>Turns off at sunrise</small></label><span class="neu-switch-state" aria-hidden="true"></span></div>
<div class="form-check form-switch neu-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-motion" checked><label class="form-check-label" for="sw-motion">Motion alerts<small>Front door camera</small></label><span class="neu-switch-state" aria-hidden="true"></span></div>
</div></div></section></div>
<div><section><span class="lbl">Icon buttons and an icon toggle</span><div class="d-flex flex-wrap align-items-center gap-3">
<button class="btn btn-neu btn-neu-icon" type="button" aria-label="Call the front door"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-phone"/></svg></button>
<button class="btn btn-neu btn-neu-icon" type="button" aria-label="Message household"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-message"/></svg></button>
<button class="btn btn-neu btn-neu-icon" type="button" aria-label="Share scene"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-share"/></svg></button>
<button class="btn btn-neu btn-neu-icon btn-neu-square" type="button" aria-label="More options"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-more"/></svg></button>
<button class="btn btn-neu btn-neu-accent btn-neu-icon" type="button" aria-label="Add scene"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg></button>
<input class="btn-check" type="checkbox" id="fav-scene" aria-label="Favourite scene" checked autocomplete="off"><label class="btn btn-neu btn-neu-icon" for="fav-scene"><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-heart"/></svg><svg class="neu-ico" aria-hidden="true" focusable="false"><use href="#neu-i-heartFill"/></svg></label>
</div></section>
<section class="mt-5"><span class="lbl">Segmented control</span><fieldset class="neu-seg"><legend class="">Fan speed</legend><div class="btn-group"><input class="btn-check" type="radio" name="fan" id="fan-low" value="low" autocomplete="off"><label class="btn" for="fan-low">Low</label><input class="btn-check" type="radio" name="fan" id="fan-medium" value="medium" autocomplete="off"><label class="btn" for="fan-medium">Medium</label><input class="btn-check" type="radio" name="fan" id="fan-high" value="high" autocomplete="off"><label class="btn" for="fan-high">High</label><input class="btn-check" type="radio" name="fan" id="fan-auto" value="auto" checked autocomplete="off"><label class="btn" for="fan-auto">Auto</label></div></fieldset></section></div>
</div>
CSS 
/* ── Neumorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is moulded from --neu-bg and lit from the top left. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --neu-bg:#e0e5ec;          /* the one surface colour */
  --neu-light:#ffffff;       /* highlight, top left */
  --neu-dark:#a3b1c6;        /* shade, bottom right */
  --neu-distance:6px;        /* how far a shape rises */
  --neu-blur:14px;           /* how soft its shadow is */
  --neu-radius:18px;         /* cards; buttons use .75 of it, fields .6 */
  --neu-accent:#4f46e5;      /* focus ring and on / selected / current states, 4.9:1 on --neu-bg */
  --neu-on-accent:#ffffff;   /* text and marks on accent fills, 6.3:1 */
  --neu-ink:#1f2937;         /* text, 11.6:1 */
  --neu-muted:#4a5568;       /* secondary text, 5.9:1 */
  --neu-edge:#74819a;        /* control boundary (fields, tracks, boxes, buttons), 3.1:1 */
  --neu-line:rgba(255,255,255,.6); /* decorative edge on cards and panels */
  --neu-bw:1px;              /* control border width */
  --neu-success:#126b35;--neu-warning:#8a5300;--neu-danger:#b42318;
}
/* Dark neumorphism: data-neu="dark" on any wrapper, or a checked .neu-theme-input inside a [data-neu] element.
   :is() is a forgiving list, so browsers without :has() still apply data-neu="dark" */
[data-neu]:is([data-neu="dark"],:has(.neu-theme-input:checked)){
  --neu-bg:#262b33;--neu-light:#323944;--neu-dark:#14171c;
  --neu-accent:#8f88ff;--neu-on-accent:#14161b;--neu-ink:#e7ebf2;--neu-muted:#aab4c3;--neu-edge:#717d90;
  --neu-line:rgba(255,255,255,.06);--neu-success:#6fdc9a;--neu-warning:#f3c164;--neu-danger:#ff8f84;color-scheme:dark}
/* More contrast requested: the soft shadows go, every control and panel gets a solid outline */
@media (prefers-contrast:more){:root,[data-neu]:is([data-neu],:has(.neu-theme-input:checked)){
  --neu-light:transparent;--neu-dark:transparent;--neu-edge:var(--neu-ink);--neu-line:var(--neu-ink);--neu-muted:var(--neu-ink);--neu-bw:2px}}
:root,[data-neu]{
  --neu-raised:var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance)*-1) calc(var(--neu-distance)*-1) var(--neu-blur) var(--neu-light);
  --neu-raised-sm:calc(var(--neu-distance)*.5) calc(var(--neu-distance)*.5) calc(var(--neu-blur)*.5) var(--neu-dark),calc(var(--neu-distance)*-.5) calc(var(--neu-distance)*-.5) calc(var(--neu-blur)*.5) var(--neu-light);
  --neu-inset:inset calc(var(--neu-distance)*.6) calc(var(--neu-distance)*.6) calc(var(--neu-blur)*.6) var(--neu-dark),inset calc(var(--neu-distance)*-.6) calc(var(--neu-distance)*-.6) calc(var(--neu-blur)*.6) var(--neu-light);
  --neu-inset-sm:inset calc(var(--neu-distance)*.35) calc(var(--neu-distance)*.35) calc(var(--neu-blur)*.35) var(--neu-dark),inset calc(var(--neu-distance)*-.35) calc(var(--neu-distance)*-.35) calc(var(--neu-blur)*.35) var(--neu-light);
}
[data-neu]{background:var(--neu-bg);color:var(--neu-ink)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-neu]{--bs-body-bg:var(--neu-bg);--bs-body-color:var(--neu-ink);--bs-emphasis-color:var(--neu-ink);
  --bs-heading-color:var(--neu-ink);--bs-secondary-color:var(--neu-muted);--bs-tertiary-color:var(--neu-muted);
  --bs-border-color:var(--neu-edge);--bs-border-width:var(--neu-bw);--bs-border-radius:calc(var(--neu-radius)*.6);
  --bs-border-radius-lg:var(--neu-radius);--bs-focus-ring-color:var(--neu-accent)}
/* Components */
.neu-ico{width:20px;height:20px;flex:none}
/* Buttons: Bootstrap .btn with a .btn-neu variant set through --bs-btn-* variables */
.btn-neu{--bs-btn-padding-x:1.35rem;--bs-btn-padding-y:.65rem;--bs-btn-font-size:.95rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.2;
  --bs-btn-border-width:var(--neu-bw);--bs-btn-border-radius:calc(var(--neu-radius)*.75);
  --bs-btn-bg:var(--neu-bg);--bs-btn-color:var(--neu-ink);--bs-btn-border-color:var(--neu-edge);
  --bs-btn-hover-bg:var(--neu-bg);--bs-btn-hover-color:var(--neu-ink);--bs-btn-hover-border-color:var(--neu-edge);
  --bs-btn-active-bg:var(--neu-bg);--bs-btn-active-color:var(--neu-ink);--bs-btn-active-border-color:var(--neu-edge);
  --neu-btn-shadow:var(--neu-raised-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;
  box-shadow:var(--neu-btn-shadow);transition:box-shadow .2s,color .2s,background-color .2s}
.btn-neu:hover{--neu-btn-shadow:var(--neu-raised)}
.btn-neu:active{--neu-btn-shadow:var(--neu-inset-sm)}
.btn-neu:focus-visible,.btn-check:focus-visible+.btn-neu{box-shadow:var(--neu-btn-shadow);outline:3px solid var(--neu-accent);outline-offset:3px}
.btn-neu-accent{--bs-btn-bg:var(--neu-accent);--bs-btn-color:var(--neu-on-accent);--bs-btn-border-color:var(--neu-accent);
  --bs-btn-hover-bg:var(--neu-accent);--bs-btn-hover-color:var(--neu-on-accent);--bs-btn-hover-border-color:var(--neu-accent);
  --bs-btn-active-bg:var(--neu-accent);--bs-btn-active-color:var(--neu-on-accent);--bs-btn-active-border-color:var(--neu-accent)}
.btn-neu.btn-sm{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.45rem;--bs-btn-font-size:.85rem;min-height:38px}
.btn-neu-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:50px;height:50px;min-height:0;border-radius:50%}
.btn-neu-icon.btn-neu-square{border-radius:calc(var(--neu-radius)*.75)}
.btn-neu-icon-sm{width:42px;height:42px}
.btn-neu-icon-lg{width:64px;height:64px}
.btn-neu-icon .neu-ico{width:22px;height:22px}
/* Icon toggle: .btn-check + a round .btn. Pressed = inset, accent edge, filled icon */
.btn-check+.btn-neu-icon .neu-ico+.neu-ico,.btn-check:checked+.btn-neu-icon .neu-ico:first-child{display:none}
.btn-check:checked+.btn-neu-icon .neu-ico+.neu-ico{display:block}
.btn-check:checked+.btn-neu-icon{--bs-btn-active-color:var(--neu-accent);--bs-btn-active-border-color:var(--neu-accent);--neu-btn-shadow:var(--neu-inset-sm)}
/* Toggle tiles: Bootstrap .btn-check + .btn. On = pressed in, accent border and icon, a filled dot and the word On */
.btn-neu-tile{--bs-btn-padding-x:1.1rem;--bs-btn-padding-y:1rem;--bs-btn-border-radius:var(--neu-radius);--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-font-size:1rem;
  --bs-btn-active-color:var(--neu-ink);--bs-btn-active-border-color:var(--neu-accent);
  flex-direction:column;align-items:flex-start;gap:.4rem;width:100%;min-width:132px;text-align:start;transition:box-shadow .25s,border-color .25s}
.btn-neu-tile:hover{--neu-btn-shadow:var(--neu-raised-sm)}
.btn-check:checked+.btn-neu-tile{--neu-btn-shadow:var(--neu-inset)}
.btn-neu-tile .neu-tile-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.35rem;border-radius:50%;color:var(--neu-muted);box-shadow:var(--neu-inset-sm);transition:color .25s,background-color .25s}
.btn-neu-tile .neu-tile-icon .neu-ico{width:22px;height:22px}
.btn-neu-tile .neu-tile-name{font-weight:600;line-height:1.25}
.btn-neu-tile .neu-tile-state{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--neu-muted)}
.btn-neu-tile .neu-tile-state::before{content:"";width:9px;height:9px;border:2px solid currentColor;border-radius:50%}
.btn-neu-tile .neu-tile-state::after{content:"Off"}
.btn-check:checked+.btn-neu-tile .neu-tile-icon{color:var(--neu-on-accent);background:var(--neu-accent)}
.btn-check:checked+.btn-neu-tile .neu-tile-state{color:var(--neu-accent)}
.btn-check:checked+.btn-neu-tile .neu-tile-state::before{background:currentColor}
.btn-check:checked+.btn-neu-tile .neu-tile-state::after{content:"On"}
/* Switches: Bootstrap .form-check.form-switch. The knob is a token-coloured radial gradient so it follows light and dark */
.neu-switch{display:flex;align-items:center;gap:.9rem;min-height:0;margin:0;padding:0}
.neu-switch .form-check-label{flex:1;min-width:0;font-weight:600;line-height:1.3;cursor:pointer}
.neu-switch .form-check-label small{display:block;margin-top:.15rem;font-size:.82rem;font-weight:400;color:var(--neu-muted)}
.neu-switch .neu-switch-state{min-width:2.1em;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:right;text-transform:uppercase;color:var(--neu-muted)}
.neu-switch .neu-switch-state::after{content:"Off"}
.neu-switch.form-switch .form-check-input,.neu-switch.form-switch .form-check-input:focus,.neu-switch.form-switch .form-check-input:checked{
  --bs-form-switch-bg:radial-gradient(circle at 50% 50%,var(--neu-knob) 0 10.5px,var(--neu-knob-edge) 11px 12px,transparent 12.5px),radial-gradient(circle at 58% 60%,var(--neu-dark) 0 9px,transparent 14px)}
.neu-switch .form-check-input{--neu-knob:var(--neu-bg);--neu-knob-edge:var(--neu-edge);
  order:3;flex:none;float:none;width:58px;height:32px;margin:0;border:var(--neu-bw) solid var(--neu-edge);border-radius:999px;
  background-color:var(--neu-bg);background-size:30px 30px;background-position:left center;cursor:pointer;
  box-shadow:var(--neu-inset-sm);transition:background-position .25s,background-color .25s,border-color .25s}
.neu-switch .form-check-input:focus{border-color:var(--neu-edge);box-shadow:var(--neu-inset-sm)}
.neu-switch .form-check-input:checked{--neu-knob:var(--neu-on-accent);--neu-knob-edge:var(--neu-on-accent);background-color:var(--neu-accent);border-color:var(--neu-accent);background-position:right center}
.neu-switch .form-check-input:focus-visible{outline:3px solid var(--neu-accent);outline-offset:3px}
.neu-switch .form-check-input:checked~.neu-switch-state{color:var(--neu-accent)}
.neu-switch .form-check-input:checked~.neu-switch-state::after{content:"On"}
/* Segmented control: .btn-group of .btn-check radios. The chosen option rises, turns accent and gains a dot */
.neu-seg{min-width:0;margin:0;padding:0;border:0}
.neu-seg legend{float:none;width:auto;margin-bottom:.6rem;padding:0;font-size:.88rem;font-weight:600}
.neu-seg .btn-group{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding:6px;border:var(--neu-bw) solid var(--neu-edge);border-radius:calc(var(--neu-radius)*.75);box-shadow:var(--neu-inset-sm)}
.neu-seg .btn{--bs-btn-padding-x:.9rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;--bs-btn-color:var(--neu-muted);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--neu-ink);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--neu-accent);--bs-btn-active-border-color:var(--neu-accent);--bs-btn-active-bg:transparent;
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;border-radius:calc(var(--neu-radius)*.5)!important;margin:0!important;transition:box-shadow .2s,color .2s}
.neu-seg .btn-check:checked+.btn{box-shadow:var(--neu-raised-sm)}
.neu-seg .btn-check:checked+.btn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.neu-seg .btn-check:focus-visible+.btn{outline:3px solid var(--neu-accent);outline-offset:2px;box-shadow:var(--neu-raised-sm)}
/* Card: Bootstrap .card restyled through --bs-card-* */
.card.neu-card{--bs-card-bg:var(--neu-bg);--bs-card-color:var(--neu-ink);--bs-card-border-color:var(--neu-line);--bs-card-border-width:var(--neu-bw);
  --bs-card-border-radius:var(--neu-radius);--bs-card-inner-border-radius:calc(var(--neu-radius) - var(--neu-bw));--bs-card-spacer-x:1.5rem;--bs-card-spacer-y:1.5rem;box-shadow:var(--neu-raised)}
.neu-card h2,.neu-card h3,.neu-card p{margin:0}
.neu-stack{display:grid;gap:1.35rem}
@media (prefers-reduced-motion:reduce){.btn-neu,.btn-neu-tile .neu-tile-icon,.neu-switch .form-check-input,.neu-seg .btn{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="neu-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
  <symbol id="neu-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="neu-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></symbol>
  <symbol id="neu-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13.5 6.5 4 4"/></symbol>
  <symbol id="neu-i-wifi" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 9a14 14 0 0 1 19 0"/><path d="M5.5 12.5a9.5 9.5 0 0 1 13 0"/><path d="M8.6 15.9a5 5 0 0 1 6.8 0"/><path d="M12 19.5h.01"/></symbol>
  <symbol id="neu-i-bluetooth" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10-5 4V3l5 4L7 17"/></symbol>
  <symbol id="neu-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="neu-i-leaf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20c0-9 5.5-14 15-15-.5 9.5-6 15-15 15z"/><path d="M5 20c3.5-4.5 6.5-7 10-8.5"/></symbol>
  <symbol id="neu-i-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 4h3.3l1.7 4.4-2.2 1.4a10.5 10.5 0 0 0 5.9 5.9l1.4-2.2 4.4 1.7v3.3a1.5 1.5 0 0 1-1.6 1.5A15.5 15.5 0 0 1 4 5.6 1.5 1.5 0 0 1 5.5 4z"/></symbol>
  <symbol id="neu-i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z"/></symbol>
  <symbol id="neu-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></symbol>
  <symbol id="neu-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol>
  <symbol id="neu-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
  <symbol id="neu-i-heartFill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
</svg>
<section><span class="mb-[18px] block text-[.72rem] font-semibold tracking-[.12em] text-neu-muted uppercase">Raised buttons · pressed in while held</span><div class="flex flex-wrap items-center gap-[18px]">
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[46px] rounded-neu-btn px-[1.35rem] py-[.65rem] text-[.95rem] border-neu-accent bg-neu-accent text-neu-on-accent" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-check"/></svg>Save scene</button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[46px] rounded-neu-btn px-[1.35rem] py-[.65rem] text-[.95rem] border-neu-edge bg-neu-bg text-neu-ink" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg>Add device</button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[46px] rounded-neu-btn px-[1.35rem] py-[.65rem] text-[.95rem] border-neu-edge bg-neu-bg text-neu-ink" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-calendar"/></svg>Schedule</button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[46px] rounded-neu-btn px-[1.35rem] py-[.65rem] text-[.95rem] border-neu-edge bg-neu-bg text-neu-ink" type="button">Cancel</button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[38px] rounded-neu-btn px-4 py-[.45rem] text-[.85rem] border-neu-edge bg-neu-bg text-neu-ink" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-edit"/></svg>Edit</button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent min-h-[38px] rounded-neu-btn px-4 py-[.45rem] text-[.85rem] border-neu-accent bg-neu-accent text-neu-on-accent" type="button">Apply</button>
</div></section>
<section><span class="mb-[18px] block text-[.72rem] font-semibold tracking-[.12em] text-neu-muted uppercase">Toggle buttons · on means pressed in, accent and the word On</span><div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-5">
<label class="group relative inline-flex cursor-pointer"><input class="peer sr-only" type="checkbox" checked><span class="flex w-full min-w-[132px] flex-col items-start gap-[.4rem] rounded-neu border-(length:--neu-bw) border-neu-edge bg-neu-bg px-[1.1rem] py-4 text-neu-ink shadow-neu-sm transition-[box-shadow,border-color] duration-[250ms] peer-checked:border-neu-accent peer-checked:shadow-neu-in motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent"><span class="mb-[.35rem] grid size-[42px] place-items-center rounded-full text-neu-muted shadow-neu-in-sm transition-colors duration-[250ms] group-has-checked:bg-neu-accent group-has-checked:text-neu-on-accent motion-reduce:transition-none"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-wifi"/></svg></span><span class="leading-[1.25] font-semibold">Wi-Fi</span><span class="flex items-center gap-[.4rem] text-[.8rem] font-semibold text-neu-muted before:size-[9px] before:rounded-full before:border-2 before:border-current after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:before:bg-current group-has-checked:after:content-['On']" aria-hidden="true"></span></span></label>
<label class="group relative inline-flex cursor-pointer"><input class="peer sr-only" type="checkbox"><span class="flex w-full min-w-[132px] flex-col items-start gap-[.4rem] rounded-neu border-(length:--neu-bw) border-neu-edge bg-neu-bg px-[1.1rem] py-4 text-neu-ink shadow-neu-sm transition-[box-shadow,border-color] duration-[250ms] peer-checked:border-neu-accent peer-checked:shadow-neu-in motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent"><span class="mb-[.35rem] grid size-[42px] place-items-center rounded-full text-neu-muted shadow-neu-in-sm transition-colors duration-[250ms] group-has-checked:bg-neu-accent group-has-checked:text-neu-on-accent motion-reduce:transition-none"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-bluetooth"/></svg></span><span class="leading-[1.25] font-semibold">Bluetooth</span><span class="flex items-center gap-[.4rem] text-[.8rem] font-semibold text-neu-muted before:size-[9px] before:rounded-full before:border-2 before:border-current after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:before:bg-current group-has-checked:after:content-['On']" aria-hidden="true"></span></span></label>
<label class="group relative inline-flex cursor-pointer"><input class="peer sr-only" type="checkbox" checked><span class="flex w-full min-w-[132px] flex-col items-start gap-[.4rem] rounded-neu border-(length:--neu-bw) border-neu-edge bg-neu-bg px-[1.1rem] py-4 text-neu-ink shadow-neu-sm transition-[box-shadow,border-color] duration-[250ms] peer-checked:border-neu-accent peer-checked:shadow-neu-in motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent"><span class="mb-[.35rem] grid size-[42px] place-items-center rounded-full text-neu-muted shadow-neu-in-sm transition-colors duration-[250ms] group-has-checked:bg-neu-accent group-has-checked:text-neu-on-accent motion-reduce:transition-none"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-moon"/></svg></span><span class="leading-[1.25] font-semibold">Do not disturb</span><span class="flex items-center gap-[.4rem] text-[.8rem] font-semibold text-neu-muted before:size-[9px] before:rounded-full before:border-2 before:border-current after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:before:bg-current group-has-checked:after:content-['On']" aria-hidden="true"></span></span></label>
<label class="group relative inline-flex cursor-pointer"><input class="peer sr-only" type="checkbox"><span class="flex w-full min-w-[132px] flex-col items-start gap-[.4rem] rounded-neu border-(length:--neu-bw) border-neu-edge bg-neu-bg px-[1.1rem] py-4 text-neu-ink shadow-neu-sm transition-[box-shadow,border-color] duration-[250ms] peer-checked:border-neu-accent peer-checked:shadow-neu-in motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent"><span class="mb-[.35rem] grid size-[42px] place-items-center rounded-full text-neu-muted shadow-neu-in-sm transition-colors duration-[250ms] group-has-checked:bg-neu-accent group-has-checked:text-neu-on-accent motion-reduce:transition-none"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-leaf"/></svg></span><span class="leading-[1.25] font-semibold">Eco mode</span><span class="flex items-center gap-[.4rem] text-[.8rem] font-semibold text-neu-muted before:size-[9px] before:rounded-full before:border-2 before:border-current after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:before:bg-current group-has-checked:after:content-['On']" aria-hidden="true"></span></span></label>
</div></section>
<div class="grid gap-[52px] md:grid-cols-2">
<div><section><span class="mb-[18px] block text-[.72rem] font-semibold tracking-[.12em] text-neu-muted uppercase">Switches</span><div class="rounded-neu border-(length:--neu-bw) border-neu-line bg-neu-bg text-neu-ink shadow-neu p-6"><div class="grid gap-[1.35rem]">
<label class="group relative flex cursor-pointer items-center gap-[.9rem]"><input class="peer sr-only" type="checkbox" role="switch" checked><span class="min-w-0 flex-1 leading-[1.3] font-semibold">Living room lamp<small class="mt-[.15rem] block text-[.82rem] font-normal text-neu-muted">Floor lamp, 2 bulbs</small></span><span class="min-w-[2.1em] text-right text-[.75rem] font-bold tracking-[.08em] text-neu-muted uppercase after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-8 w-[58px] flex-none rounded-full border-(length:--neu-bw) border-neu-edge bg-neu-bg shadow-neu-in-sm transition-colors duration-[250ms] peer-checked:border-neu-accent peer-checked:bg-neu-accent motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent before:absolute before:top-1/2 before:left-[3px] before:-mt-3 before:size-6 before:rounded-full before:border-(length:--neu-bw) before:border-neu-edge before:bg-neu-bg before:shadow-neu-sm before:transition-[translate,background-color] before:duration-[250ms] peer-checked:before:translate-x-[calc(28px-2*var(--neu-bw))] peer-checked:before:border-neu-on-accent peer-checked:before:bg-neu-on-accent motion-reduce:before:transition-none" aria-hidden="true"></span></label>
<label class="group relative flex cursor-pointer items-center gap-[.9rem]"><input class="peer sr-only" type="checkbox" role="switch"><span class="min-w-0 flex-1 leading-[1.3] font-semibold">Porch light<small class="mt-[.15rem] block text-[.82rem] font-normal text-neu-muted">Turns off at sunrise</small></span><span class="min-w-[2.1em] text-right text-[.75rem] font-bold tracking-[.08em] text-neu-muted uppercase after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-8 w-[58px] flex-none rounded-full border-(length:--neu-bw) border-neu-edge bg-neu-bg shadow-neu-in-sm transition-colors duration-[250ms] peer-checked:border-neu-accent peer-checked:bg-neu-accent motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent before:absolute before:top-1/2 before:left-[3px] before:-mt-3 before:size-6 before:rounded-full before:border-(length:--neu-bw) before:border-neu-edge before:bg-neu-bg before:shadow-neu-sm before:transition-[translate,background-color] before:duration-[250ms] peer-checked:before:translate-x-[calc(28px-2*var(--neu-bw))] peer-checked:before:border-neu-on-accent peer-checked:before:bg-neu-on-accent motion-reduce:before:transition-none" aria-hidden="true"></span></label>
<label class="group relative flex cursor-pointer items-center gap-[.9rem]"><input class="peer sr-only" type="checkbox" role="switch" checked><span class="min-w-0 flex-1 leading-[1.3] font-semibold">Motion alerts<small class="mt-[.15rem] block text-[.82rem] font-normal text-neu-muted">Front door camera</small></span><span class="min-w-[2.1em] text-right text-[.75rem] font-bold tracking-[.08em] text-neu-muted uppercase after:content-['Off'] group-has-checked:text-neu-accent group-has-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-8 w-[58px] flex-none rounded-full border-(length:--neu-bw) border-neu-edge bg-neu-bg shadow-neu-in-sm transition-colors duration-[250ms] peer-checked:border-neu-accent peer-checked:bg-neu-accent motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent before:absolute before:top-1/2 before:left-[3px] before:-mt-3 before:size-6 before:rounded-full before:border-(length:--neu-bw) before:border-neu-edge before:bg-neu-bg before:shadow-neu-sm before:transition-[translate,background-color] before:duration-[250ms] peer-checked:before:translate-x-[calc(28px-2*var(--neu-bw))] peer-checked:before:border-neu-on-accent peer-checked:before:bg-neu-on-accent motion-reduce:before:transition-none" aria-hidden="true"></span></label>
</div></div></section></div>
<div><section><span class="mb-[18px] block text-[.72rem] font-semibold tracking-[.12em] text-neu-muted uppercase">Icon buttons and an icon toggle</span><div class="flex flex-wrap items-center gap-[18px]">
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent size-[50px] rounded-full border-neu-edge bg-neu-bg text-neu-ink" type="button" aria-label="Call the front door"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-phone"/></svg></button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent size-[50px] rounded-full border-neu-edge bg-neu-bg text-neu-ink" type="button" aria-label="Message household"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-message"/></svg></button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent size-[50px] rounded-full border-neu-edge bg-neu-bg text-neu-ink" type="button" aria-label="Share scene"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-share"/></svg></button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent size-[50px] rounded-neu-btn border-neu-edge bg-neu-bg text-neu-ink" type="button" aria-label="More options"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-more"/></svg></button>
<button class="inline-flex items-center justify-center gap-[.55rem] border-(length:--neu-bw) font-semibold leading-[1.2] no-underline cursor-pointer shadow-neu-sm transition-[box-shadow,color,background-color] duration-200 hover:shadow-neu active:shadow-neu-in-sm motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-neu-accent size-[50px] rounded-full border-neu-accent bg-neu-accent text-neu-on-accent" type="button" aria-label="Add scene"><svg class="size-[22px] shrink-0" aria-hidden="true" focusable="false"><use href="#neu-i-plus"/></svg></button>
<label class="group relative inline-flex"><input class="peer sr-only" type="checkbox" aria-label="Favourite scene" checked><span class="grid size-[50px] cursor-pointer place-items-center rounded-full border-(length:--neu-bw) border-neu-edge bg-neu-bg text-neu-ink shadow-neu-sm transition-[box-shadow,color,border-color] duration-200 peer-checked:border-neu-accent peer-checked:text-neu-accent peer-checked:shadow-neu-in-sm motion-reduce:transition-none peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-neu-accent"><svg class="size-[22px] shrink-0 group-has-checked:hidden" aria-hidden="true" focusable="false"><use href="#neu-i-heart"/></svg><svg class="size-[22px] shrink-0 hidden group-has-checked:block" aria-hidden="true" focusable="false"><use href="#neu-i-heartFill"/></svg></span></label>
</div></section>
<section class="mt-12"><span class="mb-[18px] block text-[.72rem] font-semibold tracking-[.12em] text-neu-muted uppercase">Segmented control</span><fieldset class="m-0 min-w-0 border-0 p-0"><legend class="mb-[.6rem] p-0 text-[.88rem] font-semibold">Fan speed</legend><div class="flex flex-wrap gap-1.5 rounded-neu-btn border-(length:--neu-bw) border-neu-edge p-1.5 shadow-neu-in-sm"><label class="relative flex-auto"><input class="peer sr-only" type="radio" name="fan" value="low"><span class="flex min-h-10 cursor-pointer items-center justify-center gap-[.4rem] rounded-[calc(var(--neu-radius)*.5)] border-(length:--neu-bw) border-transparent px-[.9rem] py-[.4rem] text-[.9rem] font-semibold text-neu-muted transition-[box-shadow,color] duration-200 peer-checked:border-neu-accent peer-checked:text-neu-accent peer-checked:shadow-neu-sm peer-checked:before:size-[7px] peer-checked:before:rounded-full peer-checked:before:bg-current peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neu-accent motion-reduce:transition-none">Low</span></label><label class="relative flex-auto"><input class="peer sr-only" type="radio" name="fan" value="medium"><span class="flex min-h-10 cursor-pointer items-center justify-center gap-[.4rem] rounded-[calc(var(--neu-radius)*.5)] border-(length:--neu-bw) border-transparent px-[.9rem] py-[.4rem] text-[.9rem] font-semibold text-neu-muted transition-[box-shadow,color] duration-200 peer-checked:border-neu-accent peer-checked:text-neu-accent peer-checked:shadow-neu-sm peer-checked:before:size-[7px] peer-checked:before:rounded-full peer-checked:before:bg-current peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neu-accent motion-reduce:transition-none">Medium</span></label><label class="relative flex-auto"><input class="peer sr-only" type="radio" name="fan" value="high"><span class="flex min-h-10 cursor-pointer items-center justify-center gap-[.4rem] rounded-[calc(var(--neu-radius)*.5)] border-(length:--neu-bw) border-transparent px-[.9rem] py-[.4rem] text-[.9rem] font-semibold text-neu-muted transition-[box-shadow,color] duration-200 peer-checked:border-neu-accent peer-checked:text-neu-accent peer-checked:shadow-neu-sm peer-checked:before:size-[7px] peer-checked:before:rounded-full peer-checked:before:bg-current peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neu-accent motion-reduce:transition-none">High</span></label><label class="relative flex-auto"><input class="peer sr-only" type="radio" name="fan" value="auto" checked><span class="flex min-h-10 cursor-pointer items-center justify-center gap-[.4rem] rounded-[calc(var(--neu-radius)*.5)] border-(length:--neu-bw) border-transparent px-[.9rem] py-[.4rem] text-[.9rem] font-semibold text-neu-muted transition-[box-shadow,color] duration-200 peer-checked:border-neu-accent peer-checked:text-neu-accent peer-checked:shadow-neu-sm peer-checked:before:size-[7px] peer-checked:before:rounded-full peer-checked:before:bg-current peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neu-accent motion-reduce:transition-none">Auto</span></label></div></fieldset></section></div>
</div>
CSS 
/* ── Neumorphism UI kit tokens (uiCookies) — identical in every set ──────────────
   Every component is moulded from --neu-bg and lit from the top left. Change a token and
   the whole kit follows; the shadow recipes below are built from these values. */
:root{
  --neu-bg:#e0e5ec;          /* the one surface colour */
  --neu-light:#ffffff;       /* highlight, top left */
  --neu-dark:#a3b1c6;        /* shade, bottom right */
  --neu-distance:6px;        /* how far a shape rises */
  --neu-blur:14px;           /* how soft its shadow is */
  --neu-radius:18px;         /* cards; buttons use .75 of it, fields .6 */
  --neu-accent:#4f46e5;      /* focus ring and on / selected / current states, 4.9:1 on --neu-bg */
  --neu-on-accent:#ffffff;   /* text and marks on accent fills, 6.3:1 */
  --neu-ink:#1f2937;         /* text, 11.6:1 */
  --neu-muted:#4a5568;       /* secondary text, 5.9:1 */
  --neu-edge:#74819a;        /* control boundary (fields, tracks, boxes, buttons), 3.1:1 */
  --neu-line:rgba(255,255,255,.6); /* decorative edge on cards and panels */
  --neu-bw:1px;              /* control border width */
  --neu-success:#126b35;--neu-warning:#8a5300;--neu-danger:#b42318;
}
/* Dark neumorphism: data-neu="dark" on any wrapper, or a checked .neu-theme-input inside a [data-neu] element.
   :is() is a forgiving list, so browsers without :has() still apply data-neu="dark" */
[data-neu]:is([data-neu="dark"],:has(.neu-theme-input:checked)){
  --neu-bg:#262b33;--neu-light:#323944;--neu-dark:#14171c;
  --neu-accent:#8f88ff;--neu-on-accent:#14161b;--neu-ink:#e7ebf2;--neu-muted:#aab4c3;--neu-edge:#717d90;
  --neu-line:rgba(255,255,255,.06);--neu-success:#6fdc9a;--neu-warning:#f3c164;--neu-danger:#ff8f84;color-scheme:dark}
/* More contrast requested: the soft shadows go, every control and panel gets a solid outline */
@media (prefers-contrast:more){:root,[data-neu]:is([data-neu],:has(.neu-theme-input:checked)){
  --neu-light:transparent;--neu-dark:transparent;--neu-edge:var(--neu-ink);--neu-line:var(--neu-ink);--neu-muted:var(--neu-ink);--neu-bw:2px}}
:root,[data-neu]{
  --neu-raised:var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-dark),calc(var(--neu-distance)*-1) calc(var(--neu-distance)*-1) var(--neu-blur) var(--neu-light);
  --neu-raised-sm:calc(var(--neu-distance)*.5) calc(var(--neu-distance)*.5) calc(var(--neu-blur)*.5) var(--neu-dark),calc(var(--neu-distance)*-.5) calc(var(--neu-distance)*-.5) calc(var(--neu-blur)*.5) var(--neu-light);
  --neu-inset:inset calc(var(--neu-distance)*.6) calc(var(--neu-distance)*.6) calc(var(--neu-blur)*.6) var(--neu-dark),inset calc(var(--neu-distance)*-.6) calc(var(--neu-distance)*-.6) calc(var(--neu-blur)*.6) var(--neu-light);
  --neu-inset-sm:inset calc(var(--neu-distance)*.35) calc(var(--neu-distance)*.35) calc(var(--neu-blur)*.35) var(--neu-dark),inset calc(var(--neu-distance)*-.35) calc(var(--neu-distance)*-.35) calc(var(--neu-blur)*.35) var(--neu-light);
}
[data-neu]{background:var(--neu-bg);color:var(--neu-ink)}
/* The tokens above, exposed as Tailwind utilities: bg-neu-bg, text-neu-muted, border-neu-edge,
   shadow-neu, shadow-neu-sm, shadow-neu-in, shadow-neu-in-sm, rounded-neu, rounded-neu-btn, rounded-neu-field… */
@theme inline {
  --color-neu-bg: var(--neu-bg); --color-neu-ink: var(--neu-ink); --color-neu-muted: var(--neu-muted);
  --color-neu-edge: var(--neu-edge); --color-neu-line: var(--neu-line);
  --color-neu-accent: var(--neu-accent); --color-neu-on-accent: var(--neu-on-accent);
  --color-neu-success: var(--neu-success); --color-neu-warning: var(--neu-warning); --color-neu-danger: var(--neu-danger);
  --shadow-neu: var(--neu-raised); --shadow-neu-sm: var(--neu-raised-sm);
  --shadow-neu-in: var(--neu-inset); --shadow-neu-in-sm: var(--neu-inset-sm);
  --radius-neu: var(--neu-radius); --radius-neu-btn: calc(var(--neu-radius) * .75); --radius-neu-field: calc(var(--neu-radius) * .6);
}

About this set

The controls a soft UI is built from, drawn so they stay readable. Raised buttons come in default and accent fills, with icons and a small size, and sink into the surface while they are held. Toggle buttons for Wi-Fi, Bluetooth, Do not disturb and Eco mode press in when they are on and also turn their icon accent, fill a dot and print the word On, so the state never depends on a shadow alone. Round and square icon buttons cover call, message, share and more, next to a favourite toggle whose outline heart becomes a filled one. Switch rows pair a label and a hint with an On or Off word and a track that fills with accent, and a segmented control picks a fan speed. Toggles and switches are visually hidden native checkboxes followed by a face that reacts to :checked, the segmented control is a radio group in a fieldset, and every boundary carries a 1px edge that reaches 3:1 against the background. All colours, shadow distance, blur and radius come from the shared –neu-* tokens at the top of the file.

What’s included

  • Raised, pressed and accent buttons with a 3:1 edge
  • Toggle tiles that show On by shape, accent colour, a filled dot and text
  • Switch rows with role="switch" and a visible On or Off word
  • Segmented control built from a native radio group
  • Outlined, shadow-free variant under prefers-contrast: more

Accessibility

Toggles are native checkboxes, switches add role="switch", the segmented control is a fieldset with a legend, and icon-only buttons carry an aria-label. Every control shows a 3px accent focus ring that sits outside the shadow. The on state is shown by shape, accent colour and visible text together. Transitions switch off under prefers-reduced-motion, and prefers-contrast: more removes the soft shadows and draws 2px solid outlines.

Customise it

Change --neu-bg, --neu-light, --neu-dark, --neu-distance, --neu-blur, --neu-radius and --neu-accent in the token block at the top. Bootstrap maps the same tokens onto --bs-btn-* through .btn-neu, and Tailwind exposes them as bg-neu-bg, shadow-neu, shadow-neu-in and rounded-neu-btn through an @theme inline block.