---
name: "Jefferson Tap & Grille"
version: "alpha"
description: "Visual + editorial direction for Jefferson Tap & Grille. Generated from the Muse reading and AI-derived voice; powers consistent rendering across the Doozer site, AI agents, and future automation."
colors:
  primary:   { value: "#00b8a9" }
  secondary: { value: "#4a7a3a" }
  accent:    { value: "#ffb800" }
  neutrals:
    n0: { value: "#ff9a85" }
    n1: { value: "#3a1a2a" }
typography:
  body:
    fontFamily: "geometric-bold"
    fontWeight: "medium"
  display:
    fontFamily: "geometric-bold"
    displayStyle: "tight"
spacing:
  s1: "4px"
  s2: "8px"
  s3: "16px"
  s4: "24px"
  s5: "32px"
  s6: "48px"
rounded:
  card:   "14px"
  button: "999px"
  image:  "18px"
---

# Jefferson Tap & Grille

## Overview

Cold Pints, Hot Grill, Pure Chicago Energy

Jefferson Tap & Grille brings neighborhood bar warmth to the West Loop, rated 4.4 stars by 867 guests.

On **North Jefferson Street**, a block from the rumble of the Chicago El, **Jefferson Tap & Grille** has carved out a spot that feels genuinely lived-in. The kind of place where regulars know the bartenders by name and first-timers feel like regulars by their second round. That's not an accident. It's the result of a room that's built for actual people, not a curated Instagram moment.

**Archetype:** `boutique`  ·  **Voice:** `casual`  ·  **Pace:** `energetic`  ·  **Density:** `medium`

## Colors

The palette is designed to reflect Jefferson Tap & Grille's character — every token below is a deliberate direction, not extracted noise.

- **Primary** (`{colors.primary}`) — `#00b8a9` — dominant identity color, used for headers, primary buttons, link emphasis, brand marks.
- **Secondary** (`{colors.secondary}`) — `#4a7a3a` — supporting tone, used for soft backgrounds, dividers, and quiet emphasis.
- **Accent** (`{colors.accent}`) — `#ffb800` — high-contrast attention color, used sparingly for CTAs, badges, and editorial moments.

Neutral scale: `#ff9a85`, `#3a1a2a` — body text, surfaces, borders, low-emphasis chrome.

## Typography

- **Body** (`{typography.body}`) — `geometric-bold`, `medium`. Used for paragraph text, lists, captions.
- **Display** (`{typography.display}`) — `geometric-bold` in `tight` mode. Used for hero headlines, section titles, and editorial pull-outs.

Set generous line-height (1.6+) for body. Display can run tight (-0.01em letter-spacing) for graphic impact.

## Layout

Default rendering uses the Doozer Muse v3 section pipeline. Sections are addressable units — each one selectable by variant (e.g. `about/alternating`, `services/alternating`, `events/upcoming-list`). The container pattern is:

- Outer: `.container` (max-width 1400px)
- Body prose: `.container-narrow` (max-width 900px) — readability is non-negotiable
- Mobile collapse at 880px and 640px breakpoints

## Shapes

- Cards: `{rounded.card}` (14px) — gentle, signals warmth without softness
- Buttons: `{rounded.button}` (999px / pill) — directional, never timid
- Images: `{rounded.image}` (18px) — generous, frames content as artifact

## Imagery

Treatment: **`vibrant`**. Apply `vibrant` aesthetic to all photographic content.

## Components

Doozer ships a fixed component vocabulary that every business site shares. Each component honors the tokens above. Operators don't choose components — the Muse v3 pipeline composes them per section.

- **Hero** — full-bleed photo, brand-tinted overlay, trust pill (rating + today's hours), large display headline
- **About / Services** — `classic` text-only OR `alternating` (image+text rhythm). Smart photo selection via vision metadata.
- **Why Choose Us** — modern numbered cards (01 / 02 / 03), or icon cards, or photo cards — variant per Muse
- **Events** (`upcoming-list`) — chronological event list with affiliate-wrapped tickets
- **Reviews** — letter-on-gradient avatars (or Google profile photos when available), show-more for long reviews
- **FAQ** — native `<details>` accordion, brand-tinted accent on open
- **Hours of Operation** — live open/closed banner + weekly grid with today highlighted
- **Contact** — embedded map + action cards + Save-to-Contacts vCard + Share button
- **Network footer** — every page declares its position in the Doozer / BerrySmart network

## Do's and Don'ts

### Do
- Treat color tokens as inviolable — `{colors.primary}` is **the** brand color, not a starting suggestion.
- Pair `boutique` archetype with the matching decorative hints: `geometric rules`, `southwestern border`, `sun-ray ornament`.
- Use `{colors.accent}` only for high-intent surfaces (CTAs, urgency, editorial pull-outs). It should feel rare.
- Preserve readability — body line-length never exceeds ~75 characters.
- Honor the `casual` voice in every line of generated copy. The Muse defines this; don't drift.

### Don't
- Don't introduce colors not in the palette. If a new color is needed, add it via the Muse, not ad-hoc.
- Don't replace Doozer components with custom HTML — the pipeline handles structural variants; new structures belong as variants under `includes/sections/`.
- Don't run banner ads, popups, or interstitials. Per the Mission Charter, affiliate revenue is a side-effect of usefulness, never the primary surface.
- Don't generate content that contradicts verified facts (address, hours, phone, rating). The AI generates voice + emphasis; verified data is sacred.

---

*Generated by [Doozer](https://doozer.work) from the active Muse for `jefferson-tap-and-grille-chicago-il.doozer.site`. Format: [Google Labs DESIGN.md](https://github.com/google-labs-code/design.md) (alpha). Refreshes when the Muse, AI content, or brand colors change.*