/* =============================================================================
WILD BOYS DESIGN SYSTEM
wildboys.tokens.css · v1.3 · 11 September 2026
v1.3 Ingredients and allergens are never hidden behind a tab, an
accordion or a separate page. They sit directly under the product,
open, on first load. See 13c.
v1.2 Range split into two tiers. Heat is a property of the TIER, not of
the whole catalogue: the Hot range is identical scotch bonnet loading
across every bottle, and a No Heat tier carries none at all.
v1.1 Removed the per product heat rating. All four sauces carry the same
chilli loading, so rating one hotter than another would be false.
Heat is now stated once for the range; flavour tags differentiate.
Added the product image frame, sized for photography to drop in.
The single source of truth for colour, type, space, motion and the small
set of components that repeat across the site.
HOW TO USE
1. Load this file BEFORE styles.css in every page .
2. Never write a raw hex value, pixel size or timing in a page again.
Use the tokens. If a token does not exist for what you need, add it
here rather than inventing a one-off value in the page.
WHY THE PALETTE IS WHAT IT IS
Sampled from the brand as it already exists, not invented. The logo is
effectively pure black. The stall sign uses black, near-white and a
single scotch bonnet orange-red, #E0431F. Every sauce in the Hot range is
built on Red Scotch Bonnet, so that one colour is the honest accent for the
brand. It is used sparingly and it always means heat, action or now,
which is why it never appears on a No Heat product.
============================================================================= */
/* -----------------------------------------------------------------------------
1. TYPEFACES
Load in before this file:
-------------------------------------------------------------------------- */
:root {
/* ---- 2. COLOUR ---------------------------------------------------------
The site is deliberately one visual world: black. This is not a dark
mode of a light design, it is the design. Do not build a light variant.
---------------------------------------------------------------------- */
/* Grounds, darkest to lightest. Raise a surface only to separate it. */
--wb-black: #000000; /* page ground. true black, as the logo is */
--wb-surface-1: #0B0B0B; /* cards, panels */
--wb-surface-2: #141414; /* raised within a card, inputs */
--wb-surface-3: #1C1C1C; /* hover state of a raised surface */
/* Ink */
--wb-bone: #FDFDFD; /* primary text and headings */
--wb-ash: #8A8A8A; /* secondary text, descriptions */
--wb-ash-dim: #808080; /* captions, disabled, legal small print. */
/* 4.98:1 on the black ground. Was #5A5A5A */
/* at 2.85:1, which failed WCAG AA. */
/* Lines. Hairlines do the structural work in a monochrome design. */
--wb-line: #262626;
--wb-line-soft: #191919;
--wb-line-strong: #3A3A3A;
/* The one accent. Sampled from the stall sign. Means heat, action or now. */
--wb-heat: #E0431F;
--wb-heat-hover: #F04F29; /* lifted, for interactive hover */
--wb-heat-press: #B8351696; /* not for text. press states and washes */
--wb-heat-ink: #FFFFFF; /* text placed on a heat fill */
--wb-heat-fill: #C93A1A; /* filled buttons only. White on this is */
--wb-heat-fill-hv: #D8401D; /* 5.12:1, hover 4.62:1. --wb-heat itself */
/* stays #E0431F for rules, labels, prices. */
/* Heat ramp. One hue at rising intensity, used ONCE to place the whole
tier on a comparative scale. Never used to rate one sauce against
another: within a tier the chilli loading is identical. See 13. */
--wb-heat-1: #7A2712;
--wb-heat-2: #A33318;
--wb-heat-3: #C73C1B;
--wb-heat-4: #E0431F;
--wb-heat-5: #FF5C30;
/* Status. Kept monochrome on purpose so heat stays the only colour that
shouts. Availability is communicated by weight and a small mark, not by
a traffic light palette, which would cheapen the page. */
--wb-in-stock: var(--wb-bone);
--wb-low-stock: var(--wb-heat);
--wb-out-stock: var(--wb-ash-dim);
/* Focus. Must stay visible against black for keyboard users. */
--wb-focus: #FFFFFF;
/* ---- 3. TYPE -----------------------------------------------------------
Three roles, no more.
Display Archivo Black headings, the wordmark, prices, numerals
Body Archivo everything a person reads in sentences
Data IBM Plex Mono labels, ingredients, allergens, SKUs, specs
Archivo carries wide heavy capitals well, which is what the stall sign
and the existing site already do with letter spacing. The mono face is
what gives ingredient and allergen blocks the feel of a kitchen spec
sheet rather than marketing copy.
---------------------------------------------------------------------- */
--wb-font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
--wb-font-body: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
--wb-font-data: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
/* Type scale. Stay on it. A size not listed here does not exist. */
--wb-text-3xs: 11px;
--wb-text-2xs: 12px;
--wb-text-xs: 14px;
--wb-text-sm: 15px;
--wb-text-base: 17px;
--wb-text-lg: 19px;
--wb-text-xl: 23px;
--wb-text-2xl: 30px;
--wb-text-3xl: 40px;
--wb-text-4xl: 56px;
--wb-text-5xl: 76px;
--wb-text-6xl: 104px;
/* Fluid display sizes for hero and section openers. */
--wb-display-hero: clamp(48px, 10vw, 128px);
--wb-display-sec: clamp(30px, 5vw, 52px);
--wb-leading-tight: 1.02; /* display headings */
--wb-leading-snug: 1.25; /* subheadings, card titles */
--wb-leading-body: 1.65; /* running text */
/* Letter spacing. Wide capitals are a core part of the brand voice. */
--wb-tracking-mega: 0.28em; /* small uppercase labels and eyebrows */
--wb-tracking-wide: 0.16em; /* nav, buttons, small caps */
--wb-tracking-tight: -0.01em;/* large display only */
--wb-measure: 66ch; /* maximum width of running text */
/* ---- 4. SPACE ----------------------------------------------------------
A 4px base. Layout uses flex or grid with gap, never stacked margins.
---------------------------------------------------------------------- */
--wb-space-1: 4px;
--wb-space-2: 8px;
--wb-space-3: 12px;
--wb-space-4: 16px;
--wb-space-5: 24px;
--wb-space-6: 32px;
--wb-space-7: 48px;
--wb-space-8: 64px;
--wb-space-9: 96px;
--wb-space-10: 128px;
/* Vertical rhythm between major page sections. */
--wb-section: clamp(64px, 10vw, 128px);
--wb-section-tight: clamp(48px, 7vw, 88px);
/* ---- 5. LAYOUT --------------------------------------------------------- */
--wb-container: 1200px; /* outer maximum */
--wb-container-rd: 860px; /* reading width for story and legal pages */
--wb-gutter: 24px; /* minimum side gutter at every width */
/* Radius. Used sparingly. The brand is square and blunt.
Anything that is not a control or an image stays sharp. */
--wb-radius-0: 0px;
--wb-radius-sm: 2px;
--wb-radius-md: 4px;
--wb-radius-pill: 999px;
/* ---- 6. MOTION ---------------------------------------------------------
Fast, mechanical, never bouncy. Movement should feel like a switch
being thrown, not like something floating.
---------------------------------------------------------------------- */
--wb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--wb-ease-in: cubic-bezier(0.6, 0, 0.9, 0.4);
--wb-dur-fast: 140ms;
--wb-dur-base: 220ms;
--wb-dur-slow: 380ms;
/* ---- 7. ELEVATION ------------------------------------------------------
On true black a shadow is nearly invisible, so separation is done with
lines first and shadow only for things that genuinely float.
---------------------------------------------------------------------- */
--wb-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.85);
--wb-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.92);
--wb-z-nav: 50;
--wb-z-basket: 60;
--wb-z-overlay: 90;
--wb-z-modal: 100;
}
/* =============================================================================
8. BASE
============================================================================= */
.wb-body {
background: var(--wb-black);
color: var(--wb-bone);
font-family: var(--wb-font-body);
font-size: var(--wb-text-base);
line-height: var(--wb-leading-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wb-container {
width: 100%;
max-width: var(--wb-container);
margin-inline: auto;
padding-inline: var(--wb-gutter);
}
.wb-container--read { max-width: var(--wb-container-rd); }
.wb-section { padding-block: var(--wb-section); }
/* Every focusable element gets a visible ring. Non-negotiable. */
.wb-body :focus-visible {
outline: 2px solid var(--wb-focus);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.wb-body *,
.wb-body *::before,
.wb-body *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* =============================================================================
9. TYPE PRIMITIVES
============================================================================= */
.wb-display {
font-family: var(--wb-font-display);
font-size: var(--wb-display-hero);
line-height: var(--wb-leading-tight);
letter-spacing: var(--wb-tracking-tight);
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
.wb-h2 {
font-family: var(--wb-font-display);
font-size: var(--wb-display-sec);
line-height: var(--wb-leading-tight);
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
.wb-h3 {
font-family: var(--wb-font-display);
font-size: var(--wb-text-xl);
line-height: var(--wb-leading-snug);
text-transform: uppercase;
margin: 0;
}
/* The small wide capital label. The most recognisable piece of the voice. */
.wb-label {
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
font-weight: 500;
letter-spacing: var(--wb-tracking-mega);
text-transform: uppercase;
color: var(--wb-ash);
margin: 0;
}
.wb-label--heat { color: var(--wb-heat); }
.wb-lede {
font-size: var(--wb-text-lg);
color: var(--wb-ash);
max-width: var(--wb-measure);
margin: 0;
}
.wb-prose { max-width: var(--wb-measure); }
.wb-prose p { margin: 0 0 var(--wb-space-5); }
.wb-prose p:last-child { margin-bottom: 0; }
/* Prices, weights, counts. Always aligned, always display face. */
.wb-numeral {
font-family: var(--wb-font-display);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* Ingredients, allergens, batch codes. Reads as a kitchen spec. */
.wb-spec {
font-family: var(--wb-font-data);
font-size: var(--wb-text-xs);
line-height: 1.75;
color: var(--wb-ash);
}
/* =============================================================================
10. RULES AND DIVIDERS
In a monochrome design the hairline is the main structural device.
============================================================================= */
.wb-rule { height: 1px; background: var(--wb-line); border: 0; margin: 0; }
.wb-rule--soft { background: var(--wb-line-soft); }
.wb-rule--heat { height: 2px; background: var(--wb-heat); width: 48px; }
/* =============================================================================
11. BUTTONS
One primary per view. The heat fill is the loudest thing on any page,
so it is reserved for the action that makes money.
============================================================================= */
.wb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wb-space-2);
font-family: var(--wb-font-body);
font-size: var(--wb-text-2xs);
font-weight: 700;
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
padding: 14px 26px;
border: 1px solid transparent;
border-radius: var(--wb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: background var(--wb-dur-fast) var(--wb-ease),
border-color var(--wb-dur-fast) var(--wb-ease),
color var(--wb-dur-fast) var(--wb-ease),
transform var(--wb-dur-fast) var(--wb-ease);
}
.wb-btn:active { transform: translateY(1px); }
.wb-btn--primary {
background: var(--wb-heat);
color: var(--wb-heat-ink);
}
.wb-btn--primary:hover { background: var(--wb-heat-hover); }
.wb-btn--secondary {
background: transparent;
color: var(--wb-bone);
border-color: var(--wb-line-strong);
}
.wb-btn--secondary:hover {
border-color: var(--wb-bone);
background: var(--wb-surface-2);
}
.wb-btn--ghost {
background: transparent;
color: var(--wb-ash);
padding-inline: 0;
}
.wb-btn--ghost:hover { color: var(--wb-bone); }
.wb-btn[disabled],
.wb-btn[aria-disabled="true"] {
background: var(--wb-surface-2);
color: var(--wb-ash-dim);
border-color: var(--wb-line);
cursor: not-allowed;
transform: none;
}
/* =============================================================================
12. SURFACES
Not everything is a card. A border alone is usually enough.
============================================================================= */
.wb-panel {
background: var(--wb-surface-1);
border: 1px solid var(--wb-line);
border-radius: var(--wb-radius-0);
padding: var(--wb-space-6);
}
.wb-panel--flush { padding: 0; overflow: hidden; }
/* A grid of panels sharing hairlines rather than each drawing its own box.
This is the house look. Use it for product grids and spec tables. */
.wb-grid-hairline {
display: grid;
gap: 1px;
background: var(--wb-line);
border: 1px solid var(--wb-line);
}
.wb-grid-hairline > * { background: var(--wb-surface-1); }
/* =============================================================================
13. HEAT AND FLAVOUR
IMPORTANT DESIGN DECISION, 11 Sep 2026.
There is deliberately NO per product heat rating.
Every sauce in the range carries the same chilli loading: 200g of fresh
Red Scotch Bonnet per 10 bottles, so 20g per 200ml bottle, roughly one to two
scotch bonnets each. Rating one sauce hotter than another would be inventing a
difference that does not exist, and a Scoville figure would be an
unverified claim printed on food. Neither is acceptable.
So heat is stated ONCE PER TIER, as a position rather than a number. What
separates sauces within a tier is flavour, and that is what the product
components compare.
TWO TIERS, decided 11 Sep 2026:
HOT Burnt Finger, Mango, Garlic Monster, BBQ Devil
20g fresh Red Scotch Bonnet per 200ml. Upper end of hot.
Heat mark: marks 3 and 4 lit.
NO HEAT Smoked BBQ
The same smoke and depth as BBQ Devil with no chilli at all,
made for the customer who loves the flavour and not the burn.
Heat mark: no marks lit, labelled NO HEAT.
A tier is never implied. Every product page and every card states which
tier it belongs to, because the whole point of the No Heat tier is that a
customer must never buy one expecting the other.
============================================================================= */
/* The tier heat mark. Used once on a product page and once per tier on the
range page. Never as a comparison between sauces inside a tier.
Markup:
Hot. The upper end of it.
*/
.wb-heatmark { display: flex; flex-direction: column; gap: var(--wb-space-3); }
.wb-heatmark__scale { display: inline-flex; gap: 4px; align-items: center; }
.wb-heatmark__scale i {
width: 14px;
height: 14px;
background: var(--wb-line-strong);
transform: rotate(45deg);
display: block;
}
.wb-heatmark__scale i.on:nth-child(1) { background: var(--wb-heat-1); }
.wb-heatmark__scale i.on:nth-child(2) { background: var(--wb-heat-2); }
.wb-heatmark__scale i.on:nth-child(3) { background: var(--wb-heat-3); }
.wb-heatmark__scale i.on:nth-child(4) { background: var(--wb-heat-4); }
.wb-heatmark__scale i.on:nth-child(5) { background: var(--wb-heat-5); }
.wb-heatmark__text {
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
color: var(--wb-ash);
}
/* No Heat tier. Every mark stays unlit and the label says so outright.
Deliberately monochrome: the accent means heat, so it cannot appear here. */
.wb-heatmark--none .wb-heatmark__scale i { background: var(--wb-line); }
.wb-heatmark--none .wb-heatmark__text { color: var(--wb-ash-dim); }
/* Tier badge. Sits on every product card and product page, never optional. */
.wb-tier {
display: inline-flex;
align-items: center;
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
padding: 4px 9px;
border: 1px solid currentColor;
border-radius: var(--wb-radius-sm);
}
.wb-tier--hot { color: var(--wb-heat); }
.wb-tier--none { color: var(--wb-ash); }
/* Flavour tags. THE differentiator between sauces. Three per product,
always three, always in the same order: character, then note, then use. */
.wb-tags { display: flex; flex-wrap: wrap; gap: var(--wb-space-2); }
.wb-tag {
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
color: var(--wb-ash);
border: 1px solid var(--wb-line);
padding: 5px 10px;
border-radius: var(--wb-radius-sm);
white-space: nowrap;
}
.wb-tag--lead { color: var(--wb-bone); border-color: var(--wb-line-strong); }
/* =============================================================================
13b. PRODUCT IMAGERY
Built so new photography drops straight in without touching any layout.
Ratio 4:5 portrait for product stills, 3:2 for lifestyle and food
Naming -bottle.webp, -bottle@2x.webp, -food.webp
Ground Shoot on black or near black so the bottle carries its own edge
Export webp, quality 82, longest edge 1600px for product, 2400 lifestyle
Until the new stills arrive the existing images sit in the same frames,
so swapping them is a file replacement and nothing more.
============================================================================= */
.wb-figure {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 5;
max-width: 100%;
overflow: hidden;
background: var(--wb-surface-2);
}
.wb-figure--wide { aspect-ratio: 3 / 2; }
.wb-figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--wb-dur-slow) var(--wb-ease);
}
.wb-figure--zoom:hover img { transform: scale(1.03); }
/* Marks a frame holding a placeholder rather than final photography, so
interim images are never mistaken for the finished thing. */
.wb-figure--interim::after {
content: "INTERIM IMAGE";
position: absolute;
left: 0;
bottom: 0;
font-family: var(--wb-font-data);
font-size: 9px;
letter-spacing: var(--wb-tracking-wide);
color: var(--wb-ash-dim);
background: var(--wb-black);
padding: 4px 8px;
}
/* =============================================================================
13c. INGREDIENTS AND ALLERGENS · NON NEGOTIABLE PLACEMENT
These sit DIRECTLY UNDER the product they belong to, expanded, visible on
first load. Never behind a tab, an accordion, a "more info" link or a
separate page.
This is not a style preference. A customer must never be able to say they
did not see the allergens because they were hidden. Hiding them behind one
click is the difference between information being available and being
given, and on food that distinction matters.
Rules:
- No JavaScript may collapse this block. If the script fails, the
allergens must still be on screen.
- The allergen line comes FIRST, above the full ingredients list.
- Allergens are emphasised in the list itself, in caps, matching the
printed label exactly. The bottle and the page must never disagree.
- It renders identically on phone and desktop. No truncation, no
"read more", no fixed height with overflow hidden.
============================================================================= */
.wb-ingredients {
display: flex;
flex-direction: column;
gap: var(--wb-space-4);
padding: var(--wb-space-5) 0 0;
border-top: 1px solid var(--wb-line);
}
.wb-ingredients__allergens {
font-family: var(--wb-font-data);
font-size: var(--wb-text-xs);
line-height: 1.7;
color: var(--wb-bone);
border-left: 2px solid var(--wb-heat);
padding-left: var(--wb-space-4);
}
.wb-ingredients__list {
font-family: var(--wb-font-data);
font-size: var(--wb-text-xs);
line-height: 1.8;
color: var(--wb-ash);
max-width: var(--wb-measure);
}
/* Allergens inside the list. Caps plus weight, never colour alone, so it
still reads for anyone who cannot distinguish the accent. */
.wb-ingredients__list b {
color: var(--wb-bone);
font-weight: 600;
text-transform: uppercase;
}
/* =============================================================================
14. STOCK STATUS
Availability reads at a glance without a traffic light palette.
============================================================================= */
.wb-stock {
display: inline-flex;
align-items: center;
gap: var(--wb-space-2);
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
}
.wb-stock::before {
content: "";
width: 7px;
height: 7px;
background: currentColor;
border-radius: var(--wb-radius-pill);
flex: none;
}
.wb-stock--in { color: var(--wb-in-stock); }
.wb-stock--low { color: var(--wb-low-stock); }
.wb-stock--out { color: var(--wb-out-stock); }
.wb-stock--out::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* =============================================================================
15. FORM CONTROLS
============================================================================= */
.wb-input {
width: 100%;
background: var(--wb-surface-2);
border: 1px solid var(--wb-line);
border-radius: var(--wb-radius-sm);
color: var(--wb-bone);
font-family: var(--wb-font-body);
font-size: var(--wb-text-sm);
padding: 13px 15px;
transition: border-color var(--wb-dur-fast) var(--wb-ease);
}
.wb-input::placeholder { color: var(--wb-ash-dim); }
.wb-input:hover { border-color: var(--wb-line-strong); }
.wb-input:focus { border-color: var(--wb-heat); outline: none; }
.wb-field { display: flex; flex-direction: column; gap: var(--wb-space-2); }
/* =============================================================================
16. THE SOVEREIGN MARK
A quiet colophon, set in the data face, placed at the very bottom of every
page. It states independence without naming anyone, and it is the one
place the site says who built it and on whose terms.
============================================================================= */
.wb-colophon {
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
gap: var(--wb-space-3) var(--wb-space-5);
align-items: center;
font-family: var(--wb-font-data);
font-size: var(--wb-text-3xs);
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
color: var(--wb-ash-dim);
padding-block: var(--wb-space-5);
border-top: 1px solid var(--wb-line);
}
.wb-colophon__mark { color: var(--wb-ash); }
.wb-colophon__sep { color: #6A6A6A; } /* decorative, but #3A3A3A was near invisible */
/* =============================================================================
17. RESPONSIVE
One column at phone width. Never a horizontal scrollbar on the body.
Wide tables and specs scroll inside their own container.
============================================================================= */
.wb-scroll-x { overflow-x: auto; max-width: 100%; }
@media (max-width: 640px) {
:root {
--wb-gutter: 20px;
--wb-tracking-mega: 0.2em;
}
.wb-panel { padding: var(--wb-space-5); }
}
/* -----------------------------------------------------------------------------
TRADING DISCLOSURES
Required on every page by the Companies (Names and Trading Disclosures)
Regulations 2015 and the Electronic Commerce Regulations 2002. It has to be
findable and readable, so it sits in the footer of every page rather than
buried inside the privacy policy.
-------------------------------------------------------------------------- */
.wb-legalbar {
text-align: center;
/* The colophon above it is set in uppercase mono. An address and a company
number in caps is slower to read and looks like shouting, so this block
opts back out of it. */
text-transform: none;
letter-spacing: normal;
border-top: 1px solid var(--wb-line-soft);
padding-top: var(--wb-space-5);
margin-top: var(--wb-space-5);
}
.wb-legalbar p {
margin: 0 0 var(--wb-space-2);
font-family: var(--wb-font-body);
font-size: var(--wb-text-xs);
line-height: 1.7;
color: var(--wb-ash-dim);
}
.wb-legalbar strong { color: var(--wb-ash); font-weight: 600; }
.wb-legalbar a { color: var(--wb-ash); }
.wb-legalbar a:hover { color: var(--wb-bone); }
/* FAQ sits on the far side of the nav, beside the portal button, because it is
a reference rather than a place people set out to go. */
.wb-nav__faq {
font-family: var(--wb-font-body);
font-size: var(--wb-text-2xs);
font-weight: 700;
letter-spacing: var(--wb-tracking-wide);
text-transform: uppercase;
color: var(--wb-ash);
text-decoration: none;
white-space: nowrap;
}
.wb-nav__faq:hover { color: var(--wb-bone); }