---
page: contact
---
A warm, inviting contact page for Oakwood Furniture Co.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, photography-first
- Background: Warm barely-there cream (#FCFAFA)
- Surface: Crisp very light gray (#F5F5F5) for cards
- Primary Accent: Deep muted teal-navy (#294056) for buttons and links
- Text Primary: Charcoal near-black (#2C2C2C) for headlines
- Text Secondary: Soft warm gray (#6B6B6B) for body copy
- Font: Modern sans-serif (Manrope or similar), clean and approachable
- Buttons: Subtly rounded corners (8px), comfortable padding
- Cards: Gently rounded corners (12px), whisper-soft shadows on hover
- Layout: Centered content, max-width container, generous whitespace
- No harsh shadows, no aggressive colors - serene and trustworthy

**Page Structure:**
1. **Header:** Navigation with logo, Shop, Collections, About, Contact (active)
2. **Hero Section:** Warm headline "Get in Touch" with a brief welcome message
3. **Contact Form:** Name, email, message fields with the teal-navy submit button
4. **Showroom Info:** Address, hours, and an embedded map or beautiful showroom photo
5. **Footer:** Sustainability, Craftsmanship, Shipping links, and social icons

---
stitch-project-id: 13534454087919359824
---
# Project Vision & Constitution

> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory." If `next-prompt.md` is empty, pick the highest priority item from Section 5 OR invent a new page that fits the project vision.

## 1. Core Identity
* **Project Name:** Oakwood Furniture Co.
* **Stitch Project ID:** `13534454087919359824`
* **Mission:** A premium online furniture showroom showcasing handcrafted, sustainable wood furniture.
* **Target Audience:** Design-conscious homeowners, interior designers, eco-minded buyers.
* **Voice:** Warm, refined, artisanal, and trustworthy.

## 2. Visual Language (Stitch Prompt Strategy)
*Strictly adhere to these descriptive rules when prompting Stitch. Do NOT use code.*

* **The "Vibe" (Adjectives):**
    * *Primary:* **Warm** (Inviting, cozy, natural materials).
    * *Secondary:* **Minimal** (Clean layouts, breathing room, gallery-like).
    * *Tertiary:* **Artisanal** (Handcrafted feel, attention to detail).

* **Color Philosophy (Semantic):**
    * **Backgrounds:** Warm barely-there cream (#FCFAFA). Soft, inviting canvas.
    * **Accents:** Deep muted teal-navy (#294056) for CTAs and highlights.
    * **Text:** Charcoal near-black (#2C2C2C) for headlines, soft gray (#6B6B6B) for body.

## 3. Architecture & File Structure
* **Root:** `site/public/`
* **Asset Flow:** Stitch generates to `queue/` -> Validate -> Move to `site/public/`.
* **Navigation Strategy:**
    * **Global Header:** Logo, Shop, Collections, About, Contact.
    * **Global Footer:** Sustainability, Craftsmanship, Shipping Info, Social Links.

## 4. Live Sitemap (Current State)
*The Agent MUST update this section when a new page is successfully merged.*

* [x] `index.html` - Homepage with hero and featured collections.
* [x] `collections.html` - Overview of furniture categories.
* [x] `about.html` - Our story and craftsmanship philosophy.
* [ ] `contact.html` - Contact form and showroom locations.

## 5. The Roadmap (Backlog)
*If `next-prompt.md` is empty or completed, pick the next task from here.*

### High Priority
- [ ] **Product Detail Page:** Template for individual furniture items.
- [ ] **Contact Page:** Contact form with showroom map.

### Medium Priority
- [ ] **Sustainability Page:** Our commitment to eco-friendly practices.
- [ ] **Care Guide:** How to maintain wood furniture.

## 6. Creative Freedom Guidelines
*When the backlog is empty, follow these guidelines to innovate.*

1. **Stay On-Brand:** New pages must fit the "Warm + Minimal + Artisanal" vibe.
2. **Enhance the Core:** Support the furniture shopping experience.
3. **Naming Convention:** Use lowercase, descriptive filenames.

### Ideas to Explore
*Pick one, build it, then REMOVE it from this list.*

- [ ] `materials.html` - Showcase of wood types and finishes
- [ ] `custom.html` - Custom furniture ordering process
- [ ] `gallery.html` - Customer homes featuring our furniture
- [ ] `blog.html` - Design tips and furniture care articles

## 7. Rules of Engagement
1. Do not recreate pages in Section 4.
2. Always update `next-prompt.md` before completing.
3. Consume ideas from Section 6 when you use them.
4. Keep the loop moving.

# Stitch Build Loop Skill

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern.

## Install

```bash
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global
```

## What It Does

Enables continuous, autonomous website development through a "baton" system:

1. Agent reads task from `next-prompt.md`
2. Generates page via Stitch MCP tools
3. Integrates into site structure
4. Writes next task to continue the loop

## Prerequisites

- Stitch MCP Server access
- A `DESIGN.md` file (generate with the `design-md` skill)
- A `SITE.md` file for project context

## Example Prompt

```text
Read my next-prompt.md and generate the page using Stitch, then prepare the next iteration.
```

## Skill Structure

```
stitch-loop/
├── SKILL.md              — Core pattern instructions
├── README.md             — This file
├── resources/
│   ├── baton-schema.md   — Baton file format spec
│   └── site-template.md  — SITE.md/DESIGN.md templates
└── examples/
    ├── next-prompt.md    — Example baton
    └── SITE.md           — Example site constitution
```

## Works With

- **`design-md` skill**: Generate `DESIGN.md` from existing Stitch screens
- **CI/CD**: GitHub Actions can trigger new iterations on push
- **Agent chains**: Dispatch to other agents (Jules, etc.)

## Learn More

See [SKILL.md](./SKILL.md) for complete instructions.

# Baton File Schema

The baton file (`next-prompt.md`) is the communication mechanism between loop iterations. It tells the next agent what to build.

## Format

```yaml
---
page: <filename-without-extension>
---
<prompt-content>
```

## Fields

### Frontmatter (YAML)

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `page` | string | Yes | Output filename (without `.html` extension) |

### Body (Markdown)

The body contains the full Stitch prompt, which must include:

1. **One-line description** with vibe/atmosphere keywords
2. **Design System block** (required) — copied from `DESIGN.md` Section 6
3. **Page Structure** — numbered list of sections/components

## Example

```markdown
---
page: achievements
---
A competitive, gamified achievements page with terminal aesthetics.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Dark, minimal, data-focused
- Background: Deep charcoal/near-black (#0f1419)
- Primary Accent: Teal/Cyan (#2dd4bf)
- Text Primary: White (#ffffff)
- Font: Clean sans-serif (Inter, SF Pro, or system default)
- Layout: Centered content, max-width container

**Page Structure:**
1. Header with title "Achievements" and navigation
2. Badge grid showing locked/unlocked states with icons
3. Progress section with milestone bars
4. Footer with links to other pages
```

## Validation Rules

Before completing an iteration, validate your baton:

- [ ] `page` frontmatter field exists and is a valid filename
- [ ] Prompt includes the design system block
- [ ] Prompt describes a page NOT already in `SITE.md` sitemap
- [ ] Prompt includes specific page structure details

# Site Template

Use these templates when setting up a new project for the build loop.

## SITE.md Template

```markdown
# Project Vision & Constitution

> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory."

## 1. Core Identity
* **Project Name:** [Your project name]
* **Stitch Project ID:** [Your Stitch project ID]
* **Mission:** [What the site achieves]
* **Target Audience:** [Who uses this site]
* **Voice:** [Tone and personality descriptors]

## 2. Visual Language
*Reference these descriptors when prompting Stitch.*

* **The "Vibe" (Adjectives):**
    * *Primary:* [Main aesthetic keyword]
    * *Secondary:* [Supporting aesthetic]
    * *Tertiary:* [Additional flavor]

## 3. Architecture & File Structure
* **Root:** `site/public/`
* **Asset Flow:** Stitch generates to `queue/` → Validate → Move to `site/public/`
* **Navigation Strategy:** [How nav works]

## 4. Live Sitemap (Current State)
*Update this when a new page is successfully merged.*

* [x] `index.html` - [Description]
* [ ] `about.html` - [Description]

## 5. The Roadmap (Backlog)
*Pick the next task from here if available.*

### High Priority
- [ ] [Task description]
- [ ] [Task description]

### Medium Priority
- [ ] [Task description]

## 6. Creative Freedom Guidelines
*When the backlog is empty, follow these guidelines to innovate.*

1. **Stay On-Brand:** New pages must fit the established vibe
2. **Enhance the Core:** Support the site mission
3. **Naming Convention:** Use lowercase, descriptive filenames

### Ideas to Explore
*Pick one, build it, then REMOVE it from this list.*

- [ ] `stats.html` - [Description]
- [ ] `settings.html` - [Description]

## 7. Rules of Engagement
1. Do not recreate pages in Section 4
2. Always update `next-prompt.md` before completing
3. Consume ideas from Section 6 when you use them
```

## DESIGN.md Template

Generate this using the `design-md` skill from an existing Stitch screen, or create manually:

```markdown
# Design System: [Project Name]
**Project ID:** [Stitch Project ID]

## 1. Visual Theme & Atmosphere
[Describe mood, density, aesthetic philosophy]

## 2. Color Palette & Roles
- **[Descriptive Name]** (#hexcode) – [Functional role]
- **[Descriptive Name]** (#hexcode) – [Functional role]

## 3. Typography Rules
[Font family, weights, sizes, spacing]

## 4. Component Stylings
* **Buttons:** [Shape, color, behavior]
* **Cards:** [Corners, background, shadows]
* **Inputs:** [Stroke, background, focus states]

## 5. Layout Principles
[Whitespace strategy, margins, grid alignment]

## 6. Design System Notes for Stitch Generation
**Copy this block into every baton prompt:**

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Dark/Light], [descriptors]
- Background: [Description] (#hex)
- Primary Accent: [Description] (#hex)
- Text Primary: [Description] (#hex)
- Font: [Description]
- Layout: [Description]
```