---
version: alpha
name: Samara
description: Warm editorial minimalism for backyard architecture — a parchment-and-evergreen palette drawn from natural materials, generous serif/sans pairing, soft rounded chrome, and full-bleed photography that lets the product (the dwelling) be the hero.
colors:
  # Canvas + ink
  background: "#f7f4ee"      # parchment / bone-white canvas
  surface: "#ffffff"
  surface-soft: "#efe9df"    # warm tinted section panel
  ink: "#1f2a24"             # deep evergreen-black text
  ink-secondary: "#4a554e"   # muted forest-gray body
  ink-tertiary: "#7c857e"    # captions, metadata

  # Brand accents — natural materials
  primary: "#2e3d33"         # evergreen — primary CTA, dark surfaces
  driftwood: "#b8a98f"       # warm wood tan
  bronze: "#5a4634"          # dark bronze accent
  evergreen-deep: "#1b261f"  # deep panel/footer

  # Interactive
  link: "#2e3d33"
  focus: "#2e3d33"
  accent-cool: "#3a6ea5"     # the blue arrow / info accent

  # Neutral scale
  gray-900: "#1f2a24"
  gray-600: "#4a554e"
  gray-400: "#7c857e"
  gray-200: "#d9d2c6"        # warm borders / dividers
  gray-100: "#e8e2d7"

  # On-color
  on-primary: "#f7f4ee"
  on-surface: "#1f2a24"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.evergreen-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-200}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-200}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.gray-200}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.gray-200}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px

  swatch-chip:
    backgroundColor: "{colors.driftwood}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.gray-200}"
    size: 28px
---

# Samara Design System

## Overview

Samara designs and sells prefabricated backyard homes (accessory dwelling units), and its website behaves like an architecture monograph rather than a software marketing page. The visual system is built on a warm, paper-like canvas (`{colors.background}`) — a parchment/bone-white that immediately reads as natural and residential, never the clinical pure-white of a SaaS product. Deep evergreen-black text (`{colors.ink}`) sits on that warm ground with the comfortable contrast of ink on quality stock.

The palette is sampled directly from the product's own material options — Bone white, Driftwood, Parchment, Evergreen, Dark bronze. This is the system's defining move: the brand chrome and the product finishes share one continuous palette, so the website feels like an extension of the building. Evergreen (`{colors.primary}`) carries the primary actions and dark panels, driftwood (`{colors.driftwood}`) and bronze (`{colors.bronze}`) appear as material accents, and a single cool blue (`{colors.accent-cool}`) is reserved for wayfinding arrows and info markers.

Typography pairs an expressive serif for editorial voice with a clean grotesque sans for everything functional. Headlines use a high-contrast serif (Fraunces as the closest Google match) at large sizes with gentle negative tracking — confident, warm, almost print-magazine. Body and UI text use Inter for legibility. The result is editorial warmth up top, quiet utility below.

Chrome is soft and generous: pill buttons, large rounded cards, warm borders instead of hard hairlines, and enormous whitespace that lets full-bleed photography of the dwellings be the real hero. Nothing competes with the product.

**Key Characteristics:**
- Parchment/bone-white canvas (`{colors.background}`) — warm paper, never clinical white
- Material-sampled palette: brand colors ARE the product finishes (evergreen, driftwood, bronze)
- Serif display (Fraunces) + sans body (Inter) — editorial warmth over utility
- Pill-shaped buttons and large rounded cards (`{rounded.lg}`–`{rounded.xl}`)
- Warm borders (`{colors.gray-200}`) instead of cool gray hairlines
- Evergreen primary actions; cool blue reserved strictly for arrows/info wayfinding
- Generous whitespace framing full-bleed architectural photography
- Uppercase tracked eyebrow labels above section headings

## Colors

### Canvas & Ink
- **Parchment** (`{colors.background}`): The warm paper canvas — the brand's foundation.
- **Surface White** (`{colors.surface}`): Cards and elevated panels.
- **Warm Panel** (`{colors.surface-soft}`): Tinted section backgrounds and feature blocks.
- **Evergreen Ink** (`{colors.ink}`): Primary text and headings.
- **Forest Gray** (`{colors.ink-secondary}`): Body copy.
- **Muted Gray** (`{colors.ink-tertiary}`): Captions, metadata.

### Brand / Material Accents
- **Evergreen** (`{colors.primary}`): Primary CTA, dark surfaces, links.
- **Driftwood** (`{colors.driftwood}`): Warm wood material accent, swatch chips.
- **Dark Bronze** (`{colors.bronze}`): Deep material accent.
- **Deep Evergreen** (`{colors.evergreen-deep}`): Footer, hover state on dark CTAs.
- **Cool Accent** (`{colors.accent-cool}`): Navigation arrows, info markers only.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Strong text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Tertiary / disabled.
- **Gray 200** (`{colors.gray-200}`): Warm borders and dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle fills.

## Typography

### Font Family
- **Display / Serif**: `Fraunces`, with fallbacks `Georgia, serif` — the editorial voice for headlines.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero — editorial impact |
| `section-heading` | Serif section titles |
| `sub-heading` | Serif sub-sections |
| `card-title` | Sans card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, links |
| `eyebrow` | Uppercase tracked labels above headings |
| `caption` | Metadata, image captions |

### Principles
- **Serif up top, sans below**: Fraunces carries emotional/editorial headlines; Inter handles all functional text. Never mix the roles.
- **Gentle tracking**: Serif headlines use mild negative letter-spacing (-0.4px to -1.5px); body stays at 0.
- **Tracked eyebrows**: Small uppercase labels (`{typography.eyebrow}`) with +1.2px tracking signpost sections.
- **Restraint in weight**: Serif stays at 400 (its contrast does the work); sans uses 400/500.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, scaling to very large section gaps (`{spacing.4xl}`–`{spacing.5xl}`) for gallery-like breathing room.

### Grid & Container
- Max content width ~1240px, centered.
- Hero: full-bleed photography with overlaid or adjacent serif headline.
- Feature sections: 2-column splits (image + copy) and 3-up card grids.
- Generous vertical padding between sections — photography needs room.

### Whitespace Philosophy
- **Photography is the hero**: chrome recedes; the dwelling fills the frame.
- **Warm, residential calm**: large gaps, soft corners, no hard lines — the page should feel like a home, not an app.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery edges |
| `xs` | 4px | Small inline elements |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Compact cards |
| `lg` | 20px | Standard cards |
| `xl` | 32px | Feature panels |
| `pill` | 9999px | Buttons, badges, swatch chips |

## Components

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

### Buttons
- **`button-primary`** — Evergreen fill, parchment text, pill radius. The default CTA ("Design yours").
- **`button-secondary`** — White surface, warm border, evergreen text, pill radius.

### Badges & Chips
- **`badge`** — Warm panel fill, tracked uppercase label, pill radius.
- **`swatch-chip`** — Circular material swatch (driftwood shown) with warm border — the product configurator's core control.

### Cards
- **`card`** — White surface, warm border, `{rounded.lg}`. Generous 28px padding.
- **`card-feature`** — Warm-panel feature block, `{rounded.xl}`, large 40px padding.

### Inputs
- **`input`** — White surface, warm border, `{rounded.sm}`. Focus switches border to evergreen.

### Navigation
- **`nav-bar`** — Parchment background, evergreen text, sans 15px weight 500. Pill CTA right-aligned.

## Do's and Don'ts

### Do
- Use the parchment canvas (`{colors.background}`) — warmth is the brand
- Pair Fraunces serif headlines with Inter body
- Sample brand accents from the product's material palette (evergreen, driftwood, bronze)
- Use pill buttons and large rounded cards
- Use warm borders (`{colors.gray-200}`), not cool gray hairlines
- Let full-bleed photography dominate; keep chrome quiet
- Reserve the cool blue (`{colors.accent-cool}`) for arrows and info markers only

### Don't
- Don't use clinical pure-white (`#ffffff`) as the page canvas — use parchment
- Don't set serif body text — serif is for display only
- Don't introduce saturated tech accents (electric blue, neon) into chrome
- Don't use hard square corners on cards or buttons
- Don't let UI compete with product photography
- Don't apply the cool accent decoratively

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, full-bleed images, stacked copy |
| Tablet | 600–1024px | 2-column splits begin |
| Desktop | 1024–1240px | Full grids, max content width |
| Large | >1240px | Centered, generous margins |

### Collapsing Strategy
- Hero: serif scales 56px → ~36px, retains tracking proportionally
- Image+copy splits stack to single column
- 3-up card grids → 1 column
- Navigation collapses to hamburger; pill CTA persists
- Section spacing reduces from `{spacing.5xl}` toward `{spacing.3xl}` on mobile

### Image Behavior
- Architectural photography stays full-bleed at all sizes
- Material swatch chips maintain circular pill shape and tap size

## Agent Prompt Guide

### Quick Color Reference
- Page canvas: Parchment `{colors.background}`
- Primary CTA: Evergreen `{colors.primary}`, parchment text
- Heading text: Evergreen Ink `{colors.ink}` (serif)
- Body text: Forest Gray `{colors.ink-secondary}` (sans)
- Border: warm `{colors.gray-200}`
- Wayfinding accent: Cool `{colors.accent-cool}`

### Example Component Prompts
- "Create a hero on parchment `{colors.background}`. Serif headline 56px Fraunces weight 400, letter-spacing -1.5px, color `{colors.ink}`, over a full-bleed photo. Evergreen pill CTA (`{colors.primary}`, parchment text, 14px 28px padding, pill radius) labeled 'Design yours'."
- "Design a card: white `{colors.surface}`, warm border `{colors.gray-200}`, 20px radius, 28px padding. Sans title 22px Inter weight 500, body 17px `{colors.ink-secondary}`."
- "Build a material swatch row: circular pill chips, 28px, warm border `{colors.gray-200}`, fills sampled from `{colors.driftwood}` and `{colors.bronze}`."
- "Add a tracked eyebrow: 13px Inter weight 500, +1.2px letter-spacing, uppercase, `{colors.ink-secondary}`, above a serif section heading."

### Iteration Guide
1. Canvas is parchment, never pure white — warmth first
2. Serif (Fraunces) for emotion, sans (Inter) for function — never swap roles
3. Brand accents come from the product material palette
4. Pill buttons, large rounded cards, warm borders throughout
5. Photography leads; chrome stays quiet and recessive
6. Cool blue only for arrows and info wayfinding

---

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