Farm-to-Table Restaurant

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/farm-to-table-restaurant and apply its design language to my project

Design Language

All colors defined as CSS custom properties on `:root`:

| Token | Value | Role |
|---|---|---|
| `--bg` | `#FDFCF8` | Page ground — warm parchment |
| `--fg` | `#2C2C24` | Dark text + dark sections (stats bar, tasting, footer) |
| `--primary` | `#5D7052` | Moss green — buttons, source tags, focus rings |
| `--primary-fg` | `#F3F4F1` | Text on primary-colored surfaces |
| `--secondary` | `#C18C5D` | Clay / warm amber — prices, distances, hours, accent stats |
| `--accent` | `#E6DCCD` | Warm beige — farm partners section background |
| `--muted` | `#F0EBE5` | Slightly warmer off-white — menu section, reservation section backgrounds |
| `--muted-fg` | `#78786C` | Secondary body text, label text |
| `--border` | `#DED8CF` | Input borders, nav bottom border |

Named shadows (semantic, not generic black):

| Token | Value | Use |
|---|---|---|
| `--shadow-moss` | `rgba(93, 112, 82, 0.15)` | Cards, blobs on light sections |
| `--shadow-clay` | `rgba(193, 140, 93, 0.20)` | Thumbnails, badges, plaque |

Dark-section opacity variants (used directly, not tokenized):
- Light text on dark: `#F3F4F1` or `rgba(243, 244, 241, 0.7)` for subdued
- Muted on dark: `rgba(243, 244, 241, 0.38)` for labels, `rgba(243, 244, 241, 0.46)` for course notes
- Dividers on dark: `rgba(243, 244, 241, 0.09)` – `0.14`

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Target audience:** Fine-dining, farm-to-table, and ingredient-driven restaurants that want to signal authenticity, provenance, and seasonal craft. Also applicable to food producers, agricultural brands, and culinary experience businesses.

**Use cases:** Restaurant landing pages, tasting-menu showcase pages, chef profile sites, farm partnership pages, online reservation flows.

**Brand personality:** Warm restraint. Earthy but refined. Transparency about sourcing as a design value, not a marketing claim. The land speaks; the design listens.

---

Reviews

Related styles

Organic Blob Portfolio@claude-code

Linen Thread Journal@claude-code

Botanical Tea Shop@claude-code

White Cube Folio@claude-code

Reading Room Blog@claude-code

Playbill Portfolio@claude-code

All colors defined as CSS custom properties on `:root`: | Token | Value | Role | |---|---|---| | `--bg` | `#FDFCF8` | Page ground — warm parchment | | `--fg` | `#2C2C24` | Dark text + dark sections (stats bar, tasting, footer) | | `--primary` | `#5D7052` | Moss green — buttons, source tags, focus rings | | `--primary-fg` | `#F3F4F1` | Text on primary-colored surfaces | | `--secondary` | `#C18C5D` | Clay / warm amber — prices, distances, hours, accent stats | | `--accent` | `#E6DCCD` | Warm beige — farm partners section background | | `--muted` | `#F0EBE5` | Slightly warmer off-white — menu section, reservation section backgrounds | | `--muted-fg` | `#78786C` | Secondary body text, label text | | `--border` | `#DED8CF` | Input borders, nav bottom border | Named shadows (semantic, not generic black): | Token | Value | Use | |---|---|---| | `--shadow-moss` | `rgba(93, 112, 82, 0.15)` | Cards, blobs on light sections | | `--shadow-clay` | `rgba(193, 140, 93, 0.20)` | Thumbnails, badges, plaque | Dark-section opacity variants (used directly, not tokenized): - Light text on dark: `#F3F4F1` or `rgba(243, 244, 241, 0.7)` for subdued - Muted on dark: `rgba(243, 244, 241, 0.38)` for labels, `rgba(243, 244, 241, 0.46)` for course notes - Dividers on dark: `rgba(243, 244, 241, 0.09)` – `0.14` ---

**Target audience:** Fine-dining, farm-to-table, and ingredient-driven restaurants that want to signal authenticity, provenance, and seasonal craft. Also applicable to food producers, agricultural brands, and culinary experience businesses. **Use cases:** Restaurant landing pages, tasting-menu showcase pages, chef profile sites, farm partnership pages, online reservation flows. **Brand personality:** Warm restraint. Earthy but refined. Transparency about sourcing as a design value, not a marketing claim. The land speaks; the design listens. ---