---
name: Vibrant Market
colors:
  surface: '#f9f9f9'
  surface-dim: '#dadada'
  surface-bright: '#f9f9f9'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3f4'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e2e2e2'
  on-surface: '#1a1c1c'
  on-surface-variant: '#404943'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f0f1f1'
  outline: '#707973'
  outline-variant: '#bfc9c1'
  surface-tint: '#2c694e'
  primary: '#0f5238'
  on-primary: '#ffffff'
  primary-container: '#2d6a4f'
  on-primary-container: '#a8e7c5'
  inverse-primary: '#95d4b3'
  secondary: '#9b4500'
  on-secondary: '#ffffff'
  secondary-container: '#fc8a40'
  on-secondary-container: '#672c00'
  tertiary: '#49483b'
  on-tertiary: '#ffffff'
  tertiary-container: '#616051'
  on-tertiary-container: '#dddbc8'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#b1f0ce'
  primary-fixed-dim: '#95d4b3'
  on-primary-fixed: '#002114'
  on-primary-fixed-variant: '#0e5138'
  secondary-fixed: '#ffdbc9'
  secondary-fixed-dim: '#ffb68d'
  on-secondary-fixed: '#331200'
  on-secondary-fixed-variant: '#763300'
  tertiary-fixed: '#e6e3d0'
  tertiary-fixed-dim: '#c9c7b5'
  on-tertiary-fixed: '#1c1c11'
  on-tertiary-fixed-variant: '#48473a'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  headline-xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 40px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.25'
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.4'
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 40px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## Brand & Style

This design system is built on the philosophy of "Digital Farmers' Market"—balancing the efficiency of modern e-commerce with the warmth of a neighborhood corner store. The personality is inherently optimistic, approachable, and high-energy. It prioritizes clarity and a sense of bounty to evoke a "fresh-picked" emotional response from the user.

The aesthetic leans into a refined **Modern** style with **Tactile** influences. We avoid clinical sharpness in favor of organic softness, using white space not just for cleanliness, but to let the vibrant colors of fresh produce act as the primary visual driver. The interface should feel sunny, breathable, and deeply rooted in the local community.

## Colors

The palette is anchored by "Garden Green," a deep, trustworthy primary shade that signals health and sustainability. This is complemented by a "Sun-Kissed Orange" secondary color, used strategically for calls-to-action and appetizing accents to stimulate hunger and urgency. 

The background relies on "Clean White" to maintain a high-contrast, fresh feel, while a "Soft Cream" tertiary tone is used for secondary containers to add warmth and prevent the UI from feeling too sterile. All colors are calibrated to pass AA accessibility standards against white backgrounds to ensure the market is accessible to all community members.

## Typography

We use **Plus Jakarta Sans** across all levels of the design system. Its soft, rounded terminals and open apertures provide a friendly, welcoming character that aligns with the neighborhood market theme without sacrificing professional legibility. 

Headlines use a bold weight and tight letter-spacing to create a sense of presence and "freshness," similar to hand-painted market signage. Body text is set with generous line heights to ensure a relaxed, effortless reading experience, particularly when browsing ingredient lists or community stories.

## Layout & Spacing

The layout utilizes a **Fixed Grid** model centered on a 12-column system for desktop, ensuring content remains structured and scannable. The spacing rhythm is strictly based on an 8px baseline to maintain visual harmony. 

Generous margins and "breathing room" are intentional; we prioritize a "bounty" of space so that product photography never feels cramped. Card layouts should use consistent 24px gutters to allow the soft shadows of the product cards to blend smoothly into the background without overlapping visually.

## Elevation & Depth

This design system avoids harsh, black shadows in favor of **Ambient Shadows**. Depth is communicated through ultra-diffused, low-opacity dropshadows that carry a slight tint of the primary green or secondary orange. This "glowing" effect makes product cards appear to lift off the page, mimicking the way items sit on a physical shelf.

Tonal layers are used for secondary information; for example, a "Local Producer" sidebar might sit on a Soft Cream background, creating a subtle hierarchical distinction without the need for heavy borders. The goal is a "pillowy" depth that feels soft to the touch.

## Shapes

The shape language is consistently **Rounded**, avoiding sharp corners entirely to maintain the friendly, accessible brand persona. The standard 0.5rem (8px) radius is applied to buttons and input fields, while larger containers like product cards and featured banners utilize a more pronounced 1rem to 1.5rem radius. This creates a friendly, "squircle" aesthetic that feels modern and approachable. Icons should follow this logic, using rounded caps and joins to ensure they feel part of the same organic family.

## Components

**Buttons:** Primary buttons are vibrant "Sun-Kissed Orange" with bold white text. They use a slightly taller padding to feel "plump" and clickable.

**Product Cards:** These are the hero of the design system. They feature a large image area with a 1:1 aspect ratio, a soft ambient shadow, and a "Freshness Tag" (a small pill-shaped badge) in the top right corner. The background of the card should be pure white to make the product colors pop.

**Chips & Badges:** Used for categories like "Organic," "Local," or "Gluten-Free." These are pill-shaped with low-saturation versions of the primary green or secondary orange, ensuring they are informative but don't distract from the main product name.

**Input Fields:** Ghost-style inputs with a soft 1px border in a light grey-green, which thickens and changes to the primary green on focus. Labels are always positioned above the field for maximum accessibility.

**Community Cards:** A specific component for local farmer highlights, using a tertiary cream background and circular imagery to differentiate them from commercial product listings.