cake-order-tracker/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md

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