Tasse Coffee · style tile
the look
Hand-made zine, not Scandi roaster. Everything below is a token or a component the rest of the site is built from.
colour
paper
#F4E9CF
Page background everywhere. Never white.
ink
#4A2B14
All type, borders, buttons and icons.
sky
#9EC3E0
One accent per page. Non-text use only.
paper deep
#EADFC4
Subtle section alternation, where needed.
Sky fails AA as text on paper (2.1:1), so it is used only for underlines, hover states and non-text marks. Ink on paper is 9.4:1 — passes AAA.
type
H1 · Fraunces 900 · clamp(2.75rem, 12vw, 8rem)
proper coffee
H2 · Fraunces 800 · clamp(2rem, 6vw, 4rem)
wedding coffee, done right
H3 · Fraunces 800
barista training in glasgow
H4 · Fraunces 800
what you'll learn
Body · Instrument Sans 400 · 16–18px / 1.5
We're a specialty coffee pop-up based at The Hug and Pint in Glasgow. We roast light, pull it properly, and turn up at weddings, gyms and offices with a full setup. One highlighted word per hero, like this, and never more.
Label · Instrument Sans 600 · uppercase · 0.12em
from £410 weekdays
Link
a link with a sky underline sitting in a sentence.
stickers
Buttons, badges and price tags share one treatment. Tilt is set per instance between −2° and 2°. Hover lifts up-left and the shadow grows.
Tab to these — focus is a 3px ink outline, offset 3px.
product card
light roast specialty beans
co-ferment beans
premium embroidered t-shirt
Products sit on paper as cutouts, not lifestyle cards. Placeholders shown until Reece supplies photography.
form field
Kept boring on purpose — the enquiry forms are where friction costs money.
imagery
24px radius (16px on mobile), occasionally tilted 1–2° with a sticker overlapping the corner.
mascot
footer size · 140px
Reece's own drawing, traced and cleaned: transform wrapper baked into
the paths, fill="currentColor" so it takes the ink colour,
viewBox cropped to the artwork. Four fixed placements only — walking
along the footer, peeking from the events and training heroes, the 404
page, and the empty cart drawer. It never animates.
marquee
Hover to pause. Static entirely under reduced-motion.