---
name: FreeGive Digital Solidarity System
colors:
  surface: '#f6fbf5'
  surface-dim: '#d6dbd6'
  surface-bright: '#f6fbf5'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f0f5ef'
  surface-container: '#eaefea'
  surface-container-high: '#e5e9e4'
  surface-container-highest: '#dfe4df'
  on-surface: '#181d1a'
  on-surface-variant: '#3e4943'
  inverse-surface: '#2c322e'
  inverse-on-surface: '#edf2ed'
  outline: '#6e7a73'
  outline-variant: '#bdc9c1'
  surface-tint: '#006c4c'
  primary: '#006446'
  on-primary: '#ffffff'
  primary-container: '#087f5b'
  on-primary-container: '#cfffe5'
  inverse-primary: '#78d9af'
  secondary: '#0859c4'
  on-secondary: '#ffffff'
  secondary-container: '#5890fe'
  on-secondary-container: '#002964'
  tertiary: '#903e3b'
  on-tertiary: '#ffffff'
  tertiary-container: '#ae5551'
  on-tertiary-container: '#fff2f0'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#94f6ca'
  primary-fixed-dim: '#78d9af'
  on-primary-fixed: '#002115'
  on-primary-fixed-variant: '#005139'
  secondary-fixed: '#d9e2ff'
  secondary-fixed-dim: '#afc6ff'
  on-secondary-fixed: '#001a43'
  on-secondary-fixed-variant: '#004398'
  tertiary-fixed: '#ffdad7'
  tertiary-fixed-dim: '#ffb3ae'
  on-tertiary-fixed: '#3f0206'
  on-tertiary-fixed-variant: '#7a2d2b'
  background: '#f6fbf5'
  on-background: '#181d1a'
  surface-variant: '#dfe4df'
  status-dispute-bg: '#fff1f0'
  status-dispute-text: '#cf222e'
  status-mediation-bg: '#fff8e6'
  status-mediation-text: '#b05500'
  status-review-bg: '#eef6ff'
  status-review-text: '#0052cc'
  surface-faint: '#f6fbf5'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.05em
  code-verification:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: 0.2em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 32px
  sidebar-width: 280px
  container-max: 1280px
---

## Brand & Style

The design system is centered on **Solidarity, Trust, and Community**. It employs a **Corporate-Modern** aesthetic blended with **Friendly-Tactile** nuances to bridge the gap between institutional security and human-centric mutual aid. The "Trust & Safety" module extends this narrative by introducing a "Guardian" layer—visual cues that are protective and clarifying without being punitive.

The style emphasizes clarity and "The Ethical Exchange," utilizing high-contrast elements for accessibility and generous whitespace to ensure calm during high-stakes interactions. The interface avoids cold minimalism, opting instead for a systematic, dependable structure that facilitates safe community donations and assistance requests.

## Colors

The palette is anchored by **Main Green (#087f5b)**, symbolizing growth and ethical action. For the Trust & Safety module, a specific semantic layer is introduced to provide immediate visual context for moderation and safety states:

- **Primary Green**: Used for standard structural branding and "Resolved" or "Safe" states.
- **Warm Ambers**: Denotes "Action Required" or "In Mediation." These tones are designed to be visible and cautionary without inducing panic.
- **Soft Reds**: Reserved for "Dispute Open" or "High Risk" flags. These use a slightly desaturated background to maintain legibility while signaling urgency.
- **Calm Blues**: Utilized for "Under Review" or "Moderator Investigating," signaling a neutral, professional state of processing.
- **Surface Neutrals**: A slate-tinted background (#f6fbf5) is used to keep the interface crisp and reduce cognitive load during complex reporting tasks.

## Typography

This design system utilizes **Inter** for its systematic rhythm and high legibility across both administrative and community interfaces.

- **Headlines**: Employ tighter letter-spacing and heavier weights to project a secure, authoritative presence.
- **Body Text**: Uses a standard weight (400) with increased line-height to support readability for a diverse range of users, including elderly and non-native speakers.
- **Labels & Status Indicators**: Features slightly increased tracking (0.05em) and bold weights to ensure categories and status updates are scannable in dense moderation logs.
- **Moderation Inputs**: Code and sensitive verification UI uses a high-weight, wide-tracked style to minimize entry errors during high-stress reporting processes.

## Layout & Spacing

The layout follows a **Hybrid Grid** model optimized for both community discovery and administrative management:

- **Safety Dashboard**: A fixed 280px sidebar provides quick access to moderation tools, while the fluid main content area accommodates data-heavy dispute tables and secure chat logs.
- **Public Interface**: A 12-column fluid grid with a 1280px maximum container width.
- **Spacing Rhythm**: All dimensions are derived from a 4px base unit. Vertical spacing between safety report sections should use 24px or 32px to keep forms feeling "breathable" and manageable.
- **Adaptive Reflow**: On mobile, the sidebar collapses into a secure bottom navigation bar, and horizontal margins increase to 16px to ensure "safe-tap" areas for critical report buttons.

## Elevation & Depth

Visual hierarchy is managed through **Tonal Layers** and **Soft Ambient Shadows** to avoid the visual clutter of heavy borders.

1.  **Level 0 (Base)**: The default surface tint (#f6fbf5) serves as the canvas.
2.  **Level 1 (Module Containers)**: Report forms and message bubbles are Pure White (#FFFFFF) with a soft 4% opacity black shadow (8px blur, 2px offset). This creates a gentle lift that signals "interactable."
3.  **Level 2 (Critical Modals)**: Dispute resolution pop-ups and high-priority alerts use an 8% opacity shadow (16px blur, 4px offset) to dominate the visual field and demand attention.

For structural separation in the Trust & Safety module, use a 1px soft stroke (#bdc9c1) rather than shadows to define borders within white surfaces.

## Shapes

The design system uses a **Rounded** (Level 2) language to balance professional precision with community friendliness.

- **Input Fields & Form Elements**: 0.5rem (8px) for a modern, approachable feel.
- **Report Containers & Content Cards**: `rounded-xl` (1.5rem / 24px) to soften the appearance of serious moderation data.
- **Status Pills**: Fully rounded (Pill-shaped). This distinct shape differentiates "status information" from "actionable buttons" at a glance.

## Components

### Status Indicators
- **Dispute Open**: Pill-shaped with a soft red background and high-contrast red text.
- **In Mediation**: Pill-shaped with a warm amber background and deep brown-orange text.
- **Under Review / Resolved**: Calm blue for review; Primary Green for resolved.

### Report Forms
- **Field Styling**: 1px border (#bdc9c1) with a 0.5rem radius. Focus states use Primary Green (#087f5b) with a 2px offset ring.
- **Instructional Text**: Small body text in `on-surface-variant` placed directly below labels to guide users through sensitive reporting.

### Secure Communication Channel
- **Message Bubbles**: Left-aligned (System/Other) bubbles use `surface-container-low`; Right-aligned (User) bubbles use Primary Green with white text.
- **Moderator Badge**: A small, high-contrast label within the chat to verify the identity of the safety agent.

### Verification & Inputs
- **Verification Boxes**: 48x64px individual digit boxes for secure authentication codes, utilizing the `code-verification` typography style for maximum clarity.