kelolabumi-web/stitch_kelola_bumi/terra_tech_ethos/DESIGN.md

---
name: Terra-Tech Ethos
colors:
  surface: '#f4faff'
  surface-dim: '#cfdce4'
  surface-bright: '#f4faff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#e9f6fd'
  surface-container: '#e3f0f8'
  surface-container-high: '#ddeaf2'
  surface-container-highest: '#d7e4ec'
  on-surface: '#111d23'
  on-surface-variant: '#40493e'
  inverse-surface: '#263238'
  inverse-on-surface: '#e6f3fb'
  outline: '#707a6d'
  outline-variant: '#bfcaba'
  surface-tint: '#126d27'
  primary: '#126d27'
  on-primary: '#ffffff'
  primary-container: '#66bb6a'
  on-primary-container: '#004814'
  inverse-primary: '#83da85'
  secondary: '#8b5000'
  on-secondary: '#ffffff'
  secondary-container: '#ff9800'
  on-secondary-container: '#653900'
  tertiary: '#106d20'
  on-tertiary: '#ffffff'
  tertiary-container: '#64bb63'
  on-tertiary-container: '#00480f'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#9ff79f'
  primary-fixed-dim: '#83da85'
  on-primary-fixed: '#002105'
  on-primary-fixed-variant: '#005318'
  secondary-fixed: '#ffdcbe'
  secondary-fixed-dim: '#ffb870'
  on-secondary-fixed: '#2c1600'
  on-secondary-fixed-variant: '#693c00'
  tertiary-fixed: '#9df898'
  tertiary-fixed-dim: '#82db7e'
  on-tertiary-fixed: '#002204'
  on-tertiary-fixed-variant: '#005312'
  background: '#f4faff'
  on-background: '#111d23'
  surface-variant: '#d7e4ec'
typography:
  h1:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  h2:
    fontFamily: Space Grotesk
    fontSize: 36px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  h3:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-caps:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: '700'
    lineHeight: '1.4'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  container-max: 1280px
  gutter: 24px
---

## Brand & Style

The design system is built on the philosophy of "Precision Agriculture"—merging the raw, organic vitality of Indonesian soil with modern technological efficiency. The visual style is **Corporate / Modern** with a lean towards **Minimalism**. It prioritizes clarity and high-quality whitespace to evoke a sense of sustainability and transparency.

The target audience ranges from institutional investors and government stakeholders to modern agrarian entrepreneurs. The UI must feel authoritative and grounded (trustworthy) while utilizing crisp layouts and innovative interactions (forward-thinking). 

Key visual principles:
- **Clarity over Clutter:** Every element serves a functional purpose in the data-heavy landscape of agribusiness.
- **Organic Precision:** Combining soft, rounded corners with a strict underlying grid.
- **Sustainability through Efficiency:** Using a light-mode default to reduce visual fatigue and represent clean, open air.

## Colors

The palette is derived directly from the lifecycle of a plant—the vibrant green of a new leaf and the earthy orange of rich soil and harvest.

- **Primary (Leaf Green):** Used for primary actions, success states, and brand highlights. It represents growth and innovation.
- **Secondary (Earthy Orange):** Used for accent elements, notifications, and interactive highlights. It provides warmth and energy.
- **Tertiary (Deep Forest):** A grounding green used for hover states and sophisticated brand moments.
- **Neutral (Charcoal & Cool Gray):** We avoid pure black to maintain a professional, soft-touch readability. Charcoal is used for headings, while medium grays are reserved for secondary information and borders.
- **Background:** A pure white base ensures the "clean" and "professional" requirement is met, allowing the vibrant primary colors to pop without visual vibration.

## Typography

This design system utilizes a dual-font strategy to balance innovation with readability.

- **Headlines (Space Grotesk):** Chosen for its geometric, slightly technical appearance. It mirrors the logo's structured look, providing a sense of technological advancement and precision.
- **Body & UI (Manrope):** A highly legible, modern sans-serif. It is approachable and refined, ensuring that long-form agricultural reports or data dashboards remain easy to parse.
- **Hierarchy:** We use generous line heights (1.6) for body text to maintain an airy, "sustainable" feel. Headline tracking is slightly tightened to feel more impactful and editorial.

## Layout & Spacing

The layout philosophy follows a **Fixed Grid** system for desktop to maintain a professional, organized structure, transitioning to a fluid model for mobile devices.

- **Grid:** A 12-column grid system with 24px gutters. Content is usually contained within a 1280px max-width wrapper.
- **Rhythm:** An 8px linear scale is used for all spacing. For tight UI elements (like inside cards), use 8px or 16px. For structural section spacing, use 40px or 64px.
- **Density:** We employ a "Medium" density. This provides enough room for data-heavy agribusiness tools while ensuring the interface never feels cramped or overwhelming.

## Elevation & Depth

This design system uses **Tonal Layers** and **Low-Contrast Outlines** to create depth, avoiding heavy drop shadows to maintain a clean, modern aesthetic.

- **Surface Tiers:** Backgrounds are white (#FFFFFF), while secondary containers (like sidebars or cards) may use a subtle cool gray (#F5F7F8).
- **Shadows:** When necessary for functional depth (e.g., active dropdowns or floating action buttons), use a "Botanical Shadow"—a very soft, diffused shadow with a slight tint of the Primary Green color at 5-10% opacity.
- **Borders:** Use 1px borders in a light gray (#E0E0E0) to define card boundaries and input fields, rather than relying on elevation.

## Shapes

The shape language is **Rounded (0.5rem)**. This choice softens the "corporate" edge of the company, making the brand feel more accessible and organic, like the natural curves found in agriculture.

- **Standard Elements:** Buttons and Input Fields use a 8px (0.5rem) radius.
- **Containers:** Large cards and Modals use 16px (1rem) for a more distinct, modern container feel.
- **Pills:** Status tags and small chips use a full-round (pill) shape to differentiate them from actionable buttons.

## Components

### Buttons
- **Primary:** Solid Leaf Green with White text. Bold weight. High contrast.
- **Secondary:** Outlined Leaf Green with Green text. Used for less urgent actions.
- **Tertiary:** Earthy Orange text with no background. Used for "Warning" or "Special Interest" actions like "Harvest Alerts."

### Cards
- **Style:** 1px border (#E0E0E0) with 16px rounded corners. No shadow unless hovered.
- **Usage:** Used to group data visualizations, crop health stats, or regional updates.

### Input Fields
- **Style:** Light gray border, 8px radius. On focus, the border transitions to Primary Green with a 2px stroke.
- **Labels:** Always visible above the field in Manrope Bold (12px).

### Chips & Tags
- **Status Tags:** Pill-shaped. Use low-opacity tints of the color (e.g., light green background with dark green text for "Active").

### Additional Contextual Components
- **Data Visualizations:** Use the secondary Earthy Orange for "Alert" thresholds and Primary Green for "Healthy" growth metrics. 
- **Progress Bars:** Thick, 8px rounded bars used for tracking harvest cycles or supply chain milestones.