kelolabumi-web/stitch_kelola_bumi/terra_tech_ethos/DESIGN.md

name, colors, typography, rounded, spacing

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