/* ── 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}
/* 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}
/* Navbar: the current link is filled, outlined and lifted on a small shadow, with aria-current */
.nb-navbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.75rem 1rem;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-brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--nb-ink);font:900 1.25rem/1 var(--nb-font-display);text-decoration:none}
.nb-brand__mark{display:grid;place-items:center;width:38px;height:38px;border:var(--nb-border);border-radius:8px;background:var(--nb-lemon);color:var(--nb-on-fill);box-shadow:var(--nb-shadow-sm);rotate:-6deg}
.nb-brand:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px;border-radius:4px}
.nb-navbar__links{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 auto 0 0;padding:0;list-style:none}
.nb-navlink{display:block;padding:.45rem .8rem;border:var(--nb-bw) solid transparent;border-radius:var(--nb-radius-sm);color:var(--nb-ink);font-weight:700;text-decoration:none}
.nb-navlink:hover{border-color:var(--nb-line)}
.nb-navlink[aria-current="page"]{border-color:var(--nb-line);background:var(--nb-lemon);color:var(--nb-on-fill);box-shadow:var(--nb-shadow-sm)}
.nb-navlink:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px}
.nb-navbar__end{display:flex;align-items:center;gap:12px}
@media (max-width:680px){.nb-navbar__links{order:3;width:100%;margin:0}}
/* Breadcrumb */
.nb-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:0;list-style:none;font-weight:700}
.nb-crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--nb-muted)}
.nb-crumbs a{color:var(--nb-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-crumbs a:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px}
.nb-crumbs [aria-current="page"]{padding:.15rem .55rem;border:2px solid var(--nb-line);border-radius:5px;background:var(--nb-lime);color:var(--nb-on-fill)}
/* Sidebar: grouped links; the current one is cyan, outlined and marked with an arrow */
.nb-side{width:100%;max-width:300px;padding:1rem;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-side__group+.nb-side__group{margin-top:1rem;padding-top:1rem;border-top:var(--nb-border)}
.nb-side__heading{margin:0 0 .45rem;padding:0 .65rem;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nb-muted)}
.nb-side__list{display:grid;gap:.3rem;margin:0;padding:0;list-style:none}
.nb-side__link{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;border:var(--nb-bw) solid transparent;border-radius:var(--nb-radius-sm);color:var(--nb-ink);font-weight:700;text-decoration:none}
.nb-side__link:hover{border-color:var(--nb-line)}
.nb-side__link[aria-current="page"]{border-color:var(--nb-line);background:var(--nb-cyan);color:var(--nb-on-fill);box-shadow:var(--nb-shadow-sm)}
.nb-side__link[aria-current="page"]::after{content:"";margin-left:auto;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent currentColor}
.nb-side__link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px}
.nb-count{margin-left:auto;min-width:1.7rem;padding:.05rem .4rem;border:2px solid var(--nb-line);border-radius:999px;background:var(--nb-pink);color:var(--nb-on-fill);font-size:.75rem;font-weight:800;text-align:center}
/* Tabs: the selected tab is pushed into its shadow, filled lemon and marked with a square; ARIA tabs with arrow keys */
.nb-tablist{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem}
.nb-tab{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem 1rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-surface);color:var(--nb-ink);
font:700 .95rem/1.2 var(--nb-font);box-shadow:var(--nb-shadow);cursor:pointer;transition:translate .12s,box-shadow .12s}
.nb-tab[aria-selected="true"]{translate:var(--nb-press);box-shadow:none;background:var(--nb-lemon);color:var(--nb-on-fill)}
.nb-tab[aria-selected="true"]::before{content:"";width:9px;height:9px;background:currentColor}
.nb-tab:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:5px}
.nb-tab__count{padding:0 .4rem;border:2px solid currentColor;border-radius:999px;font-size:.75rem;font-weight:800}
.nb-tabpanel:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px}
.nb-list{display:grid;margin:0;padding:0;list-style:none}
.nb-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;font-weight:700}
.nb-list li+li{border-top:2px solid var(--nb-line)}
.nb-list small{display:block;font-weight:500;color:var(--nb-muted)}
.nb-badge{flex:none;padding:.1rem .5rem;border:2px solid var(--nb-line);border-radius:5px;background:var(--nb-lime);color:var(--nb-on-fill);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.nb-badge--lemon{background:var(--nb-lemon)}.nb-badge--cyan{background:var(--nb-cyan)}.nb-badge--pink{background:var(--nb-pink)}.nb-badge--paper{background:var(--nb-paper);color:var(--nb-ink)}
/* Pagination: square buttons; the current page is ink, pressed into its shadow, with aria-current */
.nb-pager{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0;padding:0;list-style:none}
.nb-pager a{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:44px;height:44px;padding:0 .75rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);
background:var(--nb-surface);color:var(--nb-ink);font:800 .95rem/1 var(--nb-font);text-decoration:none;box-shadow:var(--nb-shadow-sm);transition:translate .12s,box-shadow .12s}
.nb-pager a:hover{translate:-1px -1px;box-shadow:var(--nb-shadow)}
.nb-pager a:active{translate:var(--nb-press-sm);box-shadow:none}
.nb-pager a[aria-current="page"]{translate:var(--nb-press-sm);box-shadow:none;background:var(--nb-ink);color:var(--nb-paper);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.nb-pager a:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px}
.nb-pager__gap{padding:0 .2rem;font-weight:800}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}
JavaScript
// Tabs: click or arrow keys / Home / End select a tab; only the selected tab is in the Tab order
document.querySelectorAll('[role="tablist"]').forEach(function (list) {
var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
function select(tab, focus) {
tabs.forEach(function (t) {
var on = t === tab;
t.setAttribute('aria-selected', on);
t.tabIndex = on ? 0 : -1;
document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
});
if (focus) tab.focus();
}
tabs.forEach(function (t, i) {
t.addEventListener('click', function () { select(t); });
t.addEventListener('keydown', function (e) {
var n = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
if (n === undefined) return;
e.preventDefault();
select(tabs[(n + tabs.length) % tabs.length], true);
});
});
});
/* ── 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%);
}
JavaScript
// Tabs: click or arrow keys / Home / End select a tab; only the selected tab is in the Tab order
document.querySelectorAll('[role="tablist"]').forEach(function (list) {
var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
function select(tab, focus) {
tabs.forEach(function (t) {
var on = t === tab;
t.setAttribute('aria-selected', on);
t.tabIndex = on ? 0 : -1;
document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
});
if (focus) tab.focus();
}
tabs.forEach(function (t, i) {
t.addEventListener('click', function () { select(t); });
t.addEventListener('keydown', function (e) {
var n = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
if (n === undefined) return;
e.preventDefault();
select(tabs[(n + tabs.length) % tabs.length], true);
});
});
});
About this set
A navbar, a breadcrumb, a sidebar, tabs and pagination that share one rule for where you are: the current item gains a border and a fill, and either lifts onto a small shadow or is pushed into it, so it never relies on colour alone. The navbar carries a tilted logo mark, four links with a lemon current page, a search icon button and a Start free button, and moves its links onto their own row on narrow screens. The breadcrumb underlines its links and boxes the current page in lime. The sidebar groups studio and account links, marks the current one in cyan with an arrow, and shows an unread count as text. The tabs switch between published, draft and scheduled posts; the selected tab is pushed into its shadow, filled lemon and marked with a square, and the ARIA tabs pattern lets arrow keys, Home and End move between them. Pagination uses square page buttons, an ink current page with an underline, and named previous and next links. The plain and Tailwind tabs use about twenty lines of vanilla JavaScript; the Bootstrap version uses Bootstrap’s own tab plugin.
What’s included
Current item shown by a border, a fill and a change of shadow
aria-current on the navbar, breadcrumb, sidebar and pagination
ARIA tabs with arrow key, Home and End support
Pagination with named previous, next and page links
Bootstrap version on .navbar, .breadcrumb, .nav, .pagination and the tab plugin
Accessibility
Each navigation region is a nav element with its own label, the current page is marked with aria-current="page", and page links read as Page 3 rather than a bare number. Tabs use role="tablist", "tab" and "tabpanel" with aria-selected, aria-controls and a roving tabindex. Every link, tab and panel shows a 3px dashed focus outline, and transitions stop under prefers-reduced-motion.
Customise it
Edit the --nb-* tokens for colour, border and shadow. In Bootstrap the rules set --bs-navbar-*, --bs-breadcrumb-* and --bs-pagination-* from the tokens; in Tailwind the current state uses aria-[current=page]: and aria-selected: variants with bg-nb-lemon, shadow-nb-sm and [translate:var(--nb-press)].
