Initial import of AbelBirdNest Stock

design-assets/stitch_abel_stock/lot_based_inventory_system/DESIGN.md

@@ -0,0 +1,158 @@
+---
+name: Lot-Based Inventory System
+colors:
+  surface: '#f8fafa'
+  surface-dim: '#d8dadb'
+  surface-bright: '#f8fafa'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f2f4f4'
+  surface-container: '#eceeee'
+  surface-container-high: '#e6e8e9'
+  surface-container-highest: '#e1e3e3'
+  on-surface: '#191c1d'
+  on-surface-variant: '#3f484a'
+  inverse-surface: '#2e3131'
+  inverse-on-surface: '#eff1f1'
+  outline: '#6f797a'
+  outline-variant: '#bfc8ca'
+  surface-tint: '#1d6871'
+  primary: '#00454c'
+  on-primary: '#ffffff'
+  primary-container: '#0d5e67'
+  on-primary-container: '#92d5df'
+  inverse-primary: '#8ed1db'
+  secondary: '#4e6073'
+  on-secondary: '#ffffff'
+  secondary-container: '#cfe2f9'
+  on-secondary-container: '#526478'
+  tertiary: '#60320f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#7c4824'
+  on-tertiary-container: '#ffbb91'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#aaeef8'
+  primary-fixed-dim: '#8ed1db'
+  on-primary-fixed: '#001f23'
+  on-primary-fixed-variant: '#004f57'
+  secondary-fixed: '#d1e4fb'
+  secondary-fixed-dim: '#b5c8df'
+  on-secondary-fixed: '#091d2e'
+  on-secondary-fixed-variant: '#36485b'
+  tertiary-fixed: '#ffdbc7'
+  tertiary-fixed-dim: '#feb78a'
+  on-tertiary-fixed: '#311300'
+  on-tertiary-fixed-variant: '#6b3a17'
+  background: '#f8fafa'
+  on-background: '#191c1d'
+  surface-variant: '#e1e3e3'
+typography:
+  display-lot:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '700'
+    lineHeight: 32px
+    letterSpacing: -0.02em
+  h1:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+  h2:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-base:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  table-data:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '500'
+    lineHeight: 16px
+  label-caps:
+    fontFamily: Inter
+    fontSize: 11px
+    fontWeight: '700'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  container-margin: 24px
+  gutter: 16px
+  compact-padding: 8px
+  row-height-sm: 32px
+  row-height-md: 48px
+---
+
+## Brand & Style
+
+The design system is engineered for high-stakes operational environments where precision and speed are paramount. The visual language communicates reliability and institutional trust, specifically tailored for the bird’s nest (Sarang Burung Walet) export and processing industry. 
+
+The aesthetic follows a **Corporate Modern** approach. It avoids unnecessary decoration, focusing instead on structural clarity and high information density. The interface feels like a high-performance tool—utilitarian, crisp, and robust. By utilizing a "Scan-First" philosophy, the design ensures that lot codes, weights, and processing stages are immediately identifiable within complex data environments.
+
+## Colors
+
+The palette is anchored by a sophisticated **Deep Teal**, chosen for its balance between professional authority and the natural, organic origins of the product. 
+
+- **Primary Deep Teal:** Used for primary actions, active navigation states, and key branding elements.
+- **Surface & Backgrounds:** A tiered system of whites and very light grays (Slate 50/White) creates a clean workspace that minimizes eye strain during long operational shifts.
+- **Functional Status Colors:** High-saturation greens, oranges, and reds are reserved strictly for operational status (e.g., 'In Quality Control', 'Pending Export', 'Contaminated').
+- **Neutral Gray:** Specifically designated for 'Closed' or 'Archived' lots to visually de-emphasize completed data.
+
+## Typography
+
+This design system utilizes **Inter** for its exceptional legibility in data-heavy contexts. The typographic scale is condensed to prioritize content density without sacrificing readability.
+
+- **Data Optimization:** The `table-data` style uses a Medium weight (500) to ensure that alphanumeric lot codes are legible even at smaller sizes.
+- **Emphasis:** A specialized `display-lot` style is used for header-level lot identification, ensuring the primary object of focus is never missed.
+- **Labels:** Uppercase labels with slight letter spacing are used for table headers and form field captions to create a clear hierarchy between the UI structure and the user's data.
+
+## Layout & Spacing
+
+The layout employs a **Fluid Grid** system with fixed sidebars for navigation. To accommodate high information density, the spacing scale is built on a 4px baseline grid.
+
+- **Information Density:** Tables and forms utilize `compact-padding` to maximize the number of visible rows on a single screen, reducing the need for excessive scrolling.
+- **Grid Structure:** A 12-column system is used for dashboard layouts, while inventory logs utilize a full-width fluid layout to maximize the horizontal space for multi-column data (e.g., Lot ID, Harvest Date, Grade, Weight, Moisture Content, Status).
+- **Margins:** Generous `container-margin` ensures the interface feels professional and organized, preventing the dense data from feeling cluttered.
+
+## Elevation & Depth
+
+Hierarchy is established through **Tonal Layers** and **Low-Contrast Outlines** rather than aggressive shadows.
+
+- **Surface Levels:** The background uses `bg_primary`, while active work surfaces like cards and table containers use `bg_secondary`.
+- **Borders:** Every container is defined by a 1px solid border in `border_subtle`. This provides a clear "box" for data without adding visual weight.
+- **Shadows:** A single, consistent "Soft Drop" shadow (0px 2px 4px rgba(0,0,0,0.05)) is used exclusively for floating elements like dropdown menus and modals to lift them off the work surface.
+
+## Shapes
+
+The shape language is **Soft (0.25rem)**, reflecting a precise and geometric personality. 
+
+- **Components:** Buttons, input fields, and checkboxes all use the base 4px (0.25rem) radius.
+- **Badges:** Status badges use a slightly higher `rounded-lg` (0.5rem) to differentiate them as interactive or informational "pills" within the rigid rectangular grid of the data tables.
+- **Selection States:** Focus states and active row selections should use sharp, clear colored borders (Primary) to eliminate any ambiguity regarding user focus.
+
+## Components
+
+- **Lot Status Badges:** Compact pills with light background tints and dark text of the corresponding status color (e.g., Light Green background with Dark Green text).
+- **Data Tables:** High-density rows with subtle hover states (#F1F5F9). Headers must remain sticky during vertical scrolls.
+- **Input Fields:** Inset borders with a 2px Teal focus ring. For numerical data like "Weight (kg)", include right-aligned unit labels within the field.
+- **Primary Buttons:** Solid Teal backgrounds with white text. Secondary buttons use a Teal outline with a transparent background.
+- **Inventory Cards:** Used for summary stats (e.g., "Total Stock", "Pending QC"). These feature a large numerical display and a small trend indicator.
+- **Progress Steppers:** Horizontal indicators showing the lifecycle of a lot—from "Raw Material" to "Processed" to "Export Ready."