---
version: alpha
name: House of Honey
description: Warm editorial minimalism for a luxury interior design studio — a soft ivory canvas, espresso-brown ink, and a single honeyed accent. Serif display headlines paired with quiet uppercase sans labels, generous whitespace, and photography that does the talking.
colors:
  # Canvas + ink
  background: "#f6f1e9"      # warm ivory canvas
  surface: "#ffffff"         # gallery white image/card surface
  surface-soft: "#efe8dc"    # subtle warm panel
  ink: "#2b241d"             # espresso brown — primary text
  ink-secondary: "#6b6055"   # muted taupe — secondary copy
  ink-muted: "#9b9082"       # captions, metadata

  # Accent
  primary: "#b8893f"         # honey gold accent
  accent-deep: "#8a6428"     # deeper amber for hover
  accent-soft: "#e8d9bf"     # pale honey tint surface

  # Lines + chrome
  border: "#ddd2c2"          # hairline warm border
  border-strong: "#c8baa4"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f6f1e9"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.25px
  heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  project-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0.2px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.2px
  label-caps:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2.4px
  nav-link:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.6px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.8px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.4px

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: 6px
  pill: 9999px

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

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

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent-deep}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

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

  card-project:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.project-title}"
    rounded: "{rounded.none}"
    padding: 24px

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

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

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# House of Honey Design System

## Overview

House of Honey is a luxury interior design studio, and its website is built like a printed monograph — a warm ivory canvas (`{colors.background}`) where full-bleed photography carries the emotional weight and the typography stays deliberately quiet. The studio's work spans "Interiors, Objects & Atmospheres," and the design system mirrors that range: restrained chrome, generous margins, and a single honeyed accent (`{colors.primary}`) that nods to the brand name without ever shouting.

The defining tension is serif-versus-sans. Headlines are set in a high-contrast serif (Cormorant Garamond as the closest open companion) at large sizes with near-default tracking, giving project names and section titles an editorial, almost couture feel. Everything else — navigation, labels, body copy, buttons — is a light-weight geometric sans (Jost) in uppercase with wide letter-spacing (1.6px–2.4px). The contrast between an expressive display serif and whisper-thin tracked-out caps is the signature move.

Color is intentionally narrow. The palette is warm-neutral throughout: an ivory page, gallery-white image surfaces, and espresso-brown ink (`{colors.ink}`) rather than black, so nothing feels cold or digital. The honey accent appears sparingly — on links, hover states, and small badges — never as a flood. There are no rounded corners of consequence; edges are square, borders are hairline-thin warm lines, and depth comes from spacing and photography rather than shadow.

**Key Characteristics:**
- Warm ivory canvas (`{colors.background}`) with espresso-brown ink (`{colors.ink}`) — never pure black or white
- Display serif (Cormorant Garamond) for headlines and project titles
- Light geometric sans (Jost) in tracked-out uppercase for nav, labels, and buttons
- A single honey-gold accent (`{colors.primary}`) used sparingly for links and hover
- Square edges (`{rounded.none}`) and hairline warm borders — no shadows
- Photography-forward layout with gallery-white image surfaces
- Generous editorial whitespace (`{spacing.3xl}`–`{spacing.4xl}` between sections)

## Colors

### Canvas & Ink
- **Ivory Canvas** (`{colors.background}`): The warm page background across the whole site.
- **Gallery White** (`{colors.surface}`): Image surfaces and content cards that sit on the ivory.
- **Soft Panel** (`{colors.surface-soft}`): Subtle warm sectioning panel.
- **Espresso Ink** (`{colors.ink}`): Primary text, headings, dark buttons.
- **Taupe** (`{colors.ink-secondary}`): Secondary body copy.
- **Muted Stone** (`{colors.ink-muted}`): Captions and metadata.

### Accent
- **Honey Gold** (`{colors.primary}`): Links, hover fills, the brand accent.
- **Deep Amber** (`{colors.accent-deep}`): Pressed/hover deepening, badge text.
- **Pale Honey** (`{colors.accent-soft}`): Tinted badge and highlight surface.

### Lines & Chrome
- **Hairline Border** (`{colors.border}`): Dividers, card outlines, nav underline.
- **Strong Border** (`{colors.border-strong}`): Input outlines, emphasized rules.

### On-Color
- **On Primary** (`{colors.on-primary}`): Text on honey fills.
- **On Ink** (`{colors.on-ink}`): Ivory text on espresso buttons.

## Typography

### Font Family
- **Display**: `Cormorant Garamond`, fallbacks `Georgia, serif` — high-contrast serif for headlines and project titles.
- **Text/UI**: `Jost`, fallbacks `Helvetica Neue, Arial, sans-serif` — light geometric sans for body, labels, nav, buttons.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial headline |
| `display` | Large section serif headings |
| `heading` | Standard serif section heads |
| `project-title` | Project/portfolio item names |
| `body-large` | Intro paragraphs, lead copy |
| `body` | Standard reading text |
| `label-caps` | Tracked-out uppercase section labels |
| `nav-link` | Navigation links (uppercase, tracked) |
| `button-ui` | Button labels (uppercase, tracked) |
| `caption` | Metadata, image captions |

### Principles
- **Serif speaks, sans whispers**: The serif carries voice and emotion; the sans is purely functional and always tracked-out in caps.
- **Light weights**: Body and UI sans sit at weight 300–400 — nothing heavier than the serif headlines.
- **Wide tracking on caps**: Uppercase labels run 1.6px–2.4px letter-spacing for an editorial, gallery-signage feel.
- **Warm ink, never black**: Type renders in espresso (`{colors.ink}`), preserving the warmth of the canvas.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large editorial jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (140px) for section separation.

### Grid & Container
- Wide content container with generous side margins
- Photography in responsive grids — 2 and 3 column, collapsing to single column
- Full-bleed hero imagery with serif overlay or stacked title

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical gaps between sections let photography and serif titles stand alone.
- **Image-first**: Whitespace and the photography do the work; chrome stays minimal.
- **Square and quiet**: Hairline borders and square edges keep the structure understated.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, images, inputs — the default |
| `xs` | 2px | Rare soft detail |
| `sm` | 4px | Small functional containers |
| `md` | 6px | Optional grouped elements |
| `pill` | 9999px | Small badges only |

## Components

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

### Buttons
- **`button-primary`** — Espresso fill, ivory text, square edges, tracked-out caps; hovers to honey gold.
- **`button-outline`** — Ivory surface with espresso outline; inverts to espresso fill on hover.

### Badges
- **`badge`** — Pale honey surface, deep amber text, the one place a pill radius appears.

### Cards
- **`card`** — Gallery-white surface, hairline warm border, square edges, no shadow.
- **`card-project`** — Portfolio item with serif `project-title`.

### Inputs
- **`input`** — White surface, square edges, strong warm border; focus shifts the border to honey gold.

### Navigation
- **`nav-bar`** — Ivory header, espresso links in tracked-out uppercase sans, hairline bottom border.

## Do's and Don'ts

### Do
- Use the serif (`{typography.display-hero}`) for headlines and the sans for everything else
- Track out uppercase labels (1.6px–2.4px) for nav, buttons, and section labels
- Keep edges square (`{rounded.none}`); reserve pill radius for badges only
- Use espresso ink (`{colors.ink}`) on the ivory canvas — never pure black
- Let honey gold (`{colors.primary}`) appear sparingly on links and hover
- Lead with photography on gallery-white surfaces

### Don't
- Don't set body or UI text in the serif — it's display-only
- Don't flood the page with the honey accent
- Don't use heavy shadows or large radii — depth comes from spacing
- Don't use pure black or pure white — the warmth is the point
- Don't tighten tracking on the uppercase sans labels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked imagery, reduced section spacing |
| Tablet | 600–1024px | 2-column photo grids, expanded margins |
| Desktop | >1024px | Full multi-column galleries, maximum whitespace |

### Collapsing Strategy
- Hero serif scales down but keeps near-default tracking
- Navigation collapses to a hamburger menu
- Photo grids: 3-column → 2-column → single column
- Section spacing reduces from 140px toward 64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Ivory `{colors.background}`
- Heading/body text: Espresso `{colors.ink}`
- Accent / links: Honey Gold `{colors.primary}`
- Borders: Hairline warm `{colors.border}`
- Primary button: Espresso fill `{colors.ink}`, hover honey `{colors.primary}`

### Example Component Prompts
- "Create a hero on ivory `{colors.background}`. Headline in Cormorant Garamond 64px weight 400, espresso `{colors.ink}`. Eyebrow label in Jost 12px uppercase, letter-spacing 2.4px, `{colors.ink-secondary}`. Square espresso CTA button with tracked-out caps."
- "Design a project card: gallery-white image on top, serif title 24px below, hairline border `{colors.border}`, square edges, no shadow."
- "Build a contact form: white inputs, square edges, strong warm border `{colors.border-strong}`; focus border turns honey gold `{colors.primary}`."

---

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