Brick & Brew™

Brand — web v2

Brick & Brew™

Run / Ride / Swim / Beer

Sport taken seriously. Everything after, less so. The system is precise, structured and editorial. The photography is energetic, human, distorted and unpredictable. That contrast is the brand.

01 — Manifesto

Control the design. Lose control of the moment.

Brick & Brew is a social endurance club. Friends who train hard, then drink well. It is not a fitness SaaS, not a craft beer label, not a Strava clone. The work should feel like an endurance magazine collided with a post-session cooler.

Precision

Typography, grid, logo, core colors, hierarchy, data, UI. Structured. Editorial. Slightly aggressive.

Chaos

People, photography, movement, distortion, expressions, beer, celebration. Wide-angle. Direct flash. Lived-in.

02 — Three principles

Build around these. Ignore the rest.

01

Direct flash

Candid, immediate, lived-in. Sweat, wet hair, cycling shoes still on, someone reaching into a cooler. Shot from inside the group.

02

Distorted wide angle

Fisheye, oversized hands and bottles, people leaning into the lens, subjects escaping the frame. The viewer is in the round, not watching it.

03

Controlled maximalism

Loudness comes from photography, type, scale, color and data — never from tape, torn paper, doodles or decoration. Keep the grid.

04

Structure the type. Free the photo.

Type respects a 12-column grid. Photography is allowed to break it. Quiet, active and loud sections must alternate.

Direct flash
Primary photographic language. High contrast, candid crew moments.
Adopt
Distorted wide angle
Signature presence. Beer in the foreground, people and place behind it.
Adopt
Maximalism
From image, type and data. One loud moment at a time.
Adopt
Scrapbook / tape / doodles
Wrong kind of mess. The chaos belongs in the photograph, not in the chrome.
Reject
Craft beer / luxury sport
No crests, no gold foil, no spa serenity. We are a crew, not a distillery or a resort.
Reject

04 — Photography

Beer as a visual device. Faces as proof of life.

Use the supplied stills as photography, not as decoration inside cards. Full bleed. Sharp edges. These frames already carry the wordmark and slogans — do not set type on top of them, and do not crop the lockups off.

Wide-angle harbour toast with the Brick and Brew lockup.
Night cooler and bottles with the Brick and Brew lockup.
Post-training table still with baked-in slogans.

05 — Color

Ink, paper, signal. Photography does the rest.

Do not make the whole website orange. Additional color should come from beer amber, pool blue, race red and sportswear inside the photos.

Primitives

ink-900
#0A0A0A — ground
ink-1000
#000000 — surface
paper-100
#F2EFE7 — quiet field
signal-500
#FF4B24 — accent

Semantic (ink mode)

bg-canvas
Page ground
fg-primary
Body and titles
fg-muted
Captions, meta
fg-accent
Beer, links, lead rank
bg-inverse
Paper sections

06 — Type

Big emotional type versus small precise data.

Barlow Condensed carries the club voice. IBM Plex Sans runs the product. IBM Plex Mono is the index — pace, km, pts, kickers.

Display — Barlow Condensed 900 · clamp 4.2–12rem

Training scores.

Lede — IBM Plex Sans 400 · 1.125rem

A private scoreboard for people who run, ride, and swim.

Caption / index — IBM Plex Mono 500 · 0.72rem · +0.16em

05:12 /KM · 07:42 AM · BCN / ES · +142 PTS

07 — Space, radius, motion

12 columns. Sharp corners. Sport timing.

space-14
space-28
space-312
space-416
space-524
space-632
space-748
space-864

none 0

pack 2

tile 4

Motion is 120 / 200 / 320ms on a sport ease. Type slides. Images crop-reveal. Numbers stay tabular. Respect prefers-reduced-motion. Touch targets are 44px minimum.

08 — Components

Product UI stays usable. Identity stays loud around it.

Button

Join the club → See the leaderboard → Disabled

Chip

Rank row

1
Nico 9.6 km swim · 224 km bike · 36.2 km run
214.0 pts
2
You The highlighted row is always the signed-in athlete.
198.4 pts

Weights as data, not cards

Swim
×26
Run
×4
Bike
×1
Pint
+12

09 — States

If it loads data, it has these three.

Never leave a list, board, or calculator blank. The copy is human. The control is obvious.

Pulling the board

Syncing the crew catalog. This should resolve in a couple of seconds.

Empty

No pints on the board yet

Log the first beer or wait for a teammate to sync a brick. The season starts when the crew does.

Error

Couldn’t reach the board

The crew catalog did not load. Check the connection and try again.

10 — Voice

Short. Confident. Self-aware. Not childish.

Do

Train hard. Log the day. Concrete, ranked, a little dry.

Don’t

Crush your goals. Next-level hydration. Lifestyle hustle. The visual identity does most of the talking.

11 — Contract

How a future component is allowed to exist.

Web is the source of token names. Swift maps the same names; it does not invent a parallel palette.

  1. Add or reuse a token in docs/css/tokens.css before writing a new visual value. Primitive first if the raw value is new; semantic if it has meaning; component recipe if it is a control measurement.
  2. Paint only with semantic names. Never paste a hex or a magic pixel into a component file.
  3. Ship default, hover, focus-visible, active, and disabled. If the component fetches or lists data, also ship loading, empty, and error with the copy patterns in 09.
  4. Minimum hit area is --touch-min (44px). Focus uses --color-border-focus. Respect prefers-reduced-motion.
  5. On paper plates set data-surface="paper" so nested components invert through tokens.
  6. Do not add a second accent. Status red, success green, and Strava orange stay semantic status/partner tokens.
  7. Do not trap photography in rounded cards. Structure the type. Free the photo.
  8. Do not set type, captions, or dimming gradients on the supplied stills. The lockups are already in the frame — show the whole photograph.