--- version: alpha name: fathom-brewing-design description: "A deep harbor-night canvas (#10181c) with warm cream ink (#f2ede1), a beer-gold amber (#e0a83e) for the pour itself and primary action, and a harbor teal (#3f8b98) for secondary/nautical accents. Oswald carries every heading in condensed uppercase; Barlow carries the surrounding prose. The system reads as an actual coastal taproom's site, hearty and plainspoken, never a brand-guidelines craft-beer template." --- ## Brand Positioning Fathom Brewing is for regulars who want to know what's actually on tap tonight, not scroll a brand deck about "craft" and "passion." It exists because most brewery sites borrow generic craft-beer template chrome (a hop-leaf icon set, a hand-drawn label font, "handcrafted with passion" copy) that says nothing specific. Fathom's bet: the one piece of drama on the page should be a literal pour, a pint glass filling exactly as far as a visitor has scrolled, foam cresting right at the top. Every visual decision below serves that one bet. If a component doesn't help someone find out what's on tap or visit the taproom, or doesn't come from a real brewery interaction (tap list, keg status, release-notice form), it doesn't belong in this system. colors: accent: "#e0a83e" accent-alt: "#3f8b98" ink: "#f2ede1" ink-muted: "#93a4ac" canvas: "#10181c" surface: "#182228" surface-raised: "#202c33" border: "#2c3a42" focus-ring: "#e0a83e" ## Logo / Wordmark System The mark is a rounded-square card containing a half-full pint glass with a foam cap, literally a 1:1 miniature of the homepage's `#glass` mechanic caught mid-pour. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Fathom" in Oswald/600, uppercase, mark always left of the wordmark, never stacked or reversed. - **Minimum size**: mark not smaller than `16px` square, below that the foam cap and liquid fill merge. Wordmark not smaller than `0.85rem`. - **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all four sides of the lockup. - **Don't**: recolor the mark for a light background, it only ever renders on `--panel`/`--bg`. Don't show the static mark empty or fully overflowing, half-full mid-pour is the mark's fixed, deliberate state. Don't add a hop leaf, wheat sheaf, or other generic craft-beer iconography, the glass itself is the whole visual identity. Don't rotate or stretch it. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#10181c` | Page background | | Surface | `--panel` | `#182228` | Panels, nav, tap cards, table header | | Surface raised | `--surface-raised` | `#202c33` | Row hover, input focus bg | | Border | `--border` | `#2c3a42` | Panel edges, dividers, table rules | | Ink | `--ink` | `#f2ede1` | Primary text, foam | | Ink muted | `--dim` | `#93a4ac` | Secondary text, helper text, kicked-keg status | | Pour / primary | `--accent` | `#e0a83e` | Liquid fill, primary button fill, on-tap status, focus ring | | Harbor / secondary | `--accent-alt` | `#3f8b98` | Kicked-early copy, secondary accents | There is deliberately no red anywhere. A keg kicking early is routine taproom reality, not a failure, so it's communicated in the harbor teal with a specific sentence naming the beer and the wait. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~15.4:1 | AAA | | `--dim` text on `--bg` | ~7.0:1 | AAA | | `--accent` text on `--bg` (on-tap status, links) | ~8.4:1 | AAA | | `--accent-alt` text on `--bg` (kicked-early copy) | ~4.6:1 | AA (body text) | | Dark label on `--accent` fill (primary button) | ~8.4:1 | AAA | | `--ink` on `--panel` | ~13.9:1 | AAA | | `--ink` on `--surface-raised` | ~12.2:1 | AAA | The rule this table exists to enforce: `--accent-alt` sits right at the AA line for body text, so it's never used for text smaller than `--text-small` (0.85rem) or for a fill, only for body-weight copy and outlines, where the ratio was verified directly, not assumed from a swatch. typography: display: fontFamily: Oswald fontWeight: 600 body: fontFamily: Barlow fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.25rem, 5.5vw, 3.75rem)` | 700 | Oswald | 1.1 | 0.01em, uppercase | Hero H1 only | | `--text-h2` | `1.6rem` (homepage) / `1.4rem` (second page) | 600 | Oswald | 1.2 | 0, uppercase | Section headings | | `--text-tap-name` | `1.1rem` | 600 | Oswald | 1.2 | 0, uppercase | Beer names on tap cards and table | | `--text-body` | `1rem` | 400 | Barlow | 1.6 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Barlow | 1.5 | 0.01em | Footer, nav utility links, helper text, table cells, ABV/IBU detail | Rule for Oswald vs. Barlow: Oswald, always uppercase and condensed, is reserved for the hero headline, section headings, and beer names, the moments meant to feel like a tap-list chalkboard. Everything else, nav, buttons, form labels, table cells, ABV/IBU specs, is Barlow, chosen for staying legible at small sizes without competing with the condensed display face. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape One radius scale: `--radius: 8px` for panels, tap cards, inputs, and table containers. `--radius-pill: 999px` for buttons and the on-tap badge. The pint glass illustration is the one intentional non-rectangular exception. ## Iconography No icon library. The only non-text glyphs are the logo mark, the glass/liquid/foam illustration, and one Unicode glyph, `✓` (fresh keg tapped), set at the same weight as the text beside it. Tap status is communicated with a plain-language phrase ("On tap", "Kicked") paired with color, never a generic beer-mug icon. If a future page needs more iconography, the fallback is Phosphor (line style, `1.5` stroke), that decision just hasn't been needed yet. ## Motion Principles Scroll fills a pint glass from empty to full, the liquid's top edge tracking scroll position exactly (`scrub`, not a fixed duration), foam bubbles fading and rising into place only once the glass is nearly topped out. This is the only scripted animation on either page, everything else (buttons, table rows, form inputs) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. The whole system honors `prefers-reduced-motion` by showing the glass already full with foam settled, no scrubbed fill. ### Never-list (written before the impeccable-pass rebuild) 1. No small decorative glass icon stacked below a centered headline, the glass is large (up to 220px, was 140px) and shares the first viewport with the copy in a two-column layout. 2. No two-button CTA row floating free of the glass, the primary action sits beside the intro copy that introduces it. ## Voice & Tone hearty, plainspoken, a little salty, no craft-buzzword overuse. In practice: - **Button label**: "Visit the taproom", not "Experience Our Handcrafted Brews" - **Error message**: "Kicked early. Harbor Stout ran out ahead of schedule, next batch conditions for two more weeks.", not "Oh no, we're out!" - **Empty state**: "Nothing new in the fermenters right now.", not "Check back soon for exciting new releases!" - **Success status**: "Fathom IPA, fresh keg tapped today", not "Fresh brew alert! 🍺" ## Accessibility Baseline - Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every interactive element (links, buttons, inputs), never removed without a visible replacement. - Reduced motion: the glass fill and foam fade both check `prefers-reduced-motion: reduce` and render the glass full with foam settled immediately, no scrubbed animation. - Minimum tap target: `44px` in the smallest dimension for every button and form control on touch viewports. - Color is never the only signal: tap status pairs color with a specific phrase, the kicked-early state pairs teal with a full sentence naming the beer and the wait, not a bare icon. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark + wordmark lockup, wordmark uppercase. Right: a Taproom link plus one primary button. Collapses to just the lockup and primary button under `480px`, no hamburger, there are only two destinations. ### Buttons Three variants, one radius (`--radius-pill`), one primary accent: - **Primary**: `--accent` fill, dark label, used once per view for the single real action ("Visit the taproom", "Notify me"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. "See what's on" and similar secondary actions. - **Ghost**: text-only, `--dim` label, `--ink` on hover. Tertiary actions like "watch it pour." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (accent outline). ### Glass illustration An SVG pint-glass outline with a clipped liquid rect whose height is recalculated continuously against scroll-scrubbed progress, plus a foam group that fades and rises into place only near full. Illustrative only, not interactive, exists to make "brewed by the tide" visually literal through a literal pour. ### Tap cards A flat panel per beer: an Oswald name and a single line of real spec (ABV, flavor note, IBU). No hop-leaf iconography, the numbers and name carry the specificity. ### Table Header row in `--panel`/`--dim` labels, body rows in `--bg`, one `--border` rule between rows, row hover to `--surface-raised`. Status cells are bold text in `--accent` (on tap) or `--dim` (kicked), never a bare colored dot. ### Forms Label above input, `--text-small`/`--dim`. Input: `--panel` background, `1px solid --border`, `--radius`, `--ink` text, `--dim` placeholder. On `:focus`, border becomes `--accent` and background lifts to `--surface-raised`. On error, border becomes `--accent-alt` and helper text explains what to fix in plain language. ### Status / feedback states - **Loading**: a skeleton shaped like the real content (bars matching text line-heights), not a spinner. - **Empty**: a plain sentence in `--dim`, no illustration. - **Error**: an inline `--accent-alt` message naming the specific beer and timeline, with a concrete next step, never a silent failure. - **Success / status badge**: `--radius-pill`, `1px solid --accent`, `--accent` text on transparent fill, not filled, filled would compete with the primary button's exclusive use of a solid `--accent` fill. ### Footer One row: brewery name/tagline on the left, real page links on the right (Taproom, back to gallery). No invented legal or licensing text. ## Do's and Don'ts ### Do - Let the glass fill be the only continuously scroll-scrubbed element on the page. - Reserve `--accent` for the pour/primary-action meaning and `--accent-alt` for harbor/secondary meaning, keep that split consistent everywhere. - Name real beers, styles, and specs (ABV, IBU) in copy, never vague "seasonal favorite" language. - Use a dark label on any `--accent`-filled surface. - Keep the nautical theming (Fathom, tide, harbor) in naming and copy, not as literal wave/anchor iconography layered on top. ### Don't - Don't use a hop-leaf icon set, a hand-drawn label typeface, or "handcrafted with passion" copy, the pour illustration and specific beer facts carry the brand on purpose. - Don't introduce red for a kicked keg or delay, route those to `--accent-alt` with specific copy instead. - Don't let the glass overflow past its outline or fill past 100%, the pour always resolves exactly at the rim. - Don't stack more than one primary button in the same view. - Don't fill a status badge solid, badges stay outlined so the primary button remains the only solid-`--accent`-fill element on screen. ## Known Constraints - Two routes now exist (home, taproom), still no real online ordering or food-truck schedule, no responsive breakpoint table beyond a single-column mobile collapse, no authenticated mug-club account (the release-notice form is not wired to anything real, this is a concept demo).