---
version: alpha
name: Mun Rooftop
description: Lunar luxury after dark — a near-black night-sky canvas warmed by champagne-gold accents, editorial high-contrast serif display headlines over clean sans body, generous letterspaced uppercase labels, and soft hairline borders that frame content like a moonlit terrace.
colors:
  # Canvas + ink
  background: "#0c0a09"
  surface: "#16130f"
  surface-soft: "#1f1b15"
  ink: "#f5efe3"
  ink-secondary: "#bdb3a2"
  ink-muted: "#8a8170"

  # Brand accent — champagne / moon gold
  primary: "#c9a86a"
  primary-soft: "#e0c78f"
  primary-deep: "#a07f49"
  on-primary: "#0c0a09"

  # Warm neutrals
  sand: "#d8cbb3"
  bronze: "#6e5a3a"

  # Lines + overlays (flattened over canvas)
  border: "#2a2620"
  border-soft: "#211d18"
  overlay: "#070605"

  # On-color
  on-ink: "#0c0a09"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.25px
  heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 3px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.70
    letterSpacing: 0.2px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.2px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.3px
  nav-link:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1.5px
  button-label:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 2px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.primary}"
  button-outline-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.primary}"

  link-discover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.none}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border-soft}"

  eyebrow-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
    width: 100%
---

# Mun Rooftop Design System

## Overview

Mùn Rooftop is a cocktail bar perched above the Monti district of Rome, and its identity leans entirely into the moon — "where drinking is out of this world." The site reads like a night sky rendered as a luxury hospitality brand: a near-black warm canvas (`{colors.background}`), champagne-gold accents (`{colors.primary}`) that catch the eye like moonlight on a glass, and an editorial typographic split between a high-contrast serif display face and a clean, airy sans for everything functional. Nothing here is bright or busy. The mood is candlelit, intimate, and aspirational.

The defining tension is contrast — not just light text on dark ground, but the dialogue between a romantic, slightly old-world serif (`{typography.display-hero}`) and a thin, geometric sans (`{typography.body}`). Headlines feel hand-set and editorial; body copy feels quiet and modern. Uppercase eyebrow labels and button text carry wide tracking (2–3px), a hospitality-luxury signature that gives even small text presence and ceremony. The gold is used sparingly and deliberately: a rule under an eyebrow, a button fill, a "Discover more" link — never as a flood.

Structurally the layout is photography-forward. Full-bleed panoramic imagery of the terrace, the Roman skyline, and moon-phase motifs do the heavy lifting; the design system's job is to frame them. Borders are hairline and warm (`{colors.border}`), corners are squared (radius is mostly `{rounded.none}`), and whitespace is generous. The result is restrained editorial chrome that lets the place sell itself.

**Key Characteristics:**
- Near-black warm canvas (`{colors.background}`) — night-sky ground, never pure black
- Champagne / moon-gold accent (`{colors.primary}`) used sparingly for ceremony, not decoration
- Editorial serif display (Cormorant Garamond) paired with a thin geometric sans (Jost)
- Wide-tracked uppercase eyebrows and button labels (2–3px letter-spacing)
- Squared corners (`{rounded.none}`) and hairline warm borders framing content
- Photography-forward, full-bleed imagery with restrained text overlays
- Thin body weights (300) for an airy, candlelit reading texture
- Generous vertical whitespace between sections

## Colors

### Canvas & Ink
- **Night Sky** (`{colors.background}`): Primary page background — a warm near-black, not pure black.
- **Surface** (`{colors.surface}`): Card and panel ground, a touch lifted from the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature panels, hovered surfaces.
- **Moonlight** (`{colors.ink}`): Primary text — warm off-white, like candlelight on paper.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Brand Accent
- **Moon Gold** (`{colors.primary}`): The signature champagne-gold — eyebrows, rules, buttons, links.
- **Gold Soft** (`{colors.primary-soft}`): Hover/lift state for gold elements.
- **Gold Deep** (`{colors.primary-deep}`): Pressed states, darker gold detailing.
- **On Primary** (`{colors.on-primary}`): Dark text placed on gold fills.

### Warm Neutrals
- **Sand** (`{colors.sand}`): Soft warm tint for secondary highlights.
- **Bronze** (`{colors.bronze}`): Deep metallic neutral for subtle detailing.

### Lines & Overlays
- **Border** (`{colors.border}`): Hairline warm divider — the default frame.
- **Border Soft** (`{colors.border-soft}`): Quietest separation, nav underline.
- **Overlay** (`{colors.overlay}`): Image scrim for text legibility over photography.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — a high-contrast editorial serif for romance and ceremony.
- **Body / UI**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a thin geometric sans for airy, modern copy.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px serif — hero billboard headline |
| `display` | Section opener headlines |
| `heading` | Card titles, sub-section heads |
| `eyebrow` | Wide-tracked uppercase kicker above headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading copy (thin weight) |
| `body-small` | Dense copy, secondary descriptions |
| `nav-link` | Top navigation links |
| `button-label` | Wide-tracked uppercase button text |
| `caption` | Metadata, fine print |

### Principles
- **Serif/sans dialogue**: Editorial serif announces; geometric sans informs. Never mix the roles.
- **Wide tracking on uppercase**: Eyebrows and buttons carry 2–3px letter-spacing — small text earns presence through space.
- **Thin body texture**: Body weight 300 keeps long copy candlelit and light, never heavy.
- **Gold as punctuation**: Color the eyebrow or the rule, not the whole headline.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}`–`{spacing.4xl}`) between major sections.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: full-bleed panoramic photography with overlaid serif headline + eyebrow
- Sections: alternating image/text bands and centered single-column intros
- Cards: framed by hairline `{colors.border}`, squared corners

### Whitespace Philosophy
- **Candlelit emptiness**: Generous vertical padding lets imagery breathe.
- **Framing over filling**: Hairline borders and squared corners frame content rather than decorate it.
- **Imagery leads**: The design system is chrome around full-bleed photography of the terrace and Roman skyline.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs (squared editorial chrome) |
| `xs` | 2px | Tiny inline detailing |
| `sm` | 4px | Small containers |
| `md` | 8px | Occasional softened panels |
| `lg` | 16px | Image containers when softened |
| `pill` | 9999px | Rare — round indicators, moon-phase dots |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Moon-gold fill, dark text, squared, wide-tracked uppercase label. The reservation CTA.
- **`button-outline`** — Transparent on canvas with a gold hairline border; inverts to gold fill on hover.
- **`link-discover`** — The "Discover more" text link, uppercase wide-tracked, often with a gold underline.

### Cards
- **`card`** — Lifted surface, hairline warm border, squared corners, generous padding.
- **`card-feature`** — Softer surface tint for highlighted spaces/events.

### Inputs
- **`input`** — Surface ground, hairline border, squared. Focus swaps the border to moon-gold (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Dark canvas bar, moonlight links at 14px with 1.5px tracking, gold reservation CTA at right, hairline bottom rule.

### Labels
- **`eyebrow-label`** — Gold uppercase kicker with 3px tracking, sits above section headlines.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black (`{colors.background}`), never pure `#000000`
- Use moon-gold (`{colors.primary}`) sparingly — eyebrows, rules, buttons, links only
- Pair the editorial serif for headlines with the thin sans for body
- Apply 2–3px tracking to uppercase eyebrows and button labels
- Keep corners squared (`{rounded.none}`) for editorial chrome
- Let full-bleed photography lead; keep text overlays restrained

### Don't
- Don't flood the layout with gold — it loses its candlelit specialness
- Don't set body copy in the serif — serif is for display only
- Don't use heavy body weights; 300 keeps the airy texture
- Don't round buttons or cards heavily — squared is the signature
- Don't drop tracking on uppercase labels — the space is the luxury cue
- Don't introduce cool/bright accent colors that fight the warm night palette

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hamburger nav, hero serif scales down |
| Tablet | 600–1024px | 2-column bands, expanded padding |
| Desktop | 1024–1200px | Full alternating image/text layout |
| Large Desktop | >1200px | Centered, generous margins, full-bleed panoramas |

### Collapsing Strategy
- Hero: 72px serif → scales toward 40px on mobile, keeps tight line-height
- Navigation: horizontal links + gold CTA → hamburger menu
- Image/text bands: side-by-side → stacked, image first
- Section spacing: `{spacing.4xl}` → roughly halved on mobile
- Buttons: full wide-tracked label preserved; padding tightens slightly

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Night Sky `{colors.background}`
- Heading text: Moonlight serif `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Accent / CTA: Moon Gold `{colors.primary}`
- Border: hairline warm `{colors.border}`
- Eyebrow: Moon Gold `{colors.primary}`

### Example Component Prompts
- "Create a hero over a full-bleed panoramic night photo. Gold eyebrow 'MÙN ROOFTOP' at 13px Jost uppercase, 3px tracking, `{colors.primary}`. Headline at 72px Cormorant Garamond weight 500, `{colors.ink}`, line-height 1.05. Gold CTA button (`{colors.primary}` fill, dark text, squared, 16px 32px padding, 2px tracking uppercase label)."
- "Design a card: `{colors.surface}` background, 1px `{colors.border}` border, squared corners, 32px padding. Title at 32px Cormorant Garamond, body at 16px Jost weight 300, `{colors.ink-secondary}`."
- "Build an outline button: transparent on `{colors.background}`, 1px `{colors.primary}` border, `{colors.primary}` text, squared, 13px Jost uppercase 2px tracking — inverts to gold fill with dark text on hover."

### Iteration Guide
1. Warm near-black ground, warm off-white text — never pure black/white
2. Gold is punctuation, not paint — restrain it to accents
3. Serif announces, sans informs — never blur the roles
4. Uppercase labels live and die by their wide tracking
5. Squared corners and hairline borders frame; photography fills

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Mun Rooftop. Brand names and trademarks belong to their respective owners.