---
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."