diff --git a/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md b/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md deleted file mode 100644 index 5d2e247..0000000 --- a/inspiration/stitch_bakery_order_management_system(1)/DESIGN.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -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. \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system(1)/code.html b/inspiration/stitch_bakery_order_management_system(1)/code.html deleted file mode 100644 index 7cc272a..0000000 --- a/inspiration/stitch_bakery_order_management_system(1)/code.html +++ /dev/null @@ -1,398 +0,0 @@ - - - - - -Catalogue Management - - - - - - - - - - -
- -
-

Order Tracker

-
-search - -
-
- - - -
- -
- - -
-
-
- -
- -
- -
-

Catalogue Management

-
-
-filter_list - -
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Cake NameSKUBase PriceCategoryActions
-
-cake -
-		Classic Vanilla BeanVB-1001$45.00 -Signature - - -
-
-cake -
-		Decadent Chocolate FudgeCF-1002$55.00 -Signature - - -
-
-cake -
-		Autumn Spiced CarrotSC-2001$48.00 -Seasonal - - -
cake
Lemon Raspberry DelightLR-1004$50.00Signature
cake
Strawberry ShortcakeSS-1005$42.00Signature
cake
Winter Peppermint MochaPM-2002$52.00Seasonal
-
- -
-Showing 1 to 6 of 24 entries -
- - - - - -
-
-
- - -
- \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system(1)/screen.png b/inspiration/stitch_bakery_order_management_system(1)/screen.png deleted file mode 100644 index ee09ece..0000000 Binary files a/inspiration/stitch_bakery_order_management_system(1)/screen.png and /dev/null differ diff --git a/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md b/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md deleted file mode 100644 index 5d2e247..0000000 --- a/inspiration/stitch_bakery_order_management_system(2)/DESIGN.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -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. \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system(2)/code.html b/inspiration/stitch_bakery_order_management_system(2)/code.html deleted file mode 100644 index c976ce8..0000000 --- a/inspiration/stitch_bakery_order_management_system(2)/code.html +++ /dev/null @@ -1,455 +0,0 @@ - - - - - -Production Dashboard - Crumbs & Co. - - - - - - - - - - - - -
-
- -
-
-
- -receipt_long Total Orders Today - -142 - -arrow_upward 12% vs yesterday - -
-
-
- -cake Cakes to Decorate - -87 - -priority_high 24 Rush Orders - -
-
-
- -check_circle Ready for Pickup - -34 - - Next pickup in 15m - -
-
-
- -payments Revenue (Est) - -$4,250 - -trending_up On target - -
-
-
- -
-
-
-

Production Queue

- -
-
-
-
-
CF
-
-Chocolate Fudge -Standard 8" -
-
-12 -
-
-
-
RV
-
-Red Velvet -Custom Inscriptions -
-
-5 -
-
-
-
VB
-
-Vanilla Bean -Tiered -
-
-8 -
-
-
-
CC
-
-Carrot Cake -Nut-Free -
-
-3 -
-
-
- -
-
-
- -
-
-
-
-

Active Orders

-142 Total -
-
- - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Order IDCustomerPickup TimeItemsTotalStatus
#ORD-9921Sarah Jenkins10:30 AM1x Chocolate Fudge (8"), 12x Macarons$65.00 -Ready - - -
#ORD-9922Michael Chang11:00 AM (Rush)2x Red Velvet (Tiered), 1x Custom In...$145.50 -Decorating - - -
#ORD-9923Elena Rodriguez1:00 PM1x Vanilla Bean (10")$45.00 -Baking - - -
#ORD-9924David Kim2:30 PM1x Carrot Cake (Nut-Free)$50.00 -Queued - - -
#ORD-9925Corporate Event Inc.4:00 PM5x Chocolate Fudge (Sheet), 100x C...$450.00 -Queued - - -
-
-
-Showing 1-5 of 142 -
- - -
-
-
-
-
-
-
- \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system(2)/screen.png b/inspiration/stitch_bakery_order_management_system(2)/screen.png deleted file mode 100644 index 8350eb1..0000000 Binary files a/inspiration/stitch_bakery_order_management_system(2)/screen.png and /dev/null differ diff --git a/inspiration/stitch_bakery_order_management_system/DESIGN.md b/inspiration/stitch_bakery_order_management_system/DESIGN.md deleted file mode 100644 index 5d2e247..0000000 --- a/inspiration/stitch_bakery_order_management_system/DESIGN.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -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. \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system/code.html b/inspiration/stitch_bakery_order_management_system/code.html deleted file mode 100644 index 7825373..0000000 --- a/inspiration/stitch_bakery_order_management_system/code.html +++ /dev/null @@ -1,443 +0,0 @@ - - - - - -Order Tracker - Dashboard - - - - - - - - - - - -
- -
-
-
Order Tracker
- - -
- -
- - - -
-
- -
-
- -
- -
-
-

-person_add - Customer Details -

-
-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
-
-

-inventory_2 - Catalogue Items -

-
-filter_list - -
-
-
-
- -
-
-
-cake -
-
-
Classic Vanilla
-
$35.00
-
-
-
- -0 - -
-
- -
-
-
-cake -
-
-
Rich Chocolate
-
$40.00
-
-
-
- -1 - -
-
- -
-
-
-cake -
-
-
Red Velvet
-
$42.00
-
-
-
- -0 - -
-
-
-
-
-cookie -
-
-
Choc Chip Box
-
$15.00
-
-
-
- -0 - -
-
-
-
-
-bakery_dining -
-
-
Sourdough Loaf
-
$8.00
-
-
-
- -0 - -
-
-
-
-
-breakfast_dining -
-
-
Croissant Box
-
$24.00
-
-
-
- -0 - -
-
-
-
-
-
- - -
- -
-
-

Recent Orders

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Order IDCustomerDateStatusTotal
#ORD-092Alice SmithToday, 09:30 AM -Preparing -$125.50
#ORD-091Bob JonesToday, 08:15 AM -Ready -$45.00
-
-
-
-
- \ No newline at end of file diff --git a/inspiration/stitch_bakery_order_management_system/screen.png b/inspiration/stitch_bakery_order_management_system/screen.png deleted file mode 100644 index c634e28..0000000 Binary files a/inspiration/stitch_bakery_order_management_system/screen.png and /dev/null differ