---
name: Bakery Operations Interface
colors:
  surface: '#f8f9ff'
  surface-dim: '#cbdbf5'
  surface-bright: '#f8f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eff4ff'
  surface-container: '#e5eeff'
  surface-container-high: '#dce9ff'
  surface-container-highest: '#d3e4fe'
  on-surface: '#0b1c30'
  on-surface-variant: '#45464d'
  inverse-surface: '#213145'
  inverse-on-surface: '#eaf1ff'
  outline: '#76777d'
  outline-variant: '#c6c6cd'
  surface-tint: '#565e74'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#131b2e'
  on-primary-container: '#7c839b'
  inverse-primary: '#bec6e0'
  secondary: '#9b4500'
  on-secondary: '#ffffff'
  secondary-container: '#fd8a42'
  on-secondary-container: '#682c00'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#271901'
  on-tertiary-container: '#98805d'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dae2fd'
  primary-fixed-dim: '#bec6e0'
  on-primary-fixed: '#131b2e'
  on-primary-fixed-variant: '#3f465c'
  secondary-fixed: '#ffdbca'
  secondary-fixed-dim: '#ffb68e'
  on-secondary-fixed: '#331200'
  on-secondary-fixed-variant: '#763300'
  tertiary-fixed: '#fcdeb5'
  tertiary-fixed-dim: '#dec29a'
  on-tertiary-fixed: '#271901'
  on-tertiary-fixed-variant: '#574425'
  background: '#f8f9ff'
  on-background: '#0b1c30'
  surface-variant: '#d3e4fe'
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '600'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 18px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '600'
    lineHeight: 14px
  table-data:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 16px
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 4px
  container-margin: 16px
  gutter: 8px
  row-padding: 8px 12px
  cell-padding: 4px 8px
  stack-gap-sm: 4px
  stack-gap-md: 12px
---

## Brand & Style

The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue. 

The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.

## Colors

The palette is anchored in professional neutrality to keep the focus on data. 
- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.

## Typography

This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel. 
- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen. 
- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data. 
- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.

## Layout & Spacing

The layout follows a **Fluid Grid** model with a 4px base increment. 
- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.

## Elevation & Depth

This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows. 
- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields. 
- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.

## Shapes

The design system uses a **Soft (Level 1)** roundedness profile. 
- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.

## Components

- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.