---
version: alpha
name: "Inness"
description: "Monospaced editorial restraint on a warm parchment canvas — Hudson Valley country-house hospitality rendered in uppercase Akkurat-Mono, a single terracotta CTA, and near-total typographic economy"

colors:
  # Surface / canvas
  background: "#f0eeea"           # warm parchment — logo safe-zone and page canvas from dembrandt
  surface: "#223430"              # deep forest teal — dark CTA / inverted section backgrounds
  surface-elevated: "#ffffff"     # pure white — overlaid panels, modal surfaces

  # Text / ink
  ink: "#000000"                  # primary text, all nav labels, icon strokes
  on-background: "#000000"
  on-surface: "#ffffff"           # text on dark teal surface

  # Brand accent
  primary: "#d74f37"              # terracotta / burnt sienna — sole CTA fill
  on-primary: "#ffffff"
  primary-hover: "#b7432f"        # darker terracotta — confirmed in dembrandt hover delta

  # Secondary interactive
  secondary: "#223430"            # forest teal — dark booking CTA block
  on-secondary: "#ffffff"

  # Borders
  border: "#bfbfbf"               # was rgba(0,0,0,0.25) on white — Google format requires hex
  border-dark: "#000000"          # full-black bottom rule on inputs, vertical dividers

  # Shadow tints
  shadow-soft: "#d4d2ce"          # near-canvas tint for any soft lift (system is mostly flat)

  # Focus
  focus-ring: "#2196f3"           # was rgb(33,150,243) — browser default focus glow, kept as-is

typography:
  display-hero:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    fontFeature: "uppercase"
  display:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
    fontFeature: "uppercase"
  heading-section:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
    fontFeature: "uppercase"
  heading-sub:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    fontFeature: "uppercase"
  body-large:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.52
    letterSpacing: 0px
  nav-link:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
    fontFeature: "uppercase"
  button-ui:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.52px
    fontFeature: "uppercase"
  label:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.7px
    fontFeature: "uppercase"
  caption:
    fontFamily: "Akkurat-Mono, 'Courier New', Courier, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 1.2px
    fontFeature: "uppercase"

spacing:
  xs: 5px
  sm: 12px
  md: 20px
  lg: 40px
  xl: 50px
  2xl: 75px
  3xl: 120px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 24px 65px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 24px 65px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface-elevated}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 10px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 10px
  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Inness Design System

## Overview

Inness is a country-house hotel in the Hudson Valley that describes itself as a place where the pastoral and the considered coincide — and its web design is an unusually faithful translation of that promise into interface language. The canvas is a warm parchment (`{colors.background}`), an off-white with the faint warmth of old linen or dry fieldstone, sitting conspicuously apart from the sterile neutral greys of hospitality convention. Against this ground, the design speaks almost entirely in two typefaces: Akkurat-Mono for headings, labels, and navigation — all-caps, weight 400, zero decoration — and Akkurat (the proportional roman companion) for body copy and buttons. The monospace face at display sizes gives every headline the deadpan precision of a typewritten room card or a farmhouse ledger. It is a deliberately anti-glamorous choice for a luxury context, and it works.

The palette is one of the most stripped-back in the hospitality sector. Black and off-white carry virtually the entire system: `{colors.ink}` on `{colors.background}`, occasionally inverted to `{colors.on-surface}` on `{colors.surface}` — a deep Hudson Valley forest teal that appears in dark CTA section blocks and full-bleed photography panels. Into this restraint, a single chromatic appointment: `{colors.primary}`, a warm terracotta-orange borrowed from hearth brick and autumn foliage, reserved exclusively for the primary "Book a room" CTA. That single dot of color carries enormous weight precisely because nothing around it competes.

Shape language is binary and unambiguous. Primary CTAs are sharp rectangles (`{rounded.none}`) with generous padding at 24px vertical — a confident slab of a button. Secondary calls-to-action are pure pills (`{rounded.pill}`), thin-bordered and ghost-like against the canvas, closer in spirit to a text link than a button. There are no mid-range radii in the system. Photography is always rectangular, edge-filling, and unshadowed. The effect is a design language that feels like a building: load-bearing elements are solid and rectilinear; decorative ones are absent.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — the site's logo is rendered on this exact tone, making the background feel like an extension of the brand mark itself
- Akkurat-Mono all-caps for all display text — sizes 24–42px at weight 400, no tracking, no decorative treatments; the monospace grid brings structural calm
- Akkurat (proportional companion) for body copy and CTA button labels — the two faces share DNA and coexist without collision
- A single chromatic accent: `{colors.primary}` terracotta, appearing only on the primary booking CTA and nowhere else in the chromatic palette
- Deep forest teal (`{colors.surface}`) for inverted full-bleed sections — a second canvas tied to the Hudson Valley landscape rather than brand guidelines
- Button shape is binary: sharp rectangle (`{rounded.none}`) for the primary filled CTA; pill (`{rounded.pill}`) for secondary outline interactions
- Typography hierarchy is managed entirely through size and face, never weight — Akkurat-Mono and Akkurat both run at weight 400 across all roles
- Spacing is generous and asymmetric: base rhythm anchors at 50px (`{spacing.xl}`) for section breathing, not the conventional 64px — a non-standard interval that reads as handcrafted
- Email capture inputs use bottom-border-only treatment on a transparent field — no box, no fill, no rounding; the form element nearly disappears into the canvas
- Motion is unhurried: 0.3s for links and nav, 0.5s for button borders, 0.8s for hero transforms — all `ease-out`, nothing instant

## Colors

### Primary Surface
- **Inness Parchment** (`{colors.background}`): The signature canvas — a warm off-white at `#f0eeea`, derived directly from the logo's safe-zone background. Warmer than a neutral grey, cooler than cream; it reads as aged paper or undyed cotton. Used for the entire page background, the sticky header, and any section in its "resting" state.
- **Inness White** (`{colors.surface-elevated}`): Pure white for elevated modal panels, overlaid content containers, and form surfaces that require visual separation from the parchment ground.

### Inverted Surface
- **Hudson Teal** (`{colors.surface}`): A deep, muted forest green anchored in Hudson Valley river-valley foliage. Used for full-bleed dark sections, the night-mode footer, and dark CTA regions. Text on this surface uses `{colors.on-surface}`.

### Brand Accent
- **Hearth Terracotta** (`{colors.primary}`): The single chromatic element in an otherwise monochrome system. Applied exclusively to the primary "Book a room" CTA button. Its warmth reads as firelight, autumn leaf, or brick — all deeply Inness associations. The hover state deepens to `{colors.primary-hover}`.

### Text / Ink
- **Carbon** (`{colors.ink}`): Near-pure black at `#000000` — the only text color in the system. Used for headings, body copy, navigation labels, SVG icon strokes, and border outlines. The system has no secondary text color; hierarchy is handled through size and face, not tonal variation.

### Borders & Interaction
- **Soft Outline** (`{colors.border}`): Converted from `rgba(0,0,0,0.25)` — a light grey suitable for secondary button outlines and structural dividers against the parchment surface. The `border-dark` token (`{colors.border-dark}`) provides a full-black rule for input bottom-borders and vertical column dividers.
- **Focus Blue** (`{colors.focus-ring}`): The system inherits browser-default focus behavior at `#2196f3` — a reminder that accessibility was acknowledged structurally, even in a near-chromeless system.

## Typography

### Font Family
- **Primary monospace**: `Akkurat-Mono`, with fallbacks: `'Courier New', Courier, monospace`. Self-hosted woff2. Used for all display headings, labels, navigation links, and captions — always all-caps. Akkurat-Mono is a grotesque-derived mono by Lineto with more warmth and legibility than conventional typewriter faces.
- **Body sans-serif**: `Akkurat`, with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. Self-hosted woff2, with an italic variant (`Akkurat-Italic`). Used for descriptive body paragraphs and button labels — the proportional sibling to Akkurat-Mono.
- **External substitution**: For Akkurat-Mono, use **Space Mono** (Google Fonts) — a grotesque-influenced monospace in the same optical family. For Akkurat, use **Inter** (Google Fonts), acknowledging the difference in character: Akkurat is more humanist, Inter more geometric.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Primary hero headline — property name at large scale, arrival callouts |
| `display` | Section-level editorial headings — experience names, amenity intros |
| `heading-section` | Subsection titles, room category labels |
| `heading-sub` | Feature list headings, inline callout titles |
| `body-large` | Lead editorial paragraphs, property descriptions |
| `body` | Standard body text, amenity descriptions, form labels |
| `nav-link` | Navigation items, header links — Akkurat-Mono uppercase 13px |
| `button-ui` | CTA text — Akkurat proportional, weight 500, `0.52px` tracking |
| `label` | Section eyebrows, category markers — Akkurat-Mono uppercase `0.7px` tracking |
| `caption` | Image captions, fine-print labels — Akkurat-Mono uppercase `1.2px` tracking |

### Principles
- **Monospace governs the scaffolding; proportional humanizes the content.** Akkurat-Mono defines the structural language — every heading, label, and wayfinding element. Akkurat carries the prose and the CTAs. The roles never swap.
- **All-caps is the default, not an exception.** Every Akkurat-Mono use in the system runs uppercase. This transforms a standard grotesque mono into an almost architectural lettering system — closer to stone-cut inscription than digital UI.
- **Single weight throughout.** Akkurat-Mono and Akkurat both operate at weight 400. The hierarchy lives in size and face selection alone. The single exception is `{typography.button-ui}` at weight 500, used only on primary CTA labels.
- **Letter-spacing is used sparingly.** Most Akkurat-Mono tokens carry `0px` letter-spacing — the all-caps transformation provides enough visual density without added tracking. Only captions and labels add `0.7–1.2px` for small-size legibility.
- **No italic for hierarchy.** The Akkurat Italic variant exists in the system's font files but does not appear to drive a distinct typographic role — it remains a style option for editorial emphasis within prose, not a token-defined tier.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (the smallest increment in the dembrandt scan, appearing as the micro padding on button states).

The scale is characterized by a rapid jump from compact close-range values (5–20px) to section-level breathing (50–120px). The `{spacing.xl}` value of 50px is unusually chosen — not the conventional 48 or 64 — and its recurrence (33 instances in dembrandt) suggests a deliberately non-standard module that avoids the predictability of 8-point grids. The effect is that sections feel hand-spaced, not generated.

### Grid & Container
- Max content width: 1920px wide master grid, with 1600px and 1440px inner content containers
- Two-column editorial split is the dominant pattern on desktop: landscape photography on one side, text on the other — often 60/40 rather than 50/50
- The navigation bar centers the wordmark SVG with flanking links spread to the left and right rails — a classic hospitality layout, executed with mono-type precision
- Room and experience cards run in a two-up grid with generous gutters and no visible card borders

### Whitespace Philosophy
- **Space as texture.** The parchment canvas is not empty — it is itself a material. Large margins and generous section gaps feel like the space around a well-framed print, not like content that hasn't been filled yet.
- **Vertical rhythm in large intervals.** Primary section breathing uses `{spacing.xl}` (50px) and `{spacing.2xl}` (75px). The jump from content-level spacing (~20px) to section-level spacing (~75px) is dramatic — more than 3× — which gives the layout its sense of discrete, unhurried episodes.
- **No inline decoration.** There are no rules, dividers, or decorative borders between sections. Separation is achieved through generous spacing alone, consistent with the hotel's minimal-intervention ethos.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default: canvas sections, cards, navigation, photography containers |
| Bottom Rule (Level 1) | `border-bottom: 1px solid {colors.border-dark}` | Input fields at rest, inline dividers |
| Outline (Level 2) | `1px solid {colors.border}` | Secondary pill buttons, structural containers |
| Focus Ring | `box-shadow: 0 0 0 1px {colors.focus-ring}` | Browser-default focus on email inputs |

**Shadow Philosophy**: Inness uses no drop shadows anywhere in the brand-facing design. The system is completely flat. The hotel's aesthetic position — honest materials, pastoral light, natural surfaces — extends to the interface: no artificial depth, no computed lighting. Depth is communicated through the layering of full-bleed photography and inverted `{colors.surface}` sections stacked against the parchment canvas, not through shadow.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary CTA button, image containers, cards, input fields — the default Inness shape |
| `pill` | 9999px | Secondary outline buttons, tag-like filter labels, email-submit spans |

Inness's shape language is binary with no middle ground. The primary CTA is a flat rectangle with 24px vertical padding — a weighted, architecturally confident block. Secondary interactions take the opposite extreme: pure pills that feel lightweight and optional. The dembrandt scan found a `10px` value on a single span element at low confidence — this is likely a browser default on an isolated component, not a system radius. The `50%` value (14 occurrences across buttons, spans, and links) is the pill system.

## Components

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

### Button Variants

- **`button-primary`** — The "Book a room" button: `{colors.primary}` terracotta fill, `{colors.on-primary}` white text, `{typography.button-ui}` Akkurat at 13px weight 500 with `0.52px` tracking, `{rounded.none}` sharp corners, `24px 65px` padding — a deliberately oversized CTA pad that commands the page without decoration. Hover transitions to `{colors.primary-hover}` over 0.5s ease.
- **`button-secondary`** — Pill outline variant: transparent fill, `{colors.border}` 1px outline, `{rounded.pill}`, `{typography.button-ui}`, `12px 24px` padding. Used for secondary actions like "Learn more" or "View all rooms." Hover fills to `{colors.ink}` with `{colors.surface-elevated}` text.
- **`button-ghost`** — Inline text link: transparent, no border, `{typography.nav-link}` Akkurat-Mono uppercase, `4px 0px` padding. Hover adds underline. Used for editorial in-text navigation and footer links.

### Cards

Room and experience cards: `{colors.surface-elevated}` white background, `{rounded.none}` sharp corners, no shadow, no border, `20px` internal padding for the text zone beneath photography. Photography fills the card top edge-to-edge. The card itself provides structure through spatial relationship, not chrome.

### Inputs

Email capture and form fields: transparent background on `{colors.background}`, bottom-only rule at rest using `{colors.border-dark}` (`1px solid black`), `{rounded.none}`, `{typography.body}` Akkurat at 16px, `0px 0px 10px` padding (no horizontal padding — the field aligns flush with surrounding text). Focus state adds a `1px {colors.focus-ring}` glow. The input nearly disappears into the canvas at rest — intentional dematerialization of the form.

### Badges / Tags

Category and amenity tags: transparent fill, `{colors.border}` pill outline, `{typography.caption}` Akkurat-Mono uppercase `1.2px` tracking, `{rounded.pill}`, `4px 12px` padding. Used for labeling content types, amenity categories, and filter chips in experience browsing.

### Navigation

The Inness header places the `INNESS` wordmark SVG at center with navigation links spread to either side in `{typography.nav-link}` Akkurat-Mono uppercase 13px. The header sits on `{colors.background}` parchment with no bottom border or elevation. On mobile, a hamburger collapses to a full-screen overlay. The nav does not change color on scroll — the parchment surface remains constant.

## Do's and Don'ts

### Do
- Use `{colors.background}` parchment as the canvas — pure white feels clinical against Akkurat-Mono; the warmth of `#f0eeea` is what makes the monospace type feel organic rather than utilitarian
- Render all Akkurat-Mono text uppercase — the all-caps convention is not optional decoration, it is the face's function within the system
- Reserve `{colors.primary}` terracotta exclusively for the primary booking/reservation CTA — its scarcity is its power; diluting it into secondary elements collapses the hierarchy
- Use `{rounded.none}` (sharp rectangle) for filled CTAs and `{rounded.pill}` for outline/secondary interactions — never introduce an intermediate radius
- Set `{typography.button-ui}` at weight 500 and `0.52px` tracking for CTA labels — this is the only weight escalation in the entire system
- Honor the large vertical spacing intervals at `{spacing.xl}` (50px) and `{spacing.2xl}` (75px) between sections — the design's luxury signal is as much in the space as in the content
- Use bottom-border-only inputs on transparent fields — the dematerialized form treatment is fundamental to the tactile parchment aesthetic
- Apply `{colors.surface}` deep teal for full-bleed inverted sections only — this is a canvas-level color, not an element-level accent

### Don't
- Don't add tracking to Akkurat-Mono display headlines — the all-caps face carries its own spacing density; added tracking breaks the mono grid relationship
- Don't introduce a second chromatic accent beyond `{colors.primary}` — the terracotta reads as the sole moment of warmth precisely because nothing else competes
- Don't apply shadows to any brand-facing element — the system is intentionally flat; even subtle card shadows would introduce a sophistication register inconsistent with the pastoral material honesty
- Don't use Akkurat-Mono in mixed case for body copy — the face has limited legibility at mixed case in running text; Akkurat (proportional) owns the prose register
- Don't crop photography to circular or soft-rounded frames — all imagery is rectangular and edge-filling; rounding carries zero precedent in the system
- Don't introduce a third typeface — Akkurat-Mono and Akkurat are the complete typographic world of Inness; any addition reads as noise
- Don't replace the parchment canvas with pure white or cool grey — both read as generic hospitality-SaaS and erase the material quality that makes the system distinctive
- Don't use mid-range border-radius values (4–16px) — the shape language is binary; `{rounded.none}` or `{rounded.pill}`, nothing between
- Don't bold heading text — the single-weight rule is load-bearing; a 600 or 700 weight Akkurat-Mono heading looks aggressive rather than composed

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <450px | Single column, wordmark centered, nav collapses to hamburger |
| Mobile | 450–767px | Single column, full-width photography, primary CTA full-width |
| Tablet | 768–1023px | Two-column grid possible for room cards; nav horizontal |
| Desktop | 1024–1439px | Full two-column editorial splits, wide CTA sections |
| Wide Desktop | 1440–1919px | Maximum content width, expanded outer margins |
| Cinema | ≥1920px | Master grid boundary, photography at full resolution |

### Touch Targets
- Primary CTA (`{components.button-primary}`): 24px vertical padding plus 13px line-height gives ~50px tap height — above the 44px minimum
- Secondary pill buttons: 12px vertical padding plus type height gives ~37px — adequate for desktop, borderline on mobile; full-width expansion on small viewports recommended
- Navigation links: tap target includes the Akkurat-Mono label plus adjacent whitespace; no explicit padding-y increase observed in the dembrandt data

### Collapsing Strategy
- **Nav**: Hamburger overlay on tablet and below; wordmark remains centered; the parchment header surface does not change color
- **Hero**: Full-viewport photography maintains composition on all viewports; Akkurat-Mono headline scales from `{typography.display-hero}` to `{typography.heading-sub}`; no gradient scrim
- **Room / experience grid**: Two-column desktop collapses to single column on mobile; card proportions (photography top, text below) preserved
- **CTA section**: The terracotta `{components.button-primary}` becomes full-width on mobile, preserving the visual weight that makes the sole chromatic element land with impact
- **Section spacing**: `{spacing.2xl}` (75px) inter-section vertical breathing reduces to `{spacing.xl}` (50px) on tablet and `{spacing.lg}` (40px) on mobile — the generous pace narrows without becoming cramped

### Image Behavior
- Photography is full-bleed within its container at all breakpoints — never inset, never rounded, never shadowed
- Hero imagery maintains a 16:9 or landscape proportion convention; vertical centering within the viewport on scroll
- Room card photography maintains consistent aspect ratios (roughly 4:3) across grid reflows — proportions are locked, not cropped ad-hoc

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` (`#f0eeea`)
- Primary text: `{colors.ink}` (`#000000`)
- Primary CTA fill: `{colors.primary}` (`#d74f37`)
- CTA hover: `{colors.primary-hover}` (`#b7432f`)
- CTA text: `{colors.on-primary}` (`#ffffff`)
- Inverted surface: `{colors.surface}` (`#223430`)
- Border outline: `{colors.border}` (`#bfbfbf`)
- Input rule: `{colors.border-dark}` (`#000000`)

### Example Component Prompts

- "Build an Inness hero section on `{colors.background}` (`#f0eeea`) parchment canvas. Full-bleed photography occupying 55% of the viewport height, no border, no shadow, no radius. Below the image: a `{typography.heading-sub}` (24px Akkurat-Mono uppercase, `{colors.ink}`) section label, then a `{typography.display-hero}` (42px Akkurat-Mono uppercase, weight 400, `{colors.ink}`) headline, then a `{components.button-primary}` at `padding: 24px 65px` in `{colors.primary}` terracotta. No gradient scrim over the photography."
- "Design an Inness 'Book a room' button: `{colors.primary}` (`#d74f37`) background, `{colors.on-primary}` white text, `{typography.button-ui}` (13px Akkurat weight 500, `0.52px` tracking, uppercase), `{rounded.none}` sharp corners, `24px 65px` padding, no border. Hover state: `{colors.primary-hover}` (`#b7432f`) background, same text and padding, `transition: background-color 0.5s ease`."
- "Create an Inness room card: `{colors.surface-elevated}` white, `{rounded.none}`. Photography at top, full card width, no border or shadow. Below photography: a `{typography.caption}` (12px Akkurat-Mono uppercase `1.2px` tracking) category label in `{colors.ink}`, then a `{typography.heading-sub}` (24px Akkurat-Mono uppercase) room name in `{colors.ink}`, then a `{typography.body}` (16px Akkurat, 1.52 line-height) description in `{colors.ink}`, then a `{components.button-secondary}` pill link. Internal text padding: `20px`."
- "Build the Inness navigation bar on `{colors.background}` (`#f0eeea`). Left: 2–3 nav links in `{typography.nav-link}` (13px Akkurat-Mono uppercase, `{colors.ink}`). Center: 'INNESS' SVG wordmark at ~120px wide. Right: reservation link + `{components.button-primary}` 'Book a room' in `{colors.primary}`. No bottom border, no elevation, no background change on scroll."
- "Design an Inness email capture input: transparent background on `{colors.background}`, `border-bottom: 1px solid {colors.border-dark}` at rest (no box border, no left/right/top border), `{rounded.none}`, `{typography.body}` Akkurat 16px in `{colors.ink}`, `padding: 0px 0px 10px`. On focus: `box-shadow: 0 0 0 1px {colors.focus-ring}`. Placeholder text: same face, same size, lighter appearance. No background fill at any state."
- "Create an Inness inverted CTA section: full-bleed `{colors.surface}` (`#223430`) deep teal background. `{typography.heading-section}` (32px Akkurat-Mono uppercase) in `{colors.on-surface}` white. Below: `{typography.body-large}` (24px Akkurat) description in `{colors.on-surface}`. `{components.button-primary}` terracotta CTA button. The section has `{spacing.2xl}` (75px) vertical padding top and bottom."

### Iteration Guide

1. Begin with `{colors.background}` (`#f0eeea`) parchment as the canvas — this tone is the most immediately legible signal of the Inness brand and the ground from which everything else reads.
2. Apply Akkurat-Mono uppercase at every structural level: headings, labels, navigation, captions. The all-caps monospace grid is the system's defining visual signature — without it, the design reads as generic hospitality.
3. Use `{colors.ink}` black and the parchment canvas for 95% of the chromatic surface. The entire visual hierarchy lives in size and face, not in color.
4. Place `{colors.primary}` terracotta on exactly one element per viewport: the primary "Book a room" CTA. Its singularity is its function.
5. All buttons are either sharp rectangles (`{rounded.none}`, filled `{colors.primary}`) or pure pills (`{rounded.pill}`, outline). No compromise between the two shapes.
6. Sections breathe at `{spacing.xl}` (50px) minimum, `{spacing.2xl}` (75px) preferred — the generous intervals are not empty space but material presence.
7. Use `{colors.surface}` deep teal for any section that needs to read as distinct from the parchment: full-bleed dark modules, footer, night-mode variants.
8. Keep the system typographically binary: Akkurat-Mono for structure, Akkurat for prose. No third typeface, no weight escalation beyond the single weight-500 on button labels.

---

## 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 Inness. Brand names and trademarks belong to their respective owners.