A boutique hotel that wears its restraint as luxury. Warm pearl-bone surfaces, Cormorant Infant for room names at oversized scale, Inter for body, a single sage-olive accent reserved for the Reserve CTA. Built for hospitality, restaurant groups, and travel brands that want quiet European elegance over moody hotel-stock photography.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Hôtel Rivière"3description: "A boutique hotel that wears its restraint as luxury. Warm pearl-bone surfaces, Cormorant Infant for room names at oversized scale, Inter for body, a single sage-olive accent reserved for the Reserve CTA. Built for hospitality, restaurant groups, and travel brands that want quiet European elegance over moody hotel-stock photography."4tags: [hospitality, editorial, premium, warm, minimal]5colors:6 primary: "#1d1a14"7 secondary: "#7a7468"8 tertiary: "#1d1a14"9 neutral: "#ece5d3"10 surface: "#f6f0dd"11typography:12 display: "Cormorant Infant"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "8rem / 0.92 / 400 / -0.045em"17 h1: "4.5rem / 1 / 400 / -0.03em"18 h2: "2rem / 1.18 / 400 / -0.018em"19 body: "1.0625rem / 1.7 / 400 / -0.005em"20radius:21 sm: 1px22 md: 2px23 lg: 3px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(29,26,20,0.10)"30 divider: rgba(29,26,20,0.14)31buttons:32 primary:33 background: #5a623834 color: #f6f0dd35 border: none36 shape: sharp37 padding: 13px 26px38 font: 500 / 0.8125rem / 0.16em39 uppercase: true40 secondary:41 background: transparent42 color: #1d1a1443 border: 1px solid #1d1a1444 shape: sharp45 padding: 13px 26px46 font: 500 / 0.8125rem / 0.16em47 uppercase: true48 outline:49 background: transparent50 color: #1d1a1451 border: 1px solid rgba(29,26,20,0.18)52 shape: sharp53 padding: 13px 26px54 font: 500 / 0.8125rem / 0.16em55 uppercase: true56 ghost:57 background: transparent58 color: #7a746859 border: none60 shape: sharp61 padding: 13px 18px62 font: 500 / 0.8125rem / 0.16em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 20px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Hôtel Rivière77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Hôtel Rivière** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#5a6238`, text `#f6f0dd`, padding `13px 26px`, weight `500`, uppercased.114- **Secondary** — sharp shape, text `#1d1a14`, border `1px solid #1d1a14`, padding `13px 26px`, weight `500`, uppercased.115- **Outline** — sharp shape, text `#1d1a14`, border `1px solid rgba(29,26,20,0.18)`, padding `13px 26px`, weight `500`, uppercased.116- **Ghost** — sharp shape, text `#7a7468`, padding `13px 18px`, weight `500`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#f6f0dd`125- Border: `1px solid rgba(29,26,20,0.10)`126- Shadow: `none`127- Radius: `radius.lg` (`3px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `thin-bars`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`Cormorant Infant`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Hôtel Rivière is a boutique hotel that wears restraint as luxury. The page surface is warm pearl-bone `#f6f0dd` — closer to handmade card stock than to white. Room and suite names run in Cormorant Infant at 128px, weight 400 — the soft-cornered didone glyphs giving every name an inscribed-on-stone permanence without any heaviness. Body sits in Inter at 17px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.16em uppercase tracking — the brass-plaque caption voice. The single accent is sage-olive `#5a6238` that appears only on the Reserve CTA — the singular booking gesture in the entire system gets the singular color.172 173The discipline is in the proportion: massive Cormorant Infant on warm pearl, generous negative space, and one sage-olive button per page that reads as a stamped reservation seal.174 175**Signature moves**176- Cormorant Infant 400 at 128px for room/suite names — soft didone, drama through scale177- Warm pearl-bone surface `#f6f0dd` — never white, never cream178- Sage-olive `#5a6238` exclusively on the Reserve CTA — one booking gesture, one color179- All UI labels uppercase 0.16em tracking — the brass-plaque voice180- Sharp 1-3px radius — almost zero, brass-plaque precision181- Section padding 200px desktop — the air IS the lobby182 183## 2. Palette184 185### Surfaces186- **Pearl Bone** `#f6f0dd` — page background (warm card stock)187- **Pearl Lift** `#ece5d3` — secondary surfaces, gallery panels188- **Hairline** `rgba(29,26,20,0.10)` — every divider189 190### Ink191- **Ink** `#1d1a14` — text, headings, secondary CTA fill192- **Ink 50** `#7a7468` — secondary text, mono captions193 194### Accent195- **Sage Olive** `#5a6238` — Reserve CTA only196- That is the only color in the system.197 198## 3. Typography199 200| Role | Font | Size | Weight | Leading | Tracking |201|------|------|------|--------|---------|----------|202| Suite Name (Hero) | Cormorant Infant | 128px | 400 | 0.92 | -0.045em |203| H1 | Cormorant Infant | 72px | 400 | 1.0 | -0.03em |204| H2 | Cormorant Infant | 32px | 400 | 1.18 | -0.018em |205| Pull Quote | Cormorant Infant (italic) | 28px | 400 | 1.3 | -0.012em |206| Body | Inter | 17px | 400 | 1.7 | -0.005em |207| UI / Button | Inter | 13px | 500 | 1.4 | 0.16em uppercase |208| Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |209| Room Number | JetBrains Mono | 14px | 500 | 1.0 | 0.04em uppercase tabular-nums |210 211Cormorant Infant only at 400 — the soft-corner didone breaks at any heavier weight. Italic reserved for the chef's signature note and pull quotes.212 213## 4. Buttons214 215### Primary (Sage Olive — Reserve only)216```css217background: #5a6238;218color: #f6f0dd;219padding: 13px 26px;220border-radius: 2px;221text-transform: uppercase;222letter-spacing: 0.16em;223font-weight: 500;224```225 226The 0.16em tracking is wider than typical UI — that is the brass-plaque voice carried into the booking gesture. Reads as a stamped reservation seal, not a CTA button.227 228### Secondary (Ink Outline — every other action)229- Transparent, 1px solid ink, ink text — same near-sharp shape, same wide tracking230 231### Outline & Ghost232- Outline: transparent, 1px hairline at 18% ink233- Ghost: no border, ink-50 uppercase, hover underlines234 235## 5. Cards236 237```css238background: #f6f0dd;239border: 1px solid rgba(29,26,20,0.10);240border-radius: 3px;241box-shadow: none;242```243 244NO shadows, NO inset highlights. Suite cards lift to pearl-lift surface with a 1px ink top border (3px wide) — the only chrome.245 246## 6. Charts247 248Thin precise bars (3px wide, 20px gap). One bar in sage-olive, others in 18% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for occupancy-by-month breakdowns and read as gallery exhibits.249 250## 7. Tabs251 252Underline 1px in ink for the active state. Inactive tabs are ink-50 in uppercase 0.16em. The active label is set in Cormorant Infant italic at the same size — that is the rhythm change, not a color shift.253 254## 8. Spacing255 256- Base 8px257- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`258- Section padding: 200px desktop, 96px mobile — the air IS the lobby259 260## 9. Do's & don'ts261 262✅ **Do**263- Use Cormorant Infant at 400 only — anything heavier breaks the soft-didone proportion264- Hold the warm pearl-bone surface — white reads as web app, cream reads as wedding stationery265- Reserve sage-olive for the Reserve CTA exclusively — one booking, one color266- Use 0.16em uppercase tracking on every UI label — that's the brass-plaque voice267 268❌ **Don't**269- Use moody hotel-stock photography — the typography earns the elegance270- Use Cormorant Infant at 600+ — bold breaks the soft didone271- Use a second accent — sage-olive alone, on the Reserve CTA only272- Use any radius beyond 3px — corners must read as brass-plaque, not pill273 274---275 276## Tokens277 278> Generated from the same source the live preview renders from.279> Treat the values below as the contract — never substitute approximations.280 281### Colors282 283| Role | Value |284|-----------|-------|285| primary | `#1d1a14` |286| secondary | `#7a7468` |287| tertiary | `#1d1a14` |288| neutral | `#ece5d3` |289| surface | `#f6f0dd` |290 291### Typography292 293- **Display:** Cormorant Infant294- **Body:** Inter295- **Mono:** JetBrains Mono296 297| Role | size / leading / weight / tracking |298|------|------------------------------------|299| Hero | 8rem / 0.92 / 400 / -0.045em |300| H1 | 4.5rem / 1 / 400 / -0.03em |301| H2 | 2rem / 1.18 / 400 / -0.018em |302| Body | 1.0625rem / 1.7 / 400 / -0.005em |303 304### Radius305 306- sm: `1px`307- md: `2px`308- lg: `3px`309- pill: `9999px`310 311### Shadows312 313- **card:** `none`314- **button:** `none`315 316### Borders317 318- **card:** `1px solid rgba(29,26,20,0.10)`319- **divider:** `rgba(29,26,20,0.14)`320 321### Buttons322 323Four variants, each fully tokenized. The preview renders from these exact values.324 325#### Primary326 327| Property | Value |328|----------|-------|329| shape | `sharp` |330| background | `#5a6238` |331| color | `#f6f0dd` |332| border | `none` |333| padding | `13px 26px` |334| fontWeight | `500` |335| fontSize | `0.8125rem` |336| tracking | `0.16em` |337| uppercase | `true` |338 339#### Secondary340 341| Property | Value |342|----------|-------|343| shape | `sharp` |344| background | `transparent` |345| color | `#1d1a14` |346| border | `1px solid #1d1a14` |347| padding | `13px 26px` |348| fontWeight | `500` |349| fontSize | `0.8125rem` |350| tracking | `0.16em` |351| uppercase | `true` |352 353#### Outline354 355| Property | Value |356|----------|-------|357| shape | `sharp` |358| background | `transparent` |359| color | `#1d1a14` |360| border | `1px solid rgba(29,26,20,0.18)` |361| padding | `13px 26px` |362| fontWeight | `500` |363| fontSize | `0.8125rem` |364| tracking | `0.16em` |365| uppercase | `true` |366 367#### Ghost368 369| Property | Value |370|----------|-------|371| shape | `sharp` |372| background | `transparent` |373| color | `#7a7468` |374| border | `none` |375| padding | `13px 18px` |376| fontWeight | `500` |377| fontSize | `0.8125rem` |378| tracking | `0.16em` |379| uppercase | `true` |380 381### Charts382 383| Property | Value |384|----------|-------|385| variant | `thin-bars` |386| strokeWidth | `1` |387| fillOpacity | `0` |388| gridlines | `false` |389| barGap | `20px` |390| highlight | `single` |391| dotMarker | `false` |392 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Cormorant Infant"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1d1a14', secondary: '#7a7468', accent: '#1d1a14', neutral: '#ece5d3', surface: '#f6f0dd', }, borderRadius: { sm: '1px', md: '2px', lg: '3px', }, }, },};A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.