---
name: Artisan Heritage
colors:
  surface: '#fbf9f4'
  surface-dim: '#dbdad5'
  surface-bright: '#fbf9f4'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f5f3ee'
  surface-container: '#f0eee9'
  surface-container-high: '#eae8e3'
  surface-container-highest: '#e4e2dd'
  on-surface: '#1b1c19'
  on-surface-variant: '#444748'
  inverse-surface: '#30312e'
  inverse-on-surface: '#f2f1ec'
  outline: '#747878'
  outline-variant: '#c4c7c7'
  surface-tint: '#5f5e5e'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#1c1b1b'
  on-primary-container: '#858383'
  inverse-primary: '#c8c6c5'
  secondary: '#78583e'
  on-secondary: '#ffffff'
  secondary-container: '#fdd2b1'
  on-secondary-container: '#78583f'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#241a0e'
  on-tertiary-container: '#928170'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e5e2e1'
  primary-fixed-dim: '#c8c6c5'
  on-primary-fixed: '#1c1b1b'
  on-primary-fixed-variant: '#474746'
  secondary-fixed: '#ffdcc2'
  secondary-fixed-dim: '#e8be9f'
  on-secondary-fixed: '#2c1603'
  on-secondary-fixed-variant: '#5d4128'
  tertiary-fixed: '#f4dfcb'
  tertiary-fixed-dim: '#d7c3b0'
  on-tertiary-fixed: '#241a0e'
  on-tertiary-fixed-variant: '#524436'
  background: '#fbf9f4'
  on-background: '#1b1c19'
  surface-variant: '#e4e2dd'
typography:
  headline-xl:
    fontFamily: Noto Serif
    fontSize: 48px
    fontWeight: '400'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Serif
    fontSize: 32px
    fontWeight: '400'
    lineHeight: '1.3'
  headline-md:
    fontFamily: Noto Serif
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Work Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Work Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-caps:
    fontFamily: Work Sans
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: 0.1em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 8px
  container-max: 1280px
  gutter: 32px
  margin-edge: 48px
  stack-sm: 16px
  stack-md: 32px
  stack-lg: 64px
---

## Brand & Style

This design system is built upon the philosophy of "The Curated Table"—an approach that balances the raw, tactile nature of artisanal baking with the precision of high-end culinary service. It targets a discerning audience that values provenance, slow-crafted quality, and local heritage.

The visual style is a blend of **Minimalism** and **Tactile** design. It utilizes a structured, editorial grid to provide clarity, while incorporating subtle paper textures and grain overlays to evoke the physical sensation of parchment and flour. The aesthetic avoids digital artificiality in favor of an organic, grounded atmosphere that emphasizes high-quality, high-contrast food photography.

## Colors

The palette is rooted in the natural materials of a traditional bakery and larder. 
- **Deep Charcoal (#1A1A1A):** Used for primary typography and structural elements to provide a sense of authority and timelessness.
- **Warm Wood (#8C6A4F):** Reserved for meaningful accents, interactive states, and highlights that guide the user’s eye.
- **Cream (#F9F7F2):** The foundation of the UI, providing a warm, inviting alternative to sterile white, reminiscent of flour and untreated linen.

Color application should follow a 60-30-10 distribution to maintain the minimalist intent, with the Cream base dominating the visual field to allow photography to stand out.

## Typography

This design system employs a classic typographic hierarchy that pits a sophisticated, literary serif against a utilitarian, grounded sans-serif. 

**Noto Serif** is used for all headlines and editorial pull-quotes. It should be typeset with generous leading to evoke the feel of a premium broadsheet or cookbook. **Work Sans** handles all functional and body text, providing high legibility and a modern, clean contrast to the heritage-driven headers. For navigational elements and small descriptors, the "label-caps" style should be used to provide a structured, architectural feel.

## Layout & Spacing

The layout follows a **Fixed Grid** model to ensure a curated, intentional presentation across different screen sizes. A 12-column system is used with wide gutters (32px) to prevent the UI from feeling cluttered.

Spacing rhythm is strictly derived from an 8px base unit. To emphasize the premium nature of the brand, "white space" is treated as a design element itself. Sections should be separated by large vertical gaps (stack-lg) to allow the photography and typography to breathe, mirroring the uncluttered environment of a boutique deli.

## Elevation & Depth

This design system avoids heavy shadows and floating elements to maintain its grounded, artisan feel. Instead, depth is conveyed through:

1.  **Tonal Layering:** Using the Warm Wood and Tertiary shades to create subtle "inset" or "raised" areas without the use of drop shadows.
2.  **Low-Contrast Outlines:** 1px borders in a slightly darker cream or muted wood tone define containers and cards.
3.  **Subtle Textures:** A global noise overlay (2-3% opacity) is applied to the background to break the digital flatness and suggest paper or stone surfaces.
4.  **Photography Depth:** Using professional food photography with shallow depth of field to naturally draw the user's eye through the Z-axis.

## Shapes

The shape language is precise and architectural. A "Soft" roundedness level (0.25rem) is applied to most UI components to prevent them from feeling aggressive, while maintaining the discipline of a minimalist grid. 

Buttons and input fields should utilize this subtle rounding, while large image containers may remain sharp (0px) to enhance the editorial, "framed" appearance of the photography. Avoid pill-shaped elements or high-radius corners, as they conflict with the heritage aesthetic.

## Components

**Buttons:**
- **Primary:** Deep Charcoal background with Cream text. Sharp or slightly rounded. No gradients.
- **Secondary:** Transparent background with a 1px Charcoal or Wood border.

**Cards:**
- Product cards should be borderless or use a very faint 1px line. The focus must be a high-resolution image followed by a Noto Serif title and Work Sans price/description.

**Inputs & Form Fields:**
- Use a "minimalist underline" style or a very light cream-filled box with a bottom border. Labels should use the `label-caps` typography style.

**Chips/Tags:**
- Subtle, low-contrast pills using the Tertiary color for background and Charcoal for text. Used for "Local," "Organic," or "Daily Special" markers.

**Lists:**
- Menu items should be separated by thin, horizontal dividers. Use the serif font for item names and the sans-serif for ingredient descriptions to create a clear hierarchy of information.

**Photography Containers:**
- All food imagery should feature a slight "inner glow" or "inner shadow" to simulate being framed or set into the page, reinforcing the tactile theme.