---
version: alpha
name: Birchmore Group
description: Editorial property-studio minimalism — deep maroon brand ink on warm cream paper, a three-font system (Favorit grotesque body, Gaisyr geometric display, Times Now serif accents), small 2px radii, hairline maroon rules and generous gallery whitespace.
colors:
  # Canvas + paper
  background: "#fffce5"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  paper-warm: "#fffbcc"
  paper-cream: "#fff9bf"

  # Ink
  ink: "#212121"
  ink-soft: "#424242"
  ink-muted: "#757575"
  ink-faint: "#a2a2a2"

  # Brand
  primary: "#790000"        # Birchmore Maroon — headings, rules, links
  on-primary: "#fffce5"

  # Accents
  accent-yellow: "#feca26"
  accent-coral: "#f37046"
  accent-peach: "#f4ddcb"

  # Neutral scale
  gray-100: "#f2f2f2"
  gray-200: "#ededed"
  gray-300: "#dedede"
  gray-400: "#c4c4c4"
  gray-500: "#757575"

  # Lines
  border: "#ededed"
  rule-maroon: "#790000"

  # On-color
  on-yellow: "#212121"
  on-coral: "#ffffff"

typography:
  display-hero:
    fontFamily: "Gaisyr, Sora, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.6px
  display-serif:
    fontFamily: "Times Now, Playfair Display, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.10
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Gaisyr, Sora, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Gaisyr, Sora, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.2px
  serif-quote:
    fontFamily: "Times Now, Playfair Display, serif"
    fontSize: 28px
    fontWeight: 300
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.2px
  label-mono:
    fontFamily: "Favorit, Inter, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.2px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 4px
  md: 8px
  pill: 25px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.micro}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.micro}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.micro}"
    padding: 12px 24px
    borderColor: "{colors.primary}"

  button-pill:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 22px

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

  badge:
    backgroundColor: "{colors.accent-peach}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.micro}"
    padding: 4px 10px

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

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
    padding: 0px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.paper-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.micro}"
    padding: 10px 14px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.rule-maroon}"

  divider-maroon:
    backgroundColor: "{colors.rule-maroon}"
    height: 2px

  pull-quote:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.serif-quote}"
    padding: 40px 0px
---

# Birchmore Group Design System

## Overview

Birchmore Group's website reads like a printed property monograph rendered for the screen — a warm cream page (`{colors.background}`), a single deep maroon brand color (`{colors.primary}`) doing nearly all the expressive work, and a typographic system confident enough to mix a grotesque, a geometric display sans, and a high-contrast serif on the same spread. The aesthetic is editorial-minimal: lots of breathing room, hairline maroon rules between sections, and project imagery treated like plates in a catalogue rather than cards in a SaaS grid.

The palette is deliberately narrow and analog. Instead of the usual white-and-blue tech canvas, the paper is a soft, sun-bleached cream and the ink is a near-black charcoal (`{colors.ink}` / `{colors.ink-soft}`). Maroon is the only saturated voice in the chrome — it underlines headings, draws the top and bottom rules of the masthead, colors links, and fills the primary call to action. Yellow (`{colors.accent-yellow}`), coral (`{colors.accent-coral}`) and peach (`{colors.accent-peach}`) appear sparingly as warm punctuation, never as structural UI color.

Typography is the personality. Gaisyr, a geometric humanist sans, sets display and section headings with slight negative tracking for a composed, architectural feel. Favorit, a Swiss-style grotesque, carries all body and UI text — neutral, legible, quietly modern. Times Now, a fashionable high-contrast serif, surfaces for pull quotes and the occasional oversized statement, lending the whole system an art-direction, gallery-catalogue register. Closest Google substitutes are Sora (Gaisyr), Inter (Favorit) and Playfair Display (Times Now).

Geometry stays restrained and print-like. Radii are tiny — a 2px `{rounded.micro}` on buttons and inputs, 4px on cards — so corners read as crisp paper edges rather than soft app chrome. The one exception is an occasional 25px pill for tag-style buttons. Depth is almost absent: separation comes from maroon rules, whitespace and the cream-versus-white surface shift, not from shadows.

**Key Characteristics:**
- Warm cream paper (`{colors.background}`) instead of white — analog, editorial canvas
- Single deep maroon brand color (`{colors.primary}`) for headings, rules, links and primary CTA
- Three-font system: Gaisyr (geometric display), Favorit (grotesque body), Times Now (contrast serif)
- Hairline and 2px maroon rules as the primary separator — minimal shadow use
- Tiny 2px radii read as crisp paper edges; warm-toned accents used as punctuation only
- Project imagery presented like catalogue plates with generous gallery whitespace

## Colors

### Primary
- **Birchmore Maroon** (`{colors.primary}`): The single brand color — headings, section rules, links, primary buttons.
- **Cream Paper** (`{colors.background}`): The page canvas — warm, sun-bleached, anti-tech.
- **White Surface** (`{colors.surface}`): Project cards and image plates that sit on the cream.

### Ink
- **Ink** (`{colors.ink}`): Primary near-black charcoal for body and headings on light surfaces.
- **Ink Soft** (`{colors.ink-soft}`): Standard reading copy.
- **Ink Muted** (`{colors.ink-muted}`): Secondary text, captions, metadata.
- **Ink Faint** (`{colors.ink-faint}`): Placeholders and disabled states.

### Accents
- **Accent Yellow** (`{colors.accent-yellow}`): Warm highlight — tag pills, small emphasis moments.
- **Accent Coral** (`{colors.accent-coral}`): Occasional warm call-out.
- **Accent Peach** (`{colors.accent-peach}`): Soft badge / chip background tint.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Subtle off-white block backgrounds.
- **Paper Warm** (`{colors.paper-warm}`): Tinted feature-block background, a shade above cream.
- **Paper Cream** (`{colors.paper-cream}`): Deeper warm tint for layered sections.

### Neutral Scale
- **Gray 100–500** (`{colors.gray-100}`–`{colors.gray-500}`): Borders, dividers, subtle fills.
- **Border** (`{colors.border}`): Default hairline separators between content blocks.
- **Rule Maroon** (`{colors.rule-maroon}`): The signature 2px maroon section rule.

## Typography

### Font Family
- **Display**: `Gaisyr` (geometric humanist sans), fallback `Sora, sans-serif`
- **Body / UI**: `Favorit` (Swiss grotesque), fallback `Inter, sans-serif`
- **Serif accent**: `Times Now` (high-contrast display serif), fallback `Playfair Display, serif`

### 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` | Gaisyr hero headline, slight negative tracking |
| `display-serif` | Times Now oversized statement |
| `section-heading` | Section titles in Gaisyr |
| `sub-heading` | Sub-section headings |
| `card-title` | Project / card titles in Favorit |
| `serif-quote` | Times Now pull quotes |
| `body-large` | Intro and feature copy |
| `body` | Standard reading text |
| `body-medium` | Emphasized labels, nav |
| `button-ui` | Buttons and links |
| `caption` | Metadata, captions |
| `label-mono` | Uppercase tracked eyebrow labels |

### Principles
- **Three fonts, three jobs**: Gaisyr announces (display), Favorit reads (body/UI), Times Now embellishes (quotes/statements). Never swap roles.
- **Negative tracking on display only**: Gaisyr headings tighten to ~-1.6px; body stays at default tracking for legibility.
- **Serif as art direction**: Times Now appears at large sizes and light weights to read as editorial, not as running body.
- **Maroon, not bold, for emphasis in headings**: color carries weight as much as font-weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px with large editorial jumps (`{spacing.3xl}`–`{spacing.5xl}`) between major sections to create gallery whitespace.

### Grid & Container
- Max content width approximately 1280px, centered
- Hero: single-column statement with a maroon top/bottom rule masthead
- Projects: 2–3 column plate grid with generous gutters
- Full-width 2px maroon rules separate major sections

### Whitespace Philosophy
- **Catalogue emptiness**: large vertical padding between sections; imagery breathes like plates on a page.
- **Rules over boxes**: section separation comes from maroon hairlines and whitespace, not bordered containers.
- **Cream/white contrast**: the only "elevation" is the shift from cream paper to white surface.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, on cream | Page background, text blocks |
| Surface (Level 1) | White on cream, `1px {colors.border}` | Project cards, plates |
| Rule (Level 1b) | `2px {colors.rule-maroon}` divider | Section separators, masthead |
| Soft Card (Level 2) | White + faint `{colors.border}` | Content cards with hairline outline |

**Depth Philosophy**: Birchmore is almost shadow-free. The system is print-derived — separation is achieved through color contrast (cream vs white), maroon rules and whitespace. Where a card lifts, it does so with a hairline `{colors.border}`, never a heavy drop shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image plates, flush blocks |
| `micro` | 2px | Buttons, inputs, badges — crisp paper edge |
| `xs` | 3px | Small chips |
| `sm` | 4px | Cards |
| `md` | 8px | Larger containers |
| `pill` | 25px | Tag-style pill buttons |
| `circle` | 9999px | Icon toggles, avatars |

## Components

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

### Buttons
- **`button-primary`** — Maroon fill, cream text, 2px radius. The default CTA; hovers to charcoal.
- **`button-secondary`** — White surface, maroon text and maroon 1px outline.
- **`button-pill`** — Yellow pill (25px radius) for tag-style actions.

### Links & Badges
- **`link-maroon`** — Maroon text, medium weight, underline on hover.
- **`badge`** — Peach tint, uppercase tracked `{typography.label-mono}`.

### Cards
- **`card`** — White surface on cream, hairline `{colors.border}`, 4px radius.
- **`card-project`** — Image-led plate; title in Favorit below the image, minimal chrome.
- **`card-feature`** — Warm paper-tinted block (`{colors.paper-warm}`) with generous padding.

### Inputs
- **`input`** — White surface, gray hairline, 2px radius. Focus switches border to maroon.

### Navigation
- **`nav-bar`** — Cream masthead with a 2px maroon bottom rule. Favorit medium links, search-icon toggle.

### Distinctive Components
- **`divider-maroon`** — The signature 2px maroon full-width rule between sections.
- **`pull-quote`** — Oversized Times Now serif quote in maroon, set in open whitespace.

## Do's and Don'ts

### Do
- Use cream (`{colors.background}`) as the canvas, not white
- Use maroon (`{colors.primary}`) as the single brand voice — rules, links, headings, CTA
- Keep the three-font roles strict: Gaisyr display, Favorit body, Times Now serif accent
- Separate sections with 2px maroon rules and whitespace
- Keep radii tiny (2px) so corners read as paper edges
- Use warm accents (yellow, coral, peach) sparingly as punctuation

### Don't
- Don't default to white backgrounds — the cream is the brand
- Don't add heavy drop shadows — the system is print-flat
- Don't run Times Now as body copy — serif is for quotes and statements only
- Don't introduce cool tech blues into chrome
- Don't use large radii on buttons/cards except the 25px tag pill
- Don't let accent colors become structural UI color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked plates, reduced section padding |
| Tablet | 600–1024px | 2-column project grid, hamburger nav |
| Desktop | 1024–1280px | Full plate grid, maroon-ruled masthead |
| Large | >1280px | Centered, generous editorial margins |

### Touch Targets
- Buttons use comfortable 12px vertical padding
- Search and menu toggles are circular icon buttons
- Pill tags carry generous horizontal padding

### Collapsing Strategy
- Hero: display 56px → scales down, keeps negative tracking proportionally
- Navigation: horizontal links → hamburger
- Project plates: 3-column → 2-column → single column
- Section spacing: large editorial gaps → compressed on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Cream `{colors.background}`
- Primary CTA / accent: Maroon `{colors.primary}`
- Heading text: Maroon `{colors.primary}` or Ink `{colors.ink}`
- Body text: Ink Soft `{colors.ink-soft}`
- Section rule: 2px Maroon `{colors.rule-maroon}`
- Warm punctuation: Yellow `{colors.accent-yellow}`

### Example Component Prompts
- "Hero on cream `{colors.background}`. Headline in Gaisyr/Sora 56px weight 400, letter-spacing -1.6px, color `{colors.primary}`. Body in Favorit/Inter 18px `{colors.ink-soft}`. Maroon 2px top and bottom rule masthead."
- "Project plate: white surface on cream, hairline `{colors.border}`, 4px radius, image flush to top, title in Favorit 20px weight 500 `{colors.ink}` below."
- "Primary button: maroon `{colors.primary}` fill, cream `{colors.on-primary}` text, 2px radius, 12px 24px padding; hover to charcoal `{colors.ink}`."
- "Pull quote: Times Now/Playfair Display 28px weight 300 in maroon `{colors.primary}`, set in open whitespace on cream."

### Iteration Guide
1. Cream is the canvas — reach for white only for plates and cards
2. Maroon is the only saturated chrome color — use it for rules, links, headings, primary CTA
3. Keep radii at 2px; the 25px pill is the single rounded exception
4. Three fonts, three jobs — Gaisyr display, Favorit body, Times Now serif accent
5. Separate with maroon rules and whitespace, not shadows

---

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