# Kills Boro — Style Handoff

The look and feel of killsboro.com, extracted for reuse in any app or
surface. Source of truth is `app/globals.css` in the site repo
(`location-finder`); this file is the portable summary. Questions: Tomde,
info@tomdestudio.com.

---

## 1. The system in one paragraph

Near-black ink and white paper, one gold accent, condensed uppercase
display type over light rounded body text. Photography sits behind dark
scrims, never naked. Corners are 7px everywhere. There is exactly one
hover gesture in the whole system: lift 5px, add the shadow. If a screen
uses more than ink + gold + photography, it's off-brand.

## 2. Fonts

| Role | Family | Weights used | Fallback stack |
|---|---|---|---|
| Display | **Tungsten** | 400 Book, 500 Medium, 700 Bold, 900 Black | `"Haettenschweiler", "Arial Narrow", sans-serif` |
| Text | **Gotham Rounded** | 300 Light, 400 Book, 500 Medium, 700 Bold | `system-ui, sans-serif` |
| Faßfest only | Pirata One (Google) | 400 | — |

- Font files live in the site repo at `public/fonts/` (OTFs). Both are
  licensed faces; use those files, don't substitute lookalikes.
- **Tungsten is always uppercase** and always tracks at `letter-spacing:
  0.03em` — it looks cramped without it. Never use it for body copy.
- Body copy defaults to Gotham Rounded **300 Light**; 700 Bold is
  reserved for buttons, labels and emphasis.
- **Pirata One (gothic) is Faßfest-campaign-only.** Hard client rule:
  it never appears on any other page or product.

## 3. Color tokens

Paste-ready CSS block at the bottom of this file.

| Token | Hex | Use |
|---|---|---|
| `--kb-black` | `#0f0f0f` | Ink: headings, dark sections, footer, primary button |
| `--kb-black-soft` | `#191919` | Text on gold, dark badge/card fills |
| `--kb-body` | `#404040` | Default body text |
| `--kb-muted` | `#767676` | Secondary text, meta lines |
| `--kb-faint` | `#9a9a9a` | Tertiary text, disabled-ish |
| `--kb-white` | `#ffffff` | Paper |
| `--kb-band` | `#f9f9f9` | Alternate section background |
| `--kb-rule` | `#e8e8e8` | Borders, dividers |
| `--kb-rule-soft` | `#f2f2f2` | Hairline dividers (table rows) |
| `--kb-gold` | `#dbb635` | THE accent: CTAs, eyebrows, badges, hover borders |
| `--kb-gold-deep` | `#c9a52b` | Gold hover state |
| `--kb-gold-ink` | `#8f7415` | Gold that passes contrast on white (links, labels) |
| `--kb-gold-wash` | `#fffaea` | Success/notice background |
| `--kb-error` | `#a32d2d` | Validation errors |
| `--kb-tile-light` | `#f4f2ec` | Light image tile background |
| `--kb-tile-dark` | `#0f0f0f` | Dark image tile background |

Rules of thumb:
- Gold on white text must be `--kb-gold-ink`, not `--kb-gold` (contrast).
- Text on gold is always `--kb-black-soft`, never white.
- On dark sections, body text is white at 62–78% opacity, not pure white.
- Medal/score colors (beer cards): gold `#d4af37`, silver `#c3c8ce`,
  bronze `#a9713d`; CB&B score circle is `#191919` with gold text.

## 4. Type scale

Display (Tungsten, uppercase, +0.03em tracking, near-solid leading):

| Class | Size | Line height |
|---|---|---|
| `kb-display-1` | `clamp(54px, 8vw, 126px)` | 0.86 |
| `kb-display-2` | `clamp(40px, 4.6vw, 74px)` | 0.92 |
| `kb-display-3` | `clamp(30px, 3.4vw, 42px)` | 1.0 |
| `kb-display-4` | `30px` | 0.98 |

Text (Gotham Rounded):

| Style | Spec |
|---|---|
| Lede | 17px / 300 / 1.72 / max-width 58ch |
| Body | 15px / 300 / 1.7 / max-width 66ch |
| Meta | 11–13px / 500 / uppercase / +1.8–2px tracking / `--kb-muted` |
| Eyebrow | 11px / 700 / uppercase / +2.4–2.6px tracking / `--kb-gold`, with a 34×2px gold rule to its left |
| Button label | 12px / 700 / uppercase / +1.4px tracking |
| Field label | 11px / 700 / uppercase / +2px tracking / ink |

## 5. Layout, radius, motion

| Token | Value |
|---|---|
| Max content width | `1440px`, centered |
| Page gutter | `clamp(18px, 4vw, 64px)` |
| Section padding | `clamp(48px, 5.5vw, 84px)` vertical (big bands go up to `clamp(72px, 8vw, 124px)`) |
| Radius | `7px` on everything (pills `99px`) |
| Transition | `all 0.4s` (`--kb-ease`) |
| Shadow | `0 7px 25px -10px rgba(0,0,0,.5)` (`--kb-lift`) — only appears with the hover lift |
| Grids | `repeat(auto-fill, minmax(min(200–260px, 100%), 1fr))`, gap `clamp(16px, 2vw, 28px)` |
| Tap targets | 44×44px minimum |

**The one hover gesture:** interactive cards and gold/ghost buttons hover
to `translateY(-5px)` + `--kb-lift` shadow (+ border/color change).
Nothing else moves. Respect `prefers-reduced-motion` (kill transitions).

## 6. Section rhythm

Pages alternate bands: white → `--kb-band` gray → `--kb-black` dark.
Dark bands carry the gold eyebrows and white Tungsten headings. The
footer is always `#0f0f0f` with gold column labels.

**Photographic headers (the scrim rule):** photos never sit naked under
type. Pattern: dark section, photo as a cover layer at 0.2–0.42 opacity,
then a directional scrim `linear-gradient(96–100deg, rgba(15,15,15,.94)
25–30%, rgba(15,15,15,.55–.6) 100%)`, then content. Never place Tungsten
directly on an unscrimmed image.

## 7. Components

**Buttons** (all: 56px min-height, 12px/700 uppercase +1.4px label, 7px
radius, 0.4s transition):
- *Primary dark*: ink fill, white text → hovers to gold fill, ink text.
- *Gold*: gold fill, `#191919` text → hovers to `--kb-gold-deep` + lift.
- *Ghost (on dark)*: transparent, `rgba(255,255,255,.55)` border, white
  text → hovers to white fill, ink text + lift.

**Cards**: white, 1px `--kb-rule` border, 7px radius, art tile on top
(200px, cover, dark tile background), body padding ~20px/18px. Hover:
ink border + lift. Badges sit 12px from the tile's top corner: gold
badge (9px/700 uppercase on gold) or dark variant (gold text on
`#191919`).

**Note/callout**: `--kb-band` background, 2px gold left border, radius
only on the right corners.

**Forms**: 56px inputs, 1px `--kb-rule` border, 15px/300 text; labels
11px/700 uppercase; optional fields marked with a gold-ink "Optional";
errors turn the border `--kb-error` with a 12px message. Success panel:
gold border on `--kb-gold-wash`.

**Tables**: header cells 10px/700 uppercase muted; first column is
Tungsten 22px ink; rows divided by `--kb-rule-soft`.

**Link-arrow**: `--kb-gold-ink`, 11px/700 uppercase, trailing "→",
hovers to ink.

## 8. Imagery

- Beer imagery is the **can mockup / label art**, shown on tile
  backgrounds (`--kb-tile-dark` default), `object-fit: contain` with
  ~14px padding for cans, `cover` for photography.
- Photography: taproom/brewery shots, warm and dark. Behind type →
  scrimmed (see §6). As content → straight, 7px radius.
- Logos: horizontal splatter wordmark (white on dark, black on light);
  the round splatter badge is the app-icon/favicon mark. Assets in
  `public/brand/` and `public/images/killsboro-round-logo-white@1080x.png`.

## 9. Voice and copy rules (client-approved, apply everywhere)

- **No em or en dashes.** Rewrite around them. Hours use hyphens:
  "12-10 p.m."
- AP time style: "12-10 p.m.", "7 p.m." No Oxford comma.
- "Knead" (never "Knead NYC"); umbrella line: "a Kills Boro Experience".
  Knead is a full restaurant: seafood-forward Italian and New American
  under Executive Chef Rafael Ortiz; brick-fire pizza and house-made
  pasta are the anchors.
- Lead with the beer and the technique (lagers, decoction, side-pull),
  not borough-underdog framing.
- "Faßfest" keeps the eszett; "stichfass" is lowercase; can size is
  "16 oz".
- Distribution copy (verbatim, single source): "We distribute through
  Union Beer Distributors across the five boroughs and northern New
  Jersey." Never say or imply self-distribution.
- No outside food or alcohol at private events; Knead packages only.
- Tone: confident, dry, a little wry. "Beer nerds welcome. So is
  everyone else."

## 10. Paste-ready tokens

```css
:root {
  /* ink + paper */
  --kb-black: #0f0f0f;
  --kb-black-soft: #191919;
  --kb-body: #404040;
  --kb-muted: #767676;
  --kb-faint: #9a9a9a;
  --kb-white: #ffffff;
  --kb-band: #f9f9f9;
  --kb-rule: #e8e8e8;
  --kb-rule-soft: #f2f2f2;
  /* the accent */
  --kb-gold: #dbb635;
  --kb-gold-deep: #c9a52b;
  --kb-gold-ink: #8f7415;
  --kb-gold-wash: #fffaea;
  --kb-error: #a32d2d;
  /* tiles */
  --kb-tile-light: #f4f2ec;
  --kb-tile-dark: #0f0f0f;
  /* type */
  --kb-display: "Tungsten", "Haettenschweiler", "Arial Narrow", sans-serif;
  --kb-text: "Gotham Rounded", system-ui, sans-serif;
  /* shape + motion */
  --kb-radius: 7px;
  --kb-radius-pill: 99px;
  --kb-ease: 0.4s;
  --kb-lift: 0 7px 25px -10px rgba(0, 0, 0, 0.5);
  /* layout */
  --kb-max: 1440px;
  --kb-gutter: clamp(18px, 4vw, 64px);
  --kb-section: clamp(48px, 5.5vw, 84px);
}
```

For the full component CSS (buttons, cards, forms, tables, hero scrim),
lift the `.kb-*` classes from `app/globals.css` in the site repo — they
are dependency-free and port to any stack.