---
title: "DOMA R&B — Monte design system"
variant: extended
source: https://domarb.com.au/venue/monte/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/montecafe-com-au)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# DOMA R&B — Monte · Design System

> Warm, unhurried hospitality told through place and detail.

**Theme:** light · **Industry:** food-beverage · **Source:** https://domarb.com.au/venue/monte/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Monte’s venue page pairs a cinematic, full-bleed restaurant photograph with restrained editorial typography and warm, quiet surfaces. A clear sequence of venue details, image gallery, social content, gift cards, related venues, and newsletter keeps the experience informative without losing its atmosphere.

## North star

Let rich, natural venue photography lead, and keep the surrounding warm-neutral interface quiet, editorial, and easy to scan.

## Overview

The page balances an immersive venue photograph against a quiet, warm-neutral interface. A full-bleed hero leads with the restaurant interior and a centered, light serif title; the pale #f5f0ea content area then gives venue details, compact actions, and a horizontal image gallery room to breathe. Domaine Text supplies the delicate editorial voice for headings and prominent actions, while Modern Gothic keeps navigation, body copy, and utility details legible and understated. Black sections are used selectively for the hero treatment and the gift-card and footer areas, creating clear tonal pauses rather than a uniformly dark page. Hairline warm borders separate content groups, while rounded pill actions remain low-key. Photography is central: architectural interiors, food, drinks, and social posts provide the strongest colour, so interface accents stay muted and avoid competing with the imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | brand | Hero and footer fields, gift-card feature background, and primary text, links, and navigation on light surfaces. |
| Gallery Cream | `#f5f0ea` | `--color-gallery-cream` | surface | Main content surface for venue details, gallery, social feed, and related venue sections. |
| Stone Canvas | `#ddd8d2` | `--color-stone-canvas` | surface | Measured page canvas and card backing; a soft neutral supporting the warmer photographic content. |
| Muted Brass | `#b9b1a4` | `--color-muted-brass` | accent | Subdued button fill and outline, including Book a Table and small social actions. |
| Linen Line | `#cdc7bc` | `--color-linen-line` | neutral | Measured secondary hairline and text detail; use sparingly for quiet separators rather than a prominent fill. |
| Soft White | `#ffffff` | `--color-soft-white` | semantic | Light text and button detail against dark or image-backed areas, including the overlaid hero navigation. |
| Weathered Grey | `#a6a29d` | `--color-weathered-grey` | neutral | Secondary surface tone detected in navigation and other elements; keep subordinate to cream and black. |
| Footer Grey | `#717171` | `--color-footer-grey` | neutral | Low-emphasis footer copy and secondary information. |
| Graphite Edge | `#4a4847` | `--color-graphite-edge` | neutral | Minor navigation border tone; use only as a restrained edge detail. |

### Semantic aliases

`--color-canvas` → `#ddd8d2` (Stone Canvas) · `--color-surface` → `#f5f0ea` (Gallery Cream) · `--color-surface-2` → `#000000` (Deep Ink) · `--color-surface-3` → `#a6a29d` (Weathered Grey) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#f5f0ea` (Gallery Cream) · `--color-text-subtle` → `#ffffff` (Soft White) · `--color-border` → `#b9b1a4` (Muted Brass)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ddd8d2` | 14.83:1 | AAA |
| `#000000` | `#f5f0ea` | 18.53:1 | AAA |
| `#000000` | `#a6a29d` | 8.28:1 | AAA |
| `#f5f0ea` | `#ddd8d2` | 1.25:1 | fail |
| `#f5f0ea` | `#000000` | 18.53:1 | AAA |
| `#f5f0ea` | `#a6a29d` | 2.24:1 | fail |
| `#ffffff` | `#ddd8d2` | 1.42:1 | fail |
| `#ffffff` | `#f5f0ea` | 1.13:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#a6a29d` | 2.54:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Modern Gothic | `--font-body` | webfont | 300, 500 | Navigation, body copy, captions, utility details, and medium-weight text links. | Montserrat |
| Domaine Text | `--font-display` | webfont | 300 | Display and section headings, venue titles, and prominent button labels. | Cormorant Garamond |

- **Modern Gothic:** Light weights dominate; navigation and body stay understated. Eyebrows use uppercase, medium weight, and expanded tracking.
- **Domaine Text:** Light serif with generous leading; display tracking is subtly open. Preserve natural case rather than forcing uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 300 | 1.2 | 0.02em | — | Domaine Text | Large editorial display treatment, notably the centered hero venue title. |
| h1 | 40px | 300 | 1.2 | 0 | — | Domaine Text | Primary venue or major section heading. |
| h2 | 30px | 300 | 1.2 | 0 | — | Domaine Text | Secondary section headings such as Stay Social and More Venues. |
| h3 | 25px | 300 | 1.2 | 0 | — | Domaine Text | Tertiary venue and content headings. |
| h4 | 20px | 300 | 1.2 | 0 | — | Domaine Text | Smaller subsection and supporting card headings. |
| body | 16px | 300 | 1.3 | 0 | — | Modern Gothic | Venue description, explanatory copy, and newsletter text. |
| caption | 12px | 300 | 1 | 0 | — | Modern Gothic | Compact metadata, image notes, and footer details. |
| button | 20px | 300 | 1.2 | 0 | — | Domaine Text | Serif labels on venue booking and menu actions. |
| nav | 16px | 300 | 1.3 | 0 | — | Modern Gothic | Header and footer navigation links. |
| link | 16px | 500 | 1.3 | 0 | — | Modern Gothic | Emphasized inline actions and venue links. |
| eyebrow | 11px | 500 | 1.2 | 0.1em | uppercase | Modern Gothic | Small uppercase labels and metadata markers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 5, 7, 8, 10, 12, 16, 20, 24, 32, 40, 80, 112 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width 1360px.

A broad, centered content canvas is organized into two-column information areas and horizontal image rows, with a measured maximum width of 1360px. The first viewport is dominated by a full-bleed hero; the following sections switch to pale, contained surfaces. Headings and text align left in content blocks, while the hero title is centered. Comfortable section rhythm separates gallery, social, gift-card, and related-venue modules, with a denser black newsletter footer at the end.

## Shape & elevation

- Radius: button `9999px` · card `4px` · link `4px` · xs `4px` · sm `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no meaningful drop-shadow language. Thin warm-grey rules separate content groups, and restrained outlines define pill-shaped actions. The hero uses image layering for text contrast, while black feature and footer panels create tonal depth without cards or heavy elevation.

## Imagery

Photography is the defining visual material: the hero shows the venue interior, followed by images of the space, food, drinks, and social posts. Use real-looking hospitality photography with natural materials, warm light, and candid human presence. Hero imagery spans the viewport with the title layered over it; supporting images form wide or compact horizontal galleries. Video-like social thumbnails are treated as image-led tiles, not illustrated UI.

## Components

### Image-led hero

Full-bleed venue photograph with a centered light serif title and overlaid light navigation.

### Venue action row

Venue name and compact pill actions, including Book a Table and Menus; actions use restrained warm-grey fills or outlines.

### Venue details

Editorial venue introduction paired with a concise, aligned list of hours, address, phone, email, social, and website details.

### Photo gallery

Horizontal sequence of venue, food, and drink photography on the pale cream content surface.

### Social feed

Stay Social heading, small Follow Us pill, and a row of image-led social post thumbnails.

### Gift-card feature

Black feature panel combining editorial copy, a subtle action, and gift-card and hospitality imagery.

### Related venues and newsletter footer

Related venue image cards lead into a black footer with navigation, newsletter fields, consent text, and legal links.

### Measured component styles

- **Primary button** (“FOLLOW US”): background #b9b1a4 · text #000000 · border 1px solid #b9b1a4 · radius 3.35544e+07px · padding 7px 12px · 500 11px Modern Gothic · uppercase
- **Secondary button** (“Menus”): transparent background · text #000000 · border 1px solid #b9b1a4 · radius 3.35544e+07px · padding 8px 24px · 300 20px Domaine Text
- **Link** (“02 5127 6009”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px Modern Gothic
- **Input**: transparent background · text #f5f0ea · radius 0px · padding 0px 210px 0px 0px · 300 16px Modern Gothic
- **Card**: background #ddd8d2 · text #000000 · radius 4px · padding 0px · 300 16px Modern Gothic
- **Navigation item** (“DOMA R&B Venues Event Spaces What’s On C”): transparent background · text #f5f0ea · radius 0px · padding 0px · 300 16px Modern Gothic

## Do

- Lead with a full-bleed, authentic venue photograph.
- Keep the hero title centered and editorial.
- Use Gallery Cream for broad content sections.
- Use Deep Ink selectively for strong section transitions.
- Pair light serif headings with understated sans-serif utility text.
- Separate modules with fine, warm-toned rules.
- Keep booking and menu actions visually quiet.

## Don't

- Do not add bright interface colours absent from the measured palette.
- Do not cover the page in cards or heavy shadows.
- Do not let buttons compete with the venue photography.
- Do not use bold, oversized sans-serif headings.
- Do not force all navigation or headings into uppercase.
- Do not replace the horizontal image-led gallery with decorative illustration.
- Do not crowd the cream content sections with dense text.

## Agent prompt

Build a new hospitality venue page in the DOMA R&B visual style. Start with an immersive, full-bleed venue photograph, light overlaid navigation, and a centered Domaine Text–like title. Use Deep Ink (#000000) for selected dark panels and text, Gallery Cream (#f5f0ea) for the main content field, Stone Canvas (#ddd8d2) for subtle canvas or card backing, and Muted Brass (#b9b1a4) for restrained pill actions. Keep headings in a light editorial serif and body, navigation, and metadata in a clean light sans-serif. Arrange venue details in a calm two-column block, then use horizontal photography, social thumbnails, and a black gift-card feature. Maintain generous section breathing room, thin warm dividers, minimal elevation, and a practical black newsletter footer. Let photography supply the rich colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-column media area with centered title and navigation over the image. | Overlaid site navigation, Venue identity at a glance | Full-bleed photography, Centered serif title, Light text overlay |
| 2 | cta | Short pale band with a table-finding link followed by the venue action row. | Table booking shortcut, Menu access | Cream surface, Quiet pill actions, Serif action labels |
| 3 | feature-split | Two-column editorial description and venue contact details on a shared light surface. | Venue overview, Contact and practical details | Left-aligned serif heading, Fine detail separators, Open two-column layout |
| 4 | gallery | Horizontal multi-image gallery within the pale content surface. | Browse venue imagery | Wide photographic tiles, Minimal framing |
| 5 | content-feed | Section heading and small action above a horizontal row of social thumbnails. | Follow social account, Scan recent posts | Serif section title, Compact pill action, Image-led feed tiles |
| 6 | feature-split | Dark feature panel with editorial copy and hospitality imagery arranged in an offset composition. | Gift-card discovery, Promotional action | Black panel, Light text, Image-and-copy split |
| 7 | recommendations | Horizontal multi-column venue cards with image, title, short description, and action. | Browse related venues, Open venue details | Image-first cards, Serif venue names, Quiet outlined actions |
| 8 | footer | Full-width black footer with navigation on one side and newsletter form on the other. | Navigate site, Subscribe to newsletter, Consent and legal links | Black background, Light muted copy, Understated form rules |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--sb-color-gray-600: #4a5565;
--sb-color-gray-700: #364153;
--sb-color-wp-light-blue-600: #007ca8;
--sb-duration-75: 75ms;
--sb-duration-100: 100ms;
--sb-duration-150: 150ms;
--sb-duration-200: 200ms;
--sb-duration-300: 300ms;
--sb-duration-500: 500ms;
--sb-duration-700: 700ms;
--sb-duration-1000: 1000ms;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/montecafe-com-au