Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="nb-i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 3.5 10.5l7 3 3 7z"/><path d="m10.5 13.5 4-4"/></symbol>
  <symbol id="nb-i-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="1.5"/><path d="m16 10.5 5-3v9l-5-3z"/></symbol>
  <symbol id="nb-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="1.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="nb-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5L19.5 7"/></symbol>
  <symbol id="nb-i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></symbol>
  <symbol id="nb-i-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5 4.5 13.5H11L10 21.5l8.5-11H12z"/></symbol>
  <symbol id="nb-i-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></symbol>
  <symbol id="nb-i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h14M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
  <symbol id="nb-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4.5L19.5 9 15 4.5 4 15.5z"/><path d="m12.5 7 4.5 4.5"/></symbol>
  <symbol id="nb-i-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="8.5" y="8.5" width="12" height="12" rx="1.5"/><path d="M15.5 8.5V4.5a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4"/></symbol>
  <symbol id="nb-i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></symbol>
  <symbol id="nb-i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5 6 4.5h12l2.5 9V19.5h-17zM3.5 13.5h5l1 2.5h5l1-2.5h5"/></symbol>
  <symbol id="nb-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15zM10 21h4"/></symbol>
  <symbol id="nb-i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.5V4h8.5l8.5 8.5-8 8z"/><circle cx="8" cy="8.5" r="1.4"/></symbol>
  <symbol id="nb-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-heart-fill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V4M7.5 8.5 12 4l4.5 4.5M5 13v6.5h14V13"/></symbol>
  <symbol id="nb-i-bookmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 4h11v16L12 15.5 6.5 20z"/></symbol>
  <symbol id="nb-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="4"/></symbol>
  <symbol id="nb-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v15M4.5 12h15"/></symbol>
</svg>
<section><span class="lbl">Buttons · pressing moves the button into its shadow</span><div class="nb-cluster">
<button class="nb-btn nb-btn--lemon" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg>Publish post</button>
<button class="nb-btn nb-btn--pink" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-video"/></svg>Go live</button>
<button class="nb-btn nb-btn--cyan" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-calendar"/></svg>Schedule</button>
<button class="nb-btn nb-btn--lime" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-check"/></svg>Save draft</button>
<button class="nb-btn" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-eye"/></svg>Preview</button>
<button class="nb-btn nb-btn--ink" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bolt"/></svg>Upgrade plan</button>
<button class="nb-btn nb-btn--blue" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-link"/></svg>Copy link</button>
</div></section>
<section><span class="lbl">Sizes and a disabled button</span><div class="nb-cluster">
<button class="nb-btn nb-btn--lemon nb-btn--lg" type="button">Start a project<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-arrow-right"/></svg></button>
<button class="nb-btn" type="button">Add tag</button>
<button class="nb-btn nb-btn--sm" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-edit"/></svg>Edit</button>
<button class="nb-btn nb-btn--sm nb-btn--pink" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-copy"/></svg>Duplicate</button>
<button class="nb-btn" type="button" disabled><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-x"/></svg>Sold out</button>
</div></section>
<section><span class="lbl">Toggle buttons · on means pushed in, lime, a check and the word On</span><div class="nb-tiles">
<label class="nb-toggle"><input class="nb-sr" type="checkbox" checked><span class="nb-toggle__face"><span class="nb-toggle__icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-inbox"/></svg></span><span class="nb-toggle__name">Comments</span><span class="nb-toggle__state" aria-hidden="true"></span></span></label>
<label class="nb-toggle"><input class="nb-sr" type="checkbox"><span class="nb-toggle__face"><span class="nb-toggle__icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg></span><span class="nb-toggle__name">Auto-post</span><span class="nb-toggle__state" aria-hidden="true"></span></span></label>
<label class="nb-toggle"><input class="nb-sr" type="checkbox" checked><span class="nb-toggle__face"><span class="nb-toggle__icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bell"/></svg></span><span class="nb-toggle__name">Notify fans</span><span class="nb-toggle__state" aria-hidden="true"></span></span></label>
<label class="nb-toggle"><input class="nb-sr" type="checkbox"><span class="nb-toggle__face"><span class="nb-toggle__icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-tag"/></svg></span><span class="nb-toggle__name">Watermark</span><span class="nb-toggle__state" aria-hidden="true"></span></span></label>
</div></section>
<div class="cols">
<div><section><span class="lbl">Switches</span><div class="nb-card"><div class="nb-stack">
<label class="nb-switch"><input class="nb-sr" type="checkbox" role="switch" checked><span class="nb-switch__text">Public profile<small>Anyone can find your page</small></span><span class="nb-switch__state" aria-hidden="true"></span><span class="nb-switch__track" aria-hidden="true"></span></label>
<label class="nb-switch"><input class="nb-sr" type="checkbox" role="switch"><span class="nb-switch__text">Tip jar<small>Fans can send one-off tips</small></span><span class="nb-switch__state" aria-hidden="true"></span><span class="nb-switch__track" aria-hidden="true"></span></label>
<label class="nb-switch"><input class="nb-sr" type="checkbox" role="switch" checked><span class="nb-switch__text">Weekly digest<small>Mondays at 9:00</small></span><span class="nb-switch__state" aria-hidden="true"></span><span class="nb-switch__track" aria-hidden="true"></span></label>
</div></div></section></div>
<div><section><span class="lbl">Icon buttons and a favourite toggle</span><div class="nb-cluster">
<label class="nb-itoggle"><input class="nb-sr" type="checkbox" aria-label="Favourite" checked><span class="nb-itoggle__face"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-heart"/></svg><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-heart-fill"/></svg></span></label>
<button class="nb-btn nb-btn--icon nb-btn--round" type="button" aria-label="Share"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-share"/></svg></button>
<button class="nb-btn nb-btn--icon nb-btn--round" type="button" aria-label="Save for later"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bookmark"/></svg></button>
<button class="nb-btn nb-btn--icon" type="button" aria-label="More options"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-more"/></svg></button>
<button class="nb-btn nb-btn--icon nb-btn--round nb-btn--lemon" type="button" aria-label="New post"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-plus"/></svg></button>
</div></section>
<section class="mt"><span class="lbl">Segmented control</span><fieldset class="nb-seg"><legend class="nb-seg__legend">Post visibility</legend><div class="nb-seg__opts"><label class="nb-seg__opt"><input class="nb-sr" type="radio" name="vis" value="public"><span>Public</span></label><label class="nb-seg__opt"><input class="nb-sr" type="radio" name="vis" value="members" checked><span>Members</span></label><label class="nb-seg__opt"><input class="nb-sr" type="radio" name="vis" value="draft"><span>Draft</span></label></div></fieldset></section></div>
</div>
CSS 
/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Components */
:where([class*="nb-"]),:where([class*="nb-"])::before,:where([class*="nb-"])::after{box-sizing:border-box}
.nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: a face, a thick border and a hard shadow. Hover lifts it, pressing moves it into its shadow */
.nb-btn{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.6rem 1.2rem;
  border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-fill);color:var(--nb-text);
  font:700 1rem/1.2 var(--nb-font);text-decoration:none;cursor:pointer;box-shadow:var(--nb-shadow);
  transition:translate .12s,box-shadow .12s}
.nb-btn:hover{translate:-2px -2px;box-shadow:var(--nb-shadow-hover)}
.nb-btn:active{translate:var(--nb-press);box-shadow:none}
.nb-btn:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:5px}
.nb-btn--lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.nb-btn--pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.nb-btn--cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.nb-btn--lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.nb-btn--red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.nb-btn--blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.nb-btn--ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.nb-btn--sm{min-height:38px;padding:.4rem .85rem;font-size:.875rem}
.nb-btn--lg{min-height:56px;padding:.8rem 1.6rem;font-size:1.15rem}
.nb-btn--block{width:100%}
.nb-btn--icon{width:48px;height:48px;min-height:0;padding:0}
.nb-btn--icon-sm{width:38px;height:38px;box-shadow:var(--nb-shadow-sm)}
.nb-btn--icon-sm:hover{box-shadow:var(--nb-shadow)}
.nb-btn--icon-sm:active{translate:var(--nb-press-sm)}
.nb-btn--round{border-radius:50%}
.nb-btn:disabled{--nb-fill:var(--nb-paper);--nb-text:var(--nb-muted);border-style:dashed;box-shadow:none;translate:none;cursor:not-allowed}
/* Icon toggle: a checkbox behind a round face. On = pressed into its shadow, pink, and the outline icon turns solid */
.nb-itoggle{position:relative;display:inline-flex}
.nb-itoggle__face{display:grid;place-items:center;width:48px;height:48px;border:var(--nb-border);border-radius:50%;background:var(--nb-surface);color:var(--nb-ink);
  box-shadow:var(--nb-shadow);cursor:pointer;transition:translate .12s,box-shadow .12s}
.nb-itoggle__face .nb-ico{width:22px;height:22px}
.nb-itoggle__face .nb-ico+.nb-ico,.nb-itoggle input:checked+.nb-itoggle__face .nb-ico:first-child{display:none}
.nb-itoggle input:checked+.nb-itoggle__face{translate:var(--nb-press);box-shadow:none;background:var(--nb-pink);color:var(--nb-on-fill)}
.nb-itoggle input:checked+.nb-itoggle__face .nb-ico+.nb-ico{display:block}
.nb-itoggle input:focus-visible+.nb-itoggle__face{outline:3px dashed var(--nb-focus);outline-offset:5px}
/* Toggle tiles: a visually hidden checkbox and a face. On = pushed into the shadow, lime fill, a check and the word On */
.nb-toggle{position:relative;display:flex}
.nb-toggle__face{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;width:100%;min-width:140px;padding:1rem;
  border:var(--nb-border);border-radius:var(--nb-radius);background:var(--nb-surface);color:var(--nb-ink);box-shadow:var(--nb-shadow);
  cursor:pointer;transition:translate .12s,box-shadow .12s}
.nb-toggle__icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.2rem;border:var(--nb-border);border-radius:50%;background:var(--nb-paper)}
.nb-toggle__name{font-weight:800;line-height:1.25}
.nb-toggle__state{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;border:2px solid currentColor;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nb-toggle__state::before{content:"";width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.nb-toggle__state::after{content:"Off"}
.nb-toggle input:checked+.nb-toggle__face{translate:var(--nb-press);box-shadow:none;background:var(--nb-lime);color:var(--nb-on-fill)}
.nb-toggle input:checked+.nb-toggle__face .nb-toggle__icon{border-color:var(--nb-on-fill);background:var(--nb-on-fill);color:var(--nb-lime)}
.nb-toggle input:checked+.nb-toggle__face .nb-toggle__state::before{width:10px;height:6px;border-width:0 0 2px 2px;border-radius:0;rotate:-45deg;translate:0 -1px}
.nb-toggle input:checked+.nb-toggle__face .nb-toggle__state::after{content:"On"}
.nb-toggle input:focus-visible+.nb-toggle__face{outline:3px dashed var(--nb-focus);outline-offset:5px}
/* Switches: a checkbox with role="switch". On = the square knob slides right, the track fills lime and the label says On */
.nb-switch{position:relative;display:flex;align-items:center;gap:.8rem;cursor:pointer}
.nb-switch__text{flex:1;min-width:0;font-weight:800;line-height:1.3}
.nb-switch__text small{display:block;margin-top:.1rem;font-size:.85rem;font-weight:500;color:var(--nb-muted)}
.nb-switch__state{min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase}
.nb-switch__state::after{content:"Off"}
.nb-switch__track{position:relative;flex:none;width:70px;height:36px;border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-paper);
  box-shadow:var(--nb-shadow-sm);transition:background-color .12s}
.nb-switch__track::before{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border:var(--nb-border);border-radius:4px;background:var(--nb-surface);transition:translate .15s}
.nb-switch input:checked~.nb-switch__track{background:var(--nb-lime)}
.nb-switch input:checked~.nb-switch__track::before{translate:34px 0;border-color:var(--nb-on-fill);background:var(--nb-on-fill)}
.nb-switch input:checked~.nb-switch__state::after{content:"On"}
.nb-switch input:focus-visible~.nb-switch__track{outline:3px dashed var(--nb-focus);outline-offset:4px}
/* Segmented control: radios in a fieldset. The chosen option fills lemon and gains a check */
.nb-seg{min-width:0;margin:0;padding:0;border:0}
.nb-seg__legend{margin-bottom:.55rem;padding:0;font-weight:800}
.nb-seg__opts{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-surface);box-shadow:var(--nb-shadow);overflow:hidden}
.nb-seg__opt{position:relative;flex:1 1 auto}
.nb-seg__opt+.nb-seg__opt{border-left:var(--nb-border)}
.nb-seg__opt span{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.45rem 1rem;color:var(--nb-ink);font-weight:700;cursor:pointer}
.nb-seg__opt input:checked+span{background:var(--nb-lemon);color:var(--nb-on-fill)}
.nb-seg__opt input:checked+span::before{content:"";width:12px;height:7px;border:solid currentColor;border-width:0 0 3px 3px;rotate:-45deg;translate:0 -2px}
.nb-seg__opt input:focus-visible+span{outline:3px dashed var(--nb-focus);outline-offset:-7px}
/* Card: a white panel, the thick border and the large hard shadow. Fill variants keep dark text */
.nb-card{position:relative;padding:1.4rem;border:var(--nb-border);border-radius:var(--nb-radius);background:var(--nb-surface);color:var(--nb-ink);box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.nb-card--lemon,.nb-card--pink,.nb-card--cyan,.nb-card--lime,.nb-card--orange,.nb-card--violet{--nb-muted:var(--nb-on-fill-muted);color:var(--nb-on-fill)}
.nb-card--lemon{background:var(--nb-lemon)}.nb-card--pink{background:var(--nb-pink)}.nb-card--cyan{background:var(--nb-cyan)}
.nb-card--lime{background:var(--nb-lime)}.nb-card--orange{background:var(--nb-orange)}.nb-card--violet{background:var(--nb-violet)}
/* Layout helpers */
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}

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="nb-i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 3.5 10.5l7 3 3 7z"/><path d="m10.5 13.5 4-4"/></symbol>
  <symbol id="nb-i-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="1.5"/><path d="m16 10.5 5-3v9l-5-3z"/></symbol>
  <symbol id="nb-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="1.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="nb-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5L19.5 7"/></symbol>
  <symbol id="nb-i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></symbol>
  <symbol id="nb-i-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5 4.5 13.5H11L10 21.5l8.5-11H12z"/></symbol>
  <symbol id="nb-i-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></symbol>
  <symbol id="nb-i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h14M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
  <symbol id="nb-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4.5L19.5 9 15 4.5 4 15.5z"/><path d="m12.5 7 4.5 4.5"/></symbol>
  <symbol id="nb-i-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="8.5" y="8.5" width="12" height="12" rx="1.5"/><path d="M15.5 8.5V4.5a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4"/></symbol>
  <symbol id="nb-i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></symbol>
  <symbol id="nb-i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5 6 4.5h12l2.5 9V19.5h-17zM3.5 13.5h5l1 2.5h5l1-2.5h5"/></symbol>
  <symbol id="nb-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15zM10 21h4"/></symbol>
  <symbol id="nb-i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.5V4h8.5l8.5 8.5-8 8z"/><circle cx="8" cy="8.5" r="1.4"/></symbol>
  <symbol id="nb-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-heart-fill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V4M7.5 8.5 12 4l4.5 4.5M5 13v6.5h14V13"/></symbol>
  <symbol id="nb-i-bookmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 4h11v16L12 15.5 6.5 20z"/></symbol>
  <symbol id="nb-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="4"/></symbol>
  <symbol id="nb-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v15M4.5 12h15"/></symbol>
</svg>
<section><span class="lbl">Buttons · pressing moves the button into its shadow</span><div class="nb-cluster">
<button class="btn btn-nb btn-nb-lemon" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg>Publish post</button>
<button class="btn btn-nb btn-nb-pink" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-video"/></svg>Go live</button>
<button class="btn btn-nb btn-nb-cyan" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-calendar"/></svg>Schedule</button>
<button class="btn btn-nb btn-nb-lime" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-check"/></svg>Save draft</button>
<button class="btn btn-nb" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-eye"/></svg>Preview</button>
<button class="btn btn-nb btn-nb-ink" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bolt"/></svg>Upgrade plan</button>
<button class="btn btn-nb btn-nb-blue" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-link"/></svg>Copy link</button>
</div></section>
<section><span class="lbl">Sizes and a disabled button</span><div class="nb-cluster">
<button class="btn btn-nb btn-nb-lemon btn-lg" type="button">Start a project<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-arrow-right"/></svg></button>
<button class="btn btn-nb" type="button">Add tag</button>
<button class="btn btn-nb btn-sm" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-edit"/></svg>Edit</button>
<button class="btn btn-nb btn-nb-pink btn-sm" type="button"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-copy"/></svg>Duplicate</button>
<button class="btn btn-nb" type="button" disabled><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-x"/></svg>Sold out</button>
</div></section>
<section><span class="lbl">Toggle buttons · on means pushed in, lime, a check and the word On</span><div class="nb-tiles">
<div><input class="btn-check" type="checkbox" id="tg-comments" checked autocomplete="off"><label class="btn btn-nb btn-nb-tile" for="tg-comments"><span class="nb-tile-icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-inbox"/></svg></span>Comments<span class="nb-tile-state" aria-hidden="true"></span></label></div>
<div><input class="btn-check" type="checkbox" id="tg-auto" autocomplete="off"><label class="btn btn-nb btn-nb-tile" for="tg-auto"><span class="nb-tile-icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg></span>Auto-post<span class="nb-tile-state" aria-hidden="true"></span></label></div>
<div><input class="btn-check" type="checkbox" id="tg-notify" checked autocomplete="off"><label class="btn btn-nb btn-nb-tile" for="tg-notify"><span class="nb-tile-icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bell"/></svg></span>Notify fans<span class="nb-tile-state" aria-hidden="true"></span></label></div>
<div><input class="btn-check" type="checkbox" id="tg-mark" autocomplete="off"><label class="btn btn-nb btn-nb-tile" for="tg-mark"><span class="nb-tile-icon"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-tag"/></svg></span>Watermark<span class="nb-tile-state" aria-hidden="true"></span></label></div>
</div></section>
<div class="cols">
<div><section><span class="lbl">Switches</span><div class="card nb-card card-body"><div class="nb-stack">
<div class="form-check form-switch nb-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-public" checked><label class="form-check-label" for="sw-public">Public profile<small>Anyone can find your page</small></label><span class="nb-switch-state" aria-hidden="true"></span></div>
<div class="form-check form-switch nb-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-tips"><label class="form-check-label" for="sw-tips">Tip jar<small>Fans can send one-off tips</small></label><span class="nb-switch-state" aria-hidden="true"></span></div>
<div class="form-check form-switch nb-switch"><input class="form-check-input" type="checkbox" role="switch" id="sw-digest" checked><label class="form-check-label" for="sw-digest">Weekly digest<small>Mondays at 9:00</small></label><span class="nb-switch-state" aria-hidden="true"></span></div>
</div></div></section></div>
<div><section><span class="lbl">Icon buttons and a favourite toggle</span><div class="nb-cluster">
<input class="btn-check" type="checkbox" id="fav" checked autocomplete="off" aria-label="Favourite"><label class="btn btn-nb btn-nb-icon rounded-circle" for="fav"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-heart"/></svg><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-heart-fill"/></svg></label>
<button class="btn btn-nb btn-nb-icon rounded-circle" type="button" aria-label="Share"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-share"/></svg></button>
<button class="btn btn-nb btn-nb-icon rounded-circle" type="button" aria-label="Save for later"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-bookmark"/></svg></button>
<button class="btn btn-nb btn-nb-icon" type="button" aria-label="More options"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-more"/></svg></button>
<button class="btn btn-nb btn-nb-icon btn-nb-lemon rounded-circle" type="button" aria-label="New post"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-plus"/></svg></button>
</div></section>
<section class="mt"><span class="lbl">Segmented control</span><fieldset class="nb-seg"><legend>Post visibility</legend><div class="btn-group">
<input class="btn-check" type="radio" name="vis" id="vis-public" value="public" autocomplete="off"><label class="btn" for="vis-public">Public</label>
<input class="btn-check" type="radio" name="vis" id="vis-members" value="members" checked autocomplete="off"><label class="btn" for="vis-members">Members</label>
<input class="btn-check" type="radio" name="vis" id="vis-draft" value="draft" autocomplete="off"><label class="btn" for="vis-draft">Draft</label>
</div></fieldset></section></div>
</div>
CSS 
/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-nb]{--bs-body-bg:var(--nb-paper);--bs-body-color:var(--nb-ink);--bs-body-font-family:var(--nb-font);--bs-emphasis-color:var(--nb-ink);
  --bs-heading-color:var(--nb-ink);--bs-secondary-color:var(--nb-muted);--bs-tertiary-color:var(--nb-muted);
  --bs-border-color:var(--nb-line);--bs-border-width:var(--nb-bw);--bs-border-radius:var(--nb-radius-sm);--bs-border-radius-lg:var(--nb-radius);
  --bs-focus-ring-color:var(--nb-focus)}
/* Components */
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{color:inherit;text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: Bootstrap .btn with a .btn-nb variant set through --bs-btn-* variables.
   Hover lifts it, pressing (or a checked .btn-check) moves it into its shadow */
.btn-nb{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);--nb-btn-shadow:var(--nb-shadow);
  --bs-btn-padding-x:1.2rem;--bs-btn-padding-y:.6rem;--bs-btn-font-family:var(--nb-font);--bs-btn-font-size:1rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.2;
  --bs-btn-border-width:var(--nb-bw);--bs-btn-border-radius:var(--nb-radius-sm);
  --bs-btn-bg:var(--nb-fill);--bs-btn-color:var(--nb-text);--bs-btn-border-color:var(--nb-line);
  --bs-btn-hover-bg:var(--nb-fill);--bs-btn-hover-color:var(--nb-text);--bs-btn-hover-border-color:var(--nb-line);
  --bs-btn-active-bg:var(--nb-fill);--bs-btn-active-color:var(--nb-text);--bs-btn-active-border-color:var(--nb-line);
  --bs-btn-disabled-bg:var(--nb-paper);--bs-btn-disabled-color:var(--nb-muted);--bs-btn-disabled-border-color:var(--nb-line);--bs-btn-disabled-opacity:1;
  --bs-btn-focus-box-shadow:var(--nb-btn-shadow);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;box-shadow:var(--nb-btn-shadow);transition:translate .12s,box-shadow .12s}
.btn-nb:hover{translate:-2px -2px;--nb-btn-shadow:var(--nb-shadow-hover)}
.btn-nb:active{translate:var(--nb-press);--nb-btn-shadow:none}
.btn-nb:focus-visible,.btn-check:focus-visible+.btn-nb{outline:3px dashed var(--nb-focus);outline-offset:5px;box-shadow:var(--nb-btn-shadow)}
.btn-nb-lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.btn-nb-pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.btn-nb-cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.btn-nb-lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.btn-nb-red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.btn-nb-blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.btn-nb-ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.btn-nb.btn-sm{--bs-btn-padding-x:.85rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.875rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:38px}
.btn-nb.btn-lg{--bs-btn-padding-x:1.6rem;--bs-btn-padding-y:.8rem;--bs-btn-font-size:1.15rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:56px}
.btn-nb-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:48px;height:48px;min-height:0}
.btn-nb-icon-sm{width:38px;height:38px;--nb-btn-shadow:var(--nb-shadow-sm)}
.btn-nb-icon-sm:hover{--nb-btn-shadow:var(--nb-shadow)}
.btn-nb-icon-sm:active{translate:var(--nb-press-sm)}
.btn-nb.rounded-circle{border-radius:50%}
.btn-nb:disabled{border-style:dashed;--nb-btn-shadow:none;translate:none}
/* Icon toggle: .btn-check + a round .btn. On = pressed into its shadow, pink, and the outline icon turns solid */
.btn-check+.btn-nb-icon .nb-ico{width:22px;height:22px}
.btn-check+.btn-nb-icon .nb-ico+.nb-ico,.btn-check:checked+.btn-nb-icon .nb-ico:first-child{display:none}
.btn-check:checked+.btn-nb-icon .nb-ico+.nb-ico{display:block}
.btn-check:checked+.btn-nb-icon{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill);translate:var(--nb-press);--nb-btn-shadow:none}
/* Toggle tiles: Bootstrap .btn-check + .btn. On = pushed into the shadow, lime fill, a check and the word On */
.btn-nb-tile{--bs-btn-padding-x:1rem;--bs-btn-padding-y:1rem;--bs-btn-border-radius:var(--nb-radius);--bs-btn-font-weight:800;--bs-btn-line-height:1.25;
  flex-direction:column;align-items:flex-start;gap:.45rem;width:100%;min-width:140px;text-align:start}
.btn-check:checked+.btn-nb-tile{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill);translate:var(--nb-press);--nb-btn-shadow:none}
.btn-nb-tile .nb-tile-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:.2rem;border:var(--nb-border);border-radius:50%;background:var(--nb-paper);color:var(--nb-ink)}
.btn-nb-tile .nb-tile-state{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;border:2px solid currentColor;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.btn-nb-tile .nb-tile-state::before{content:"";width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.btn-nb-tile .nb-tile-state::after{content:"Off"}
.btn-check:checked+.btn-nb-tile .nb-tile-icon{border-color:var(--nb-on-fill);background:var(--nb-on-fill);color:var(--nb-lime)}
.btn-check:checked+.btn-nb-tile .nb-tile-state::before{width:10px;height:6px;border-width:0 0 2px 2px;border-radius:0;rotate:-45deg;translate:0 -1px}
.btn-check:checked+.btn-nb-tile .nb-tile-state::after{content:"On"}
/* Switches: Bootstrap .form-check.form-switch. The square knob is two token-coloured gradients, so it follows the dark theme */
.nb-switch{display:flex;align-items:center;gap:.8rem;min-height:0;margin:0;padding:0}
.nb-switch .form-check-label{flex:1;min-width:0;font-weight:800;line-height:1.3;cursor:pointer}
.nb-switch .form-check-label small{display:block;margin-top:.1rem;font-size:.85rem;font-weight:500;color:var(--nb-muted)}
.nb-switch .nb-switch-state{min-width:2.2em;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-align:right;text-transform:uppercase}
.nb-switch .nb-switch-state::after{content:"Off"}
.nb-switch.form-switch .form-check-input{--nb-knob:var(--nb-surface);--nb-knob-edge:var(--nb-line);--nb-knob-x:3px;
  order:3;flex:none;float:none;width:70px;height:36px;margin:0;border:var(--nb-border);border-radius:var(--nb-radius-sm);cursor:pointer;
  background:linear-gradient(var(--nb-knob),var(--nb-knob)) calc(var(--nb-knob-x) + 3px) 6px/18px 18px no-repeat,
    linear-gradient(var(--nb-knob-edge),var(--nb-knob-edge)) var(--nb-knob-x) 3px/24px 24px no-repeat,var(--nb-paper);
  box-shadow:var(--nb-shadow-sm);transition:background-position .15s,background-color .12s}
.nb-switch.form-switch .form-check-input:checked{--nb-knob:var(--nb-on-fill);--nb-knob-edge:var(--nb-on-fill);--nb-knob-x:37px;background-color:var(--nb-lime);border-color:var(--nb-line)}
.nb-switch.form-switch .form-check-input:focus{border-color:var(--nb-line);box-shadow:var(--nb-shadow-sm)}
.nb-switch.form-switch .form-check-input:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px}
.nb-switch .form-check-input:checked~.nb-switch-state::after{content:"On"}
/* Segmented control: a .btn-group of .btn-check radios. The chosen option fills lemon and gains a check */
.nb-seg{min-width:0;margin:0;padding:0;border:0}
.nb-seg legend{float:none;width:auto;margin-bottom:.55rem;padding:0;font-size:1rem;font-weight:800}
.nb-seg .btn-group{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-surface);box-shadow:var(--nb-shadow);overflow:hidden}
.nb-seg .btn{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.45rem;--bs-btn-font-family:var(--nb-font);--bs-btn-font-weight:700;--bs-btn-color:var(--nb-ink);--bs-btn-border-width:0;
  --bs-btn-hover-color:var(--nb-ink);--bs-btn-active-color:var(--nb-on-fill);--bs-btn-active-bg:var(--nb-lemon);
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;border-radius:0!important;margin:0!important}
.nb-seg .btn-check+.btn~.btn-check+.btn{border-left:var(--nb-border)}
.nb-seg .btn-check:checked+.btn::before{content:"";width:12px;height:7px;border:solid currentColor;border-width:0 0 3px 3px;rotate:-45deg;translate:0 -2px}
.nb-seg .btn-check:focus-visible+.btn{outline:3px dashed var(--nb-focus);outline-offset:-7px;box-shadow:none}
/* Card: Bootstrap .card restyled through --bs-card-*; fill variants keep dark text */
.card.nb-card{--bs-card-bg:var(--nb-surface);--bs-card-color:var(--nb-ink);--bs-card-border-color:var(--nb-line);--bs-card-border-width:var(--nb-bw);
  --bs-card-border-radius:var(--nb-radius);--bs-card-inner-border-radius:calc(var(--nb-radius) - var(--nb-bw));--bs-card-spacer-x:1.4rem;--bs-card-spacer-y:1.4rem;
  --bs-card-cap-bg:transparent;box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.card.nb-card-lemon,.card.nb-card-pink,.card.nb-card-cyan,.card.nb-card-lime,.card.nb-card-orange,.card.nb-card-violet{--nb-muted:var(--nb-on-fill-muted);--bs-card-color:var(--nb-on-fill);--bs-heading-color:var(--nb-on-fill)}
.card.nb-card-lemon{--bs-card-bg:var(--nb-lemon)}.card.nb-card-pink{--bs-card-bg:var(--nb-pink)}.card.nb-card-cyan{--bs-card-bg:var(--nb-cyan)}
.card.nb-card-lime{--bs-card-bg:var(--nb-lime)}.card.nb-card-orange{--bs-card-bg:var(--nb-orange)}.card.nb-card-violet{--bs-card-bg:var(--nb-violet)}
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="nb-i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 3.5 10.5l7 3 3 7z"/><path d="m10.5 13.5 4-4"/></symbol>
  <symbol id="nb-i-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="1.5"/><path d="m16 10.5 5-3v9l-5-3z"/></symbol>
  <symbol id="nb-i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="1.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="nb-i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5L19.5 7"/></symbol>
  <symbol id="nb-i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></symbol>
  <symbol id="nb-i-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5 4.5 13.5H11L10 21.5l8.5-11H12z"/></symbol>
  <symbol id="nb-i-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></symbol>
  <symbol id="nb-i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h14M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
  <symbol id="nb-i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4.5L19.5 9 15 4.5 4 15.5z"/><path d="m12.5 7 4.5 4.5"/></symbol>
  <symbol id="nb-i-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="8.5" y="8.5" width="12" height="12" rx="1.5"/><path d="M15.5 8.5V4.5a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4"/></symbol>
  <symbol id="nb-i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></symbol>
  <symbol id="nb-i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5 6 4.5h12l2.5 9V19.5h-17zM3.5 13.5h5l1 2.5h5l1-2.5h5"/></symbol>
  <symbol id="nb-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15zM10 21h4"/></symbol>
  <symbol id="nb-i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.5V4h8.5l8.5 8.5-8 8z"/><circle cx="8" cy="8.5" r="1.4"/></symbol>
  <symbol id="nb-i-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-heart-fill" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M12 20s-8-4.8-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5C20 15.2 12 20 12 20z"/></symbol>
  <symbol id="nb-i-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V4M7.5 8.5 12 4l4.5 4.5M5 13v6.5h14V13"/></symbol>
  <symbol id="nb-i-bookmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 4h11v16L12 15.5 6.5 20z"/></symbol>
  <symbol id="nb-i-more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="4"/></symbol>
  <symbol id="nb-i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v15M4.5 12h15"/></symbol>
</svg>
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Buttons · pressing moves the button into its shadow</span><div class="flex flex-wrap items-center gap-[18px]">
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-lemon text-nb-on-fill" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg>Publish post</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-pink text-nb-on-fill" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-video"/></svg>Go live</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-cyan text-nb-on-fill" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-calendar"/></svg>Schedule</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-lime text-nb-on-fill" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-check"/></svg>Save draft</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-surface text-nb-ink" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-eye"/></svg>Preview</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-ink text-nb-paper" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-bolt"/></svg>Upgrade plan</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-blue text-nb-on-blue" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-link"/></svg>Copy link</button>
</div></section>
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Sizes and a disabled button</span><div class="flex flex-wrap items-center gap-[18px]">
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-14 px-[1.6rem] py-[.8rem] text-[1.15rem] bg-nb-lemon text-nb-on-fill" type="button">Start a project<svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-arrow-right"/></svg></button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-surface text-nb-ink" type="button">Add tag</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[38px] px-[.85rem] py-[.4rem] text-[.875rem] bg-nb-surface text-nb-ink" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-edit"/></svg>Edit</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[38px] px-[.85rem] py-[.4rem] text-[.875rem] bg-nb-pink text-nb-on-fill" type="button"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-copy"/></svg>Duplicate</button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none rounded-nb-sm min-h-[46px] px-[1.2rem] py-[.6rem] text-base bg-nb-surface text-nb-ink" type="button" disabled><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-x"/></svg>Sold out</button>
</div></section>
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Toggle buttons · on means pushed in, lime, a check and the word On</span><div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-5">
<label class="group relative flex"><input class="peer sr-only" type="checkbox" checked><span class="flex w-full min-w-[140px] cursor-pointer flex-col items-start gap-[.45rem] p-4 border-(length:--nb-bw) border-nb-line rounded-nb bg-nb-surface text-nb-ink shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-checked:bg-nb-lime peer-checked:text-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><span class="mb-[.2rem] grid size-[42px] place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-paper group-has-checked:border-nb-on-fill group-has-checked:bg-nb-on-fill group-has-checked:text-nb-lime"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-inbox"/></svg></span><span class="leading-[1.25] font-extrabold">Comments</span><span class="inline-flex items-center gap-[.3rem] rounded-full border-2 border-current px-2 py-[.12rem] text-[.72rem] leading-normal font-extrabold tracking-[.08em] uppercase" aria-hidden="true"><span class="size-2 rounded-full border-2 border-current group-has-checked:h-1.5 group-has-checked:w-2.5 group-has-checked:-translate-y-px group-has-checked:-rotate-45 group-has-checked:rounded-none group-has-checked:border-t-0 group-has-checked:border-r-0"></span><span class="group-has-checked:hidden">Off</span><span class="hidden group-has-checked:inline">On</span></span></span></label>
<label class="group relative flex"><input class="peer sr-only" type="checkbox"><span class="flex w-full min-w-[140px] cursor-pointer flex-col items-start gap-[.45rem] p-4 border-(length:--nb-bw) border-nb-line rounded-nb bg-nb-surface text-nb-ink shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-checked:bg-nb-lime peer-checked:text-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><span class="mb-[.2rem] grid size-[42px] place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-paper group-has-checked:border-nb-on-fill group-has-checked:bg-nb-on-fill group-has-checked:text-nb-lime"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-send"/></svg></span><span class="leading-[1.25] font-extrabold">Auto-post</span><span class="inline-flex items-center gap-[.3rem] rounded-full border-2 border-current px-2 py-[.12rem] text-[.72rem] leading-normal font-extrabold tracking-[.08em] uppercase" aria-hidden="true"><span class="size-2 rounded-full border-2 border-current group-has-checked:h-1.5 group-has-checked:w-2.5 group-has-checked:-translate-y-px group-has-checked:-rotate-45 group-has-checked:rounded-none group-has-checked:border-t-0 group-has-checked:border-r-0"></span><span class="group-has-checked:hidden">Off</span><span class="hidden group-has-checked:inline">On</span></span></span></label>
<label class="group relative flex"><input class="peer sr-only" type="checkbox" checked><span class="flex w-full min-w-[140px] cursor-pointer flex-col items-start gap-[.45rem] p-4 border-(length:--nb-bw) border-nb-line rounded-nb bg-nb-surface text-nb-ink shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-checked:bg-nb-lime peer-checked:text-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><span class="mb-[.2rem] grid size-[42px] place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-paper group-has-checked:border-nb-on-fill group-has-checked:bg-nb-on-fill group-has-checked:text-nb-lime"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-bell"/></svg></span><span class="leading-[1.25] font-extrabold">Notify fans</span><span class="inline-flex items-center gap-[.3rem] rounded-full border-2 border-current px-2 py-[.12rem] text-[.72rem] leading-normal font-extrabold tracking-[.08em] uppercase" aria-hidden="true"><span class="size-2 rounded-full border-2 border-current group-has-checked:h-1.5 group-has-checked:w-2.5 group-has-checked:-translate-y-px group-has-checked:-rotate-45 group-has-checked:rounded-none group-has-checked:border-t-0 group-has-checked:border-r-0"></span><span class="group-has-checked:hidden">Off</span><span class="hidden group-has-checked:inline">On</span></span></span></label>
<label class="group relative flex"><input class="peer sr-only" type="checkbox"><span class="flex w-full min-w-[140px] cursor-pointer flex-col items-start gap-[.45rem] p-4 border-(length:--nb-bw) border-nb-line rounded-nb bg-nb-surface text-nb-ink shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-checked:bg-nb-lime peer-checked:text-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><span class="mb-[.2rem] grid size-[42px] place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-paper group-has-checked:border-nb-on-fill group-has-checked:bg-nb-on-fill group-has-checked:text-nb-lime"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-tag"/></svg></span><span class="leading-[1.25] font-extrabold">Watermark</span><span class="inline-flex items-center gap-[.3rem] rounded-full border-2 border-current px-2 py-[.12rem] text-[.72rem] leading-normal font-extrabold tracking-[.08em] uppercase" aria-hidden="true"><span class="size-2 rounded-full border-2 border-current group-has-checked:h-1.5 group-has-checked:w-2.5 group-has-checked:-translate-y-px group-has-checked:-rotate-45 group-has-checked:rounded-none group-has-checked:border-t-0 group-has-checked:border-r-0"></span><span class="group-has-checked:hidden">Off</span><span class="hidden group-has-checked:inline">On</span></span></span></label>
</div></section>
<div class="grid grid-cols-1 gap-14 md:grid-cols-2">
<div><section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Switches</span><div class="relative border-(length:--nb-bw) border-nb-line rounded-nb p-[1.4rem] font-nb shadow-nb-lg bg-nb-surface text-nb-ink"><div class="grid gap-5">
<label class="group relative flex cursor-pointer items-center gap-[.8rem]"><input class="peer sr-only" type="checkbox" role="switch" checked><span class="min-w-0 flex-1 leading-[1.3] font-extrabold">Public profile<small class="mt-[.1rem] block text-[.85rem] font-medium text-nb-muted">Anyone can find your page</small></span><span class="min-w-[2.2em] text-right text-[.75rem] font-extrabold tracking-[.08em] uppercase after:content-['Off'] peer-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-9 w-[70px] flex-none border-(length:--nb-bw) border-nb-line rounded-nb-sm bg-nb-paper shadow-nb-sm transition-colors duration-[120ms] motion-reduce:transition-none before:absolute before:top-[3px] before:left-[3px] before:size-6 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:bg-nb-surface before:content-[''] before:transition-[translate] before:duration-150 motion-reduce:before:transition-none peer-checked:bg-nb-lime peer-checked:before:translate-x-[34px] peer-checked:before:border-nb-on-fill peer-checked:before:bg-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[4px] peer-focus-visible:outline-nb-focus" aria-hidden="true"></span></label>
<label class="group relative flex cursor-pointer items-center gap-[.8rem]"><input class="peer sr-only" type="checkbox" role="switch"><span class="min-w-0 flex-1 leading-[1.3] font-extrabold">Tip jar<small class="mt-[.1rem] block text-[.85rem] font-medium text-nb-muted">Fans can send one-off tips</small></span><span class="min-w-[2.2em] text-right text-[.75rem] font-extrabold tracking-[.08em] uppercase after:content-['Off'] peer-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-9 w-[70px] flex-none border-(length:--nb-bw) border-nb-line rounded-nb-sm bg-nb-paper shadow-nb-sm transition-colors duration-[120ms] motion-reduce:transition-none before:absolute before:top-[3px] before:left-[3px] before:size-6 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:bg-nb-surface before:content-[''] before:transition-[translate] before:duration-150 motion-reduce:before:transition-none peer-checked:bg-nb-lime peer-checked:before:translate-x-[34px] peer-checked:before:border-nb-on-fill peer-checked:before:bg-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[4px] peer-focus-visible:outline-nb-focus" aria-hidden="true"></span></label>
<label class="group relative flex cursor-pointer items-center gap-[.8rem]"><input class="peer sr-only" type="checkbox" role="switch" checked><span class="min-w-0 flex-1 leading-[1.3] font-extrabold">Weekly digest<small class="mt-[.1rem] block text-[.85rem] font-medium text-nb-muted">Mondays at 9:00</small></span><span class="min-w-[2.2em] text-right text-[.75rem] font-extrabold tracking-[.08em] uppercase after:content-['Off'] peer-checked:after:content-['On']" aria-hidden="true"></span><span class="relative h-9 w-[70px] flex-none border-(length:--nb-bw) border-nb-line rounded-nb-sm bg-nb-paper shadow-nb-sm transition-colors duration-[120ms] motion-reduce:transition-none before:absolute before:top-[3px] before:left-[3px] before:size-6 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:bg-nb-surface before:content-[''] before:transition-[translate] before:duration-150 motion-reduce:before:transition-none peer-checked:bg-nb-lime peer-checked:before:translate-x-[34px] peer-checked:before:border-nb-on-fill peer-checked:before:bg-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[4px] peer-focus-visible:outline-nb-focus" aria-hidden="true"></span></label>
</div></div></section></div>
<div><section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Icon buttons and a favourite toggle</span><div class="flex flex-wrap items-center gap-[18px]">
<label class="group relative inline-flex"><input class="peer sr-only" type="checkbox" aria-label="Favourite" checked><span class="grid size-12 cursor-pointer place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-surface text-nb-ink shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-checked:bg-nb-pink peer-checked:text-nb-on-fill peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><svg class="size-[22px] shrink-0 group-has-checked:hidden" aria-hidden="true" focusable="false"><use href="#nb-i-heart"/></svg><svg class="hidden size-[22px] shrink-0 group-has-checked:block" aria-hidden="true" focusable="false"><use href="#nb-i-heart-fill"/></svg></span></label>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-full bg-nb-surface text-nb-ink" type="button" aria-label="Share"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-share"/></svg></button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-full bg-nb-surface text-nb-ink" type="button" aria-label="Save for later"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-bookmark"/></svg></button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-nb-sm bg-nb-surface text-nb-ink" type="button" aria-label="More options"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-more"/></svg></button>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-full bg-nb-lemon text-nb-on-fill" type="button" aria-label="New post"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-plus"/></svg></button>
</div></section>
<section class="mt-12"><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Segmented control</span><fieldset class="m-0 min-w-0 border-0 p-0"><legend class="mb-[.55rem] p-0 font-extrabold">Post visibility</legend><div class="flex w-fit max-w-full flex-wrap overflow-hidden border-(length:--nb-bw) border-nb-line rounded-nb-sm bg-nb-surface shadow-nb"><label class="relative flex-auto"><input class="peer sr-only" type="radio" name="vis" value="public"><span class="flex min-h-11 cursor-pointer items-center justify-center gap-[.4rem] px-4 py-[.45rem] font-bold text-nb-ink peer-checked:bg-nb-lemon peer-checked:text-nb-on-fill peer-checked:before:h-[7px] peer-checked:before:w-3 peer-checked:before:-translate-y-0.5 peer-checked:before:-rotate-45 peer-checked:before:border-b-3 peer-checked:before:border-l-3 peer-checked:before:border-current peer-checked:before:content-[''] peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[-7px] peer-focus-visible:outline-nb-focus">Public</span></label><label class="relative flex-auto border-l-(length:--nb-bw) border-nb-line"><input class="peer sr-only" type="radio" name="vis" value="members" checked><span class="flex min-h-11 cursor-pointer items-center justify-center gap-[.4rem] px-4 py-[.45rem] font-bold text-nb-ink peer-checked:bg-nb-lemon peer-checked:text-nb-on-fill peer-checked:before:h-[7px] peer-checked:before:w-3 peer-checked:before:-translate-y-0.5 peer-checked:before:-rotate-45 peer-checked:before:border-b-3 peer-checked:before:border-l-3 peer-checked:before:border-current peer-checked:before:content-[''] peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[-7px] peer-focus-visible:outline-nb-focus">Members</span></label><label class="relative flex-auto border-l-(length:--nb-bw) border-nb-line"><input class="peer sr-only" type="radio" name="vis" value="draft"><span class="flex min-h-11 cursor-pointer items-center justify-center gap-[.4rem] px-4 py-[.45rem] font-bold text-nb-ink peer-checked:bg-nb-lemon peer-checked:text-nb-on-fill peer-checked:before:h-[7px] peer-checked:before:w-3 peer-checked:before:-translate-y-0.5 peer-checked:before:-rotate-45 peer-checked:before:border-b-3 peer-checked:before:border-l-3 peer-checked:before:border-current peer-checked:before:content-[''] peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[-7px] peer-focus-visible:outline-nb-focus">Draft</span></label></div></fieldset></section></div>
</div>
CSS 
/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* The tokens above, exposed as Tailwind utilities: bg-nb-paper, bg-nb-lemon, text-nb-ink, border-nb-line,
   shadow-nb, shadow-nb-sm, shadow-nb-lg, rounded-nb, rounded-nb-sm, font-nb, font-nb-display, outline-nb-focus… */
@theme inline {
  --color-nb-paper: var(--nb-paper); --color-nb-surface: var(--nb-surface); --color-nb-ink: var(--nb-ink);
  --color-nb-muted: var(--nb-muted); --color-nb-line: var(--nb-line); --color-nb-focus: var(--nb-focus);
  --color-nb-on-fill: var(--nb-on-fill); --color-nb-on-fill-muted: var(--nb-on-fill-muted);
  --color-nb-lemon: var(--nb-lemon); --color-nb-pink: var(--nb-pink); --color-nb-cyan: var(--nb-cyan); --color-nb-lime: var(--nb-lime);
  --color-nb-orange: var(--nb-orange); --color-nb-violet: var(--nb-violet); --color-nb-red: var(--nb-red);
  --color-nb-blue: var(--nb-blue); --color-nb-on-blue: var(--nb-on-blue); --color-nb-danger: var(--nb-danger);
  --shadow-nb: var(--nb-shadow); --shadow-nb-sm: var(--nb-shadow-sm); --shadow-nb-lg: var(--nb-shadow-lg); --shadow-nb-hover: var(--nb-shadow-hover);
  --radius-nb: var(--nb-radius); --radius-nb-sm: var(--nb-radius-sm);
  --font-nb: var(--nb-font); --font-nb-display: var(--nb-font-display);
}
/* Starburst sticker outline (Tailwind has no clip-path utility) */
@utility clip-nb-burst {
  clip-path: polygon(50% 0%,59.1% 16.1%,75% 6.7%,74.8% 25.2%,93.3% 25%,83.9% 40.9%,100% 50%,83.9% 59.1%,93.3% 75%,74.8% 74.8%,75% 93.3%,59.1% 83.9%,50% 100%,40.9% 83.9%,25% 93.3%,25.2% 74.8%,6.7% 75%,16.1% 59.1%,0% 50%,16.1% 40.9%,6.7% 25%,25.2% 25.2%,25% 6.7%,40.9% 16.1%);
}

About this set

The controls a neobrutalist interface is built from: thick ink borders, hard offset shadows and flat lemon, pink, cyan, lime and blue fills on cream paper. Buttons come in seven fills, three sizes and a disabled state with a dashed border. Hovering lifts a button by two pixels and its shadow grows; pressing moves it into its own shadow, so the click feels physical. Toggle tiles for comments, auto-posting, notifications and a watermark are visually hidden checkboxes behind a face that, when on, is pushed into its shadow, fills lime, turns its icon into a dark disc and swaps a hollow dot and the word Off for a check and the word On. Switch rows pair a label and a hint with a square knob, a lime track and an On or Off word. Round and square icon buttons sit beside a favourite toggle whose outline heart becomes a solid one, and a segmented control picks post visibility from a radio group. Use the buttons for any call to action and the tiles where several settings need to be scanned at a glance. Every colour, border width, shadow offset and radius comes from the shared –nb-* tokens at the top of the file.

What’s included

  • Seven fills, three sizes and a dashed disabled state
  • Pressed state moves the control into its hard shadow
  • Toggle tiles that say On or Off and show a check, not only a colour
  • Switch rows with role="switch" and a visible state word
  • Segmented control built from a native radio group

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. Keyboard focus is a 3px dashed blue outline set apart from the black shadow. Fills keep dark text at 6.8:1 or more and white text appears only on the blue fill, at 6.8:1. Transitions switch off under prefers-reduced-motion.

Customise it

Change --nb-ink, --nb-paper, --nb-bw, --nb-shadow-x, --nb-shadow-y, --nb-radius and the palette tokens such as --nb-lemon at the top. Bootstrap maps them onto --bs-btn-* through .btn-nb and .btn-nb-lemon, and Tailwind exposes them as bg-nb-lemon, shadow-nb, rounded-nb-sm and outline-nb-focus.