---
version: alpha
name: Studio Office
description: A warm "everythingist" creative space — earthy desert palette (sienna terracotta, olive drab, warm sand) on a near-black ink, Tiro Tamil serif body paired with condensed Oswald display, oversized soft radii (.6em–1em), and playful personality-driven microcopy.

colors:
  # Canvas + ink
  background: "#fafafa"
  surface: "#ffffff"
  surface-sand: "#d8d1bd"
  ink: "#1d1705"
  ink-soft: "#333333"
  ink-muted: "#999999"

  # Earthy brand accents
  primary: "#be5d42"      # Sienna — terracotta CTA / highlight
  olive: "#767f64"        # Olive Drab — section fills, tags
  sand: "#d8d1bd"         # Silver/Sand — soft surfaces, chips
  blackish: "#1d1705"     # warm near-black

  # Neutral support
  gray-200: "#e2e2e2"
  gray-300: "#dddddd"
  gray-400: "#cccccc"
  gray-500: "#c8c8c8"
  gray-600: "#999999"
  gray-700: "#222222"

  # Interactive
  link-blue: "#0082f3"
  alert-red: "#ea384c"

  # On-color
  on-primary: "#fafafa"
  on-olive: "#1d1705"
  on-ink: "#fafafa"
  on-sand: "#1d1705"

typography:
  display-hero:
    fontFamily: "Oswald, Helvetica Neue, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.03em
  display:
    fontFamily: "Oswald, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0.1em
  section-heading:
    fontFamily: "Tiro Tamil, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.02em
  card-title:
    fontFamily: "Tiro Tamil, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.02em
  paragraph-large:
    fontFamily: "Tiro Tamil, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.02em
  body:
    fontFamily: "Tiro Tamil, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Tiro Tamil, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label-condensed:
    fontFamily: "Oswald, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.1em
  button-ui:
    fontFamily: "Oswald, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.1em
  caption:
    fontFamily: "Tiro Tamil, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 30px
  2xl: 48px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px
  circle: 9999px

components:
  # Primary terracotta CTA — "➚ BOOK NOW ➚"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.blackish}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — olive fill
  button-secondary:
    backgroundColor: "{colors.olive}"
    textColor: "{colors.on-olive}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Ghost / outline button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Soft sand chip / tag
  badge:
    backgroundColor: "{colors.sand}"
    textColor: "{colors.on-sand}"
    typography: "{typography.label-condensed}"
    rounded: "{rounded.pill}"
    padding: 4px 14px

  # Feature card — soft rounded surface
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 28px
    borderColor: "{colors.gray-300}"

  # Olive accent card / section panel
  card-accent:
    backgroundColor: "{colors.olive}"
    textColor: "{colors.on-olive}"
    typography: "{typography.card-title}"
    rounded: "{rounded.xl}"
    padding: 28px

  # Image / gallery tile — very round corners
  card-media:
    backgroundColor: "{colors.surface-sand}"
    rounded: "{rounded.xl}"
    padding: 0px
    borderColor: "{colors.sand}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.gray-400}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  # Top nav bar — What / Who / Where / Drop In
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-condensed}"
    padding: 20px 30px
    borderColor: "{colors.gray-300}"

  # Monogram badge logo / avatar
  monogram:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-condensed}"
    rounded: "{rounded.circle}"
    width: 48px
    height: 48px
---

# Studio Office Design System

## Overview

Studio Office is a creative rental space in Denver, and its site reads like the room it sells — warm, lived-in, and full of personality. The visual language is built on a desert-adjacent earthy palette: a sienna terracotta (`{colors.primary}`), an olive drab (`{colors.olive}`), and a warm sand (`{colors.sand}`), all grounded by a near-black `{colors.ink}` that carries a faint olive warmth (`#1d1705`) rather than going cold. The canvas is an off-white `{colors.background}` that keeps the whole page feeling soft and analog instead of clinical.

Typography is the system's most distinctive move: a serif/condensed pairing that almost no infrastructure site would dare. Body copy and headings run in **Tiro Tamil**, a humanist serif with open, bookish letterforms that gives the writing a hand-set, editorial quality. Display and UI labels switch to **Oswald** — a tall, narrow grotesque set in 700 weight with wide `0.1em` tracking — used for the "BOOK NOW" buttons, the What/Who/Where nav, and condensed all-caps labels. The contrast between the relaxed serif and the urgent condensed sans is the brand's signature tension.

Shapes are generous and soft. Radii live in the `.6em`–`1em` range (12–24px and up), with several elements pushed to `120%`/`200%` pill curves and full circles for monogram badges and icon chips. Nothing is sharp. Combined with the warm palette and the playful microcopy ("You can't ride this motorcycle, to be clear"), the system signals a space that takes its craft seriously but never itself.

**Key Characteristics:**
- Earthy desert palette — sienna terracotta, olive drab, warm sand on warm near-black ink
- Tiro Tamil humanist serif for body and headings — bookish, editorial, hand-set feel
- Oswald condensed 700 with `0.1em` tracking for buttons, nav, and all-caps labels
- Oversized soft radii (`.6em`–`1em`, plus pill and circle) — nothing sharp
- Off-white `{colors.background}` canvas, not pure white — analog warmth
- Personality-driven microcopy and decorative icon glyphs (stars, flowers, cacti, cups)
- Monogram badge logo repeated as a brand motif
- Terracotta as the single loud action color against muted earth tones

## Colors

### Primary
- **Sienna** (`{colors.primary}`): Terracotta — the primary CTA fill and loudest accent.
- **Olive Drab** (`{colors.olive}`): Section panels, secondary buttons, tags.
- **Warm Sand** (`{colors.sand}`): Soft surfaces, chips, media tile backgrounds.
- **Blackish** (`{colors.ink}`): Primary text — a warm olive-tinted near-black (`#1d1705`).

### Surface & Canvas
- **Background** (`{colors.background}`): Off-white page canvas — analog warmth.
- **Surface** (`{colors.surface}`): Pure white cards and panels.
- **Surface Sand** (`{colors.surface-sand}`): Sand-tinted media/gallery surfaces.

### Ink & Neutrals
- **Ink Soft** (`{colors.ink-soft}`): Secondary body text.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary / placeholder text.
- **Gray 200–700** (`{colors.gray-200}`–`{colors.gray-700}`): Borders, dividers, neutral fills.

### Interactive
- **Link Blue** (`{colors.link-blue}`): Default hyperlink color.
- **Alert Red** (`{colors.alert-red}`): Error / warning states.

## Typography

### Font Family
- **Serif (body + headings)**: `Tiro Tamil`, with fallbacks `Georgia, serif`
- **Condensed display + UI**: `Oswald`, with fallbacks `Helvetica Neue, sans-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` | Oswald hero headline — tall, condensed, tight tracking |
| `display` | Oswald display, wide-tracked all-caps |
| `section-heading` | Tiro Tamil section titles |
| `card-title` | Tiro Tamil feature card headings |
| `paragraph-large` | Tiro Tamil intros and lead paragraphs |
| `body` | Standard serif reading text |
| `body-small` | Compact serif copy |
| `label-condensed` | Oswald all-caps labels, nav, tags |
| `button-ui` | Oswald button text |
| `caption` | Metadata, fine print |

### Principles
- **Serif body, condensed display**: Tiro Tamil carries the warmth; Oswald carries the urgency. Never swap their roles.
- **Wide tracking on Oswald**: All-caps Oswald always rides `0.1em` letter-spacing for that poster-print feel.
- **Tight tracking on serif headings**: Tiro Tamil headlines pull in to `-0.02em`/`-0.03em` for density.
- **Editorial over engineered**: copy is conversational and human — the type should never feel like a dashboard.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Loose, generous rhythm — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical padding.

### Grid & Container
- Single-column hero with oversized condensed headline
- Feature amenities laid out as a card grid (wetbar, photo wall, Sonos, etc.)
- Photo gallery / carousel with very-rounded media tiles
- Comfortable max content width with generous side margins

### Whitespace Philosophy
- **Relaxed, not clinical**: warmth comes from the palette and soft corners, not emptiness.
- **Decorative punctuation**: small icon glyphs (stars `✹`, flowers, cacti) act as section seasoning.
- **Personality first**: microcopy fills the space a corporate site would leave silent.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inputs |
| `md` | 12px | Inputs, small panels |
| `lg` | 16px | Cards |
| `xl` | 24px | Feature + media cards, large panels |
| `pill` | 9999px | Buttons, tags, badges |
| `circle` | 50% | Monogram badges, icon chips |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Sienna terracotta fill, off-white Oswald text, pill. The "BOOK NOW" CTA.
- **`button-secondary`** — Olive drab fill with ink text.
- **`button-ghost`** — Off-white with ink outline.

### Chips & Badges
- **`badge`** — Warm sand fill, condensed all-caps label, pill.
- **`monogram`** — Terracotta circle brand badge, repeated as motif.

### Cards
- **`card`** — White surface, very round (`{rounded.xl}`) corners, neutral border.
- **`card-accent`** — Olive panel with ink text for emphasis sections.
- **`card-media`** — Sand-backed gallery tile with oversized radius.

### Inputs & Nav
- **`input`** — White surface, soft radius; focus shifts border to terracotta.
- **`nav-bar`** — Off-white bar, Oswald condensed What/Who/Where/Drop-In links.

## Do's and Don'ts

### Do
- Pair Tiro Tamil serif body with Oswald condensed display
- Track Oswald all-caps at `0.1em`
- Use terracotta (`{colors.primary}`) as the single loud action color
- Keep corners soft and oversized
- Let microcopy carry personality
- Keep the canvas off-white (`{colors.background}`), not pure white

### Don't
- Don't set headings in Oswald and labels in Tiro Tamil — keep the roles fixed
- Don't introduce cold blues/grays into chrome — stay earthy
- Don't use pure black for text — `{colors.ink}` is warm `#1d1705`
- Don't sharpen corners — the softness is the brand
- Don't over-apply terracotta; it loses its punch against the muted earth tones

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <480px | Single column, stacked cards, hamburger nav |
| Tablet | 480–991px | 2-column amenity grid |
| Desktop | ≥992px | Full layout, multi-column gallery |

### Collapsing Strategy
- Hero headline scales down with viewport (uses `vw`-based sizing) while keeping condensed weight
- What/Who/Where/Drop-In nav collapses to a menu
- Amenity card grid: multi-column → 2-column → single column
- Gallery carousel maintains rounded media tiles at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Sienna `{colors.primary}`
- Background: Off-white `{colors.background}`
- Heading text: Warm black `{colors.ink}`
- Body text: `{colors.ink-soft}`
- Accent panel: Olive `{colors.olive}`
- Soft chip: Sand `{colors.sand}`

### Example Component Prompts
- "Hero on off-white `{colors.background}`. Headline in Oswald 64px weight 700, line-height 0.98, letter-spacing -0.03em, color `{colors.ink}`. Body in Tiro Tamil 20px. Terracotta pill CTA (`{colors.primary}`, off-white text, Oswald 16px tracked 0.1em)."
- "Feature card: white surface, 24px radius, Tiro Tamil 24px title, body in `{colors.ink-soft}`, neutral border `{colors.gray-300}`."
- "Sand chip: `{colors.sand}` fill, ink text, Oswald all-caps 14px tracked 0.1em, pill radius."

---

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