---
name: "Uncle Joe's Rum Bar & Grill"
version: "alpha"
description: "Visual + editorial direction for Uncle Joe's Rum Bar & Grill. Generated from the Muse reading and AI-derived voice; powers consistent rendering across the Doozer site, AI agents, and future automation."
colors:
  primary:   { value: "#751e15" }
  secondary: { value: "#6a6a6e" }
  accent:    { value: "#2a5adc" }
  neutrals:
    n0: { value: "#fafafa" }
    n1: { value: "#16161a" }
typography:
  body:
    fontFamily: "sans"
    fontWeight: "regular"
  display:
    fontFamily: "sans"
    displayStyle: "helvetica-pure"
spacing:
  s1: "4px"
  s2: "8px"
  s3: "16px"
  s4: "24px"
  s5: "32px"
  s6: "48px"
rounded:
  card:   "14px"
  button: "999px"
  image:  "18px"
---

# Uncle Joe's Rum Bar & Grill

## Overview

Chicago's Rum Bar Where Every Round Tells a Story

Bold Caribbean-inspired drinks, satisfying bar food, and South Loop energy that keeps regulars coming back.

On **South Michigan Avenue**, a few blocks from the lakefront and Grant Park, **Uncle Joe's Rum Bar & Grill** has carved out a personality that's hard to miss. The name alone signals something different: not a corporate sports bar, not a rooftop lounge chasing Instagram trends, but a place built around the character of rum, the warmth of a good grill, and the kind of atmosphere where strangers end up swapping stories by the second drink.

**Archetype:** `classic`  ·  **Voice:** `matter-of-fact`  ·  **Pace:** `slow`  ·  **Density:** `sparse`

## Colors

The palette is designed to reflect Uncle Joe's Rum Bar & Grill's character — every token below is a deliberate direction, not extracted noise.

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

Neutral scale: `#fafafa`, `#16161a` — body text, surfaces, borders, low-emphasis chrome.

## Typography

- **Body** (`{typography.body}`) — `sans`, `regular`. Used for paragraph text, lists, captions.
- **Display** (`{typography.display}`) — `sans` in `helvetica-pure` 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

## 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 `classic` archetype with the matching decorative hints: `clean edges`, `minimalist typography`.
- 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 `matter-of-fact` 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 `uncle-joes-rum-bar-and-grill-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.*