Design system reference

Maresme Brewery

A working copy of the look used across the Maresme Brewery demo site — pulled straight from its own stylesheet, not redrawn by hand. The site is still being built, so treat this as a live snapshot for review rather than a finished document; every value here lives in assets/style.css under :root.

This page is for internal review only — it isn't linked from the brewery's own site and won't be shown to the client.

Color

The whole site runs on two colors — near-black ink on near-white paper — plus one accent that changes every visit, one fixed yellow used nowhere except star ratings, and one fixed pink-red reserved for errors and out-of-stock beers.

Ink & paper — the entire page

#fcfcfc

Paper--paperPage background, and text on dark surfaces

#020912

Ink--inkHeadings, buttons, the dark bands and footer

#f2f1ee

Wash--washAlternating section backgrounds, photo mats

Hero accent — rotates on every page load

A small script picks the next of these four colors each time the home page loads and remembers where it left off, so a returning visitor sees a different shade highlighting the word "Maresme" than they saw last time. The same color is used on the site's one accent button. The Community page's how-it-works quote box draws from the same four, on its own rotation, always nudged off whatever color the page's own "Five cents" headline is showing that same visit so the two are never the same swatch at once.

#9AD2CB

Mint1st in rotation

#EBD494

Gold2nd in rotation

#D7EBBA

Sage3rd in rotation

#F4978E

Coral4th in rotation

The one fixed exception

#ffc000

Untappd yellow--untappdStar-rating icons on a beer card — nowhere else on the site

Danger — errors & out of stock

The only status color on the site. Paired with ink text when it's a fill (the sold-out flag, the sold-out button), and used as text on its own everywhere else (a form error).

#E75A7C

Danger--dangerError text, the sold-out flag fill, the sold-out button

✓ DoKeep color to the rotating accent behind "Maresme" and its matching button, the star icons, and danger for an error or a sold-out beer. Everything else stays ink on paper or wash.

✕ Don'tAdd a second status color. There's still no green-for-success system — danger is reserved strictly for an error or an out-of-stock beer, nothing else borrows it.

Typography

Figtree (sans) is reserved for headings and for big numbers that should read as confident — prices, the "77 beers brewed" band, the 5¢ figure. Anonymous Pro (mono) carries everything else: body copy, buttons, nav, labels. Nothing on the site renders smaller than 14px.

--sans 500 · clamp(40–72px)
letter-spacing -.035em · hero only

Cervesa del Maresme

--sans 500 · clamp(32–48px)
section titles

What's in the shop

--sans 500 · 24px
letter-spacing -.02em · card & item names

Calima · Hazy IPA

--sans 700 · clamp(32–48px)
display numbers — stats, prices, the 5¢ figure

--mono 400 · 16px/1.65
color ink-80 (80% ink)

Body copy. A nano-brewery in Badalona and a fifteen-tap taproom in the Eixample — brewed on the coast, poured in Barcelona.

--mono 400 · 18px/1.75
color ink-62 (62% ink) · intros only

Seventy-seven beers brewed so far — and five cents from every Maresme can goes back to the towns it's named after.

--mono 700 · 16px
letter-spacing .18em · uppercase · full ink

Nano-brewery · Badalona · Maresme coast

--mono 400 · 14px
letter-spacing .1em · uppercase · underlined

All beers →

--mono 400 · 14px
color ink-45 (45% ink) · meta & captions only

Calima · Hazy IPA · 6,3%

Shape

Every corner on this site is square. Not "mostly square" — there is no rounded corner anywhere in the stylesheet, on buttons, fields, cards, photos or badges. Separation between surfaces comes from a 1px hairline border, never a shadow and never a radius.

✕ wrong — rounded

✓ right — square, 1px border

Two hairline tokens carry every border on the site: --rule (16% ink) for most dividers and card edges, --rule-soft (9% ink) for quieter grid lines like the beer catalog.

Buttons

Square, 1px ink border, 52px tall, mono 14px bold uppercase. Rather than darkening on hover, a button inverts — fill and text swap places.

Default — ink fill Ghost — outline only Accent — this visit's rotating color

.btn ink fill, paper text, inverts on hover · .btn--ghost transparent, ink text and border, fills to ink on hover · .btn--accent fills with whichever hero color is active this visit, always ink text · .btn[disabled] fills with the danger color, ink text, never inverts

On dark — paper fill Ghost on dark

On the dark bands and footer, buttons flip to paper-colored so they stay visible against ink — .btn--onink and .btn--ghost-onink.

Spacing & layout

Page content is capped at 1400px wide with a 40px side gutter (24px once the screen narrows below 900px). Sections breathe generously — 104px of top-and-bottom padding is the default.

12px

Between buttons in a row

20px

Booking form field rows

32px

Between grouped cards

40px

Hero CTA row, footer columns

64px

Hero's two-column gap

72px

Split feature sections (taproom, brewery)

104px

Standard section top/bottom padding

Form fields

Square, bordered in the hairline gray, 52px tall. The label sits above the field in small uppercase mono. On focus the border simply turns solid ink — no glow, no color change.

Party size

Date

Notes

Legibility & accessibility

"Nothing on this site renders under 14px, and every line of text sitting on a dark or black background is bold."

Erik's rule, added while building this site — small thin mono text was hard to read in a screenshot on the dark bands. It now applies everywhere: the dark announcement bar, the taproom section, the footer.

Light only — this site doesn't offer a dark-mode version.
Every clickable thing gets a plain 2px ink outline, set 3px away from the edge, when reached by keyboard — one ring style, used everywhere.
Almost every pairing on the site is near-black text on a near-white page, or the reverse — about as high contrast as text gets.
Every animation and hover transition turns off for anyone whose device asks for reduced motion.

Voice & tone

Catalan appears on purpose, even on the English and Spanish pages — the community pull-quote below is never translated.
Short and confident: "Book a table," "See the taproom," "Propose an organisation" — never a longer phrase where a short one will do.
Numbers do the bragging — 77 beers, 22,036 check-ins, 5¢ a can — set big, in the display type, while everything around them stays quiet.

"A Maresme Brewery no només fem cervesa: volem que cada llauna ajudi a teixir comunitat al territori."

Maresme Brewery