Stage 1

Foundations

Everything below lives in one place, src/styles.css. Components reference tokens; they never carry their own colours, fonts, radii or shadows.

Logo

The supplied artwork is used as provided. The wordmark is never redrawn, re-typeset in a web font, recoloured, stretched, outlined or reconstructed in CSS.

Colour — for paper surfaces

Reverse — for ink surfaces

Colour

Black, warm off-white and one gold. No gradients on surfaces, no gold glow, no fake metallic texture.

Provisional Cask 23 colour tokens
Name	Token	Source	Use
Ink#0A0A0A	--ink	Logo artwork background	Primary text on paper, and the full store-front surface.
Paper#FAF9F6	--paper	Proposed	Warm off-white. Softer than pure white, closer to shelf card and label stock.
Brass#DCAA1E	--brass	Sampled from supplied logo	The single accent. Used sparingly — one primary action per view.
Brass strongDarkened brass	--brass-strong	Derived	Accessible variant for brass text and links on paper, and for focus rings.
AshWarm grey	--ash	Derived	Neutral with a warm cast, so greys never read blue against the brass.

Availability status colours

Status is never communicated by colour alone — every pill also carries a text label, so it reads correctly in greyscale and for colour-blind users.

Open--status-open

Limited--status-limited

Closed--status-closed

Typography

Display

Aa

Playfair Display

Headings only. Weight 700, slight negative tracking. Never for body copy or interface labels.

--font-display

Sans

Aa

Inter

Body, interface, navigation, labels, prices and tabular figures.

--font-sans

Display largeBy the dram

DisplayGuided tasting

Display smallLimited release

LedeCarefully selected by our team in Leicester.

BodyIndependent specialists in whisky, wine, spirits and cigars.

SmallAllergen information available on request.

EyebrowOur collections

Surfaces

Three surfaces only: paper, muted and ink. Applying surface-ink re-maps the semantic tokens for everything inside it, so a card, button or pill placed on a black section adapts without a single colour override in the component.

paper

Sampling lounge

Body copy sits at the same contrast ratio on all three surfaces.

Brass accent

muted

Sampling lounge

Body copy sits at the same contrast ratio on all three surfaces.

Brass accent

ink

Sampling lounge

Body copy sits at the same contrast ratio on all three surfaces.

Brass accent

Spacing and measure

Compact section: py-10 → py-14
Default section: py-16 → py-24
Generous section: py-24 → py-36
Container (narrow): max-w-3xl
Container (default): max-w-6xl
Reading measure: 62ch

Editorial and spacious rather than crowded: long-form copy is capped at a 62 character measure, and sections are built mobile-first with generous vertical rhythm on larger screens.

Radii, shadow and motion

Base radius is 0.25rem. Corners stay close to square — soft, rounded shapes read as consumer app rather than specialist retailer.

rounded-sm

rounded-md

rounded-lg

rounded-xl

--shadow-card--shadow-lifted

Motion is 150–220ms on a single easing curve, and is limited to state changes that help the reader. All non-essential motion is removed automatically under prefers-reduced-motion.

Accessibility baseline

Applied throughout

— Semantic HTML: real headings, lists, tables, figures and landmarks.
— A visible brass focus ring on every interactive element. Never removed.
— A skip link to the main content, first in the tab order.
— Body text meets WCAG AA contrast on all three surfaces.
— Status is always carried by text as well as colour.
— Reduced motion respected globally.
— Built mobile-first, checked at 375, 768, 1024 and 1440 pixels.