# UI Design System & Brand Guidelines

## 1. Brand Identity
The visual identity is centered around **Mars Green**, representing a professional, modern, and technological atmosphere.

### Colors
- **Primary (Mars Green)**: `#008C8C` (Base), `#00A3A3` (Light), `#006666` (Dark)
- **Neutral**: Slate Grays for text and borders.
- **Background**: Very light cool grays (`#F9FAFB` or Mars-tinted whites).

### Logo Usage
- **Primary Logo**:
  - **Dimensions**: 100px width x 40px height.
  - **Placement**: Top Navigation Bar (Left).
  - **Style**: Contains watermark "Placeholder" at 15% opacity.
- **Secondary Logo**:
  - **Dimensions**: 80px width x 30px height.
  - **Placement**: Footer (Right).
  - **Style**: Simplified version.

## 2. Layout & Spacing
- **Grid System**: 8px baseline. All margins and paddings should be multiples of 8px (e.g., 8, 16, 24, 32).
- **Container**: Max-width 1200px for main content areas.
- **Responsive**:
  - Mobile (<768px): 16px padding.
  - Desktop (>=768px): 24px+ padding.

## 3. Typography
- **Font Family**: Inter, system-ui, sans-serif.
- **Base Size**: 14px (Body), 16px (Inputs/Buttons).
- **Headings**:
  - H1: 24px/32px Bold
  - H2: 20px/28px Bold
  - H3: 16px/24px SemiBold

## 4. Components
- **Buttons**:
  - Height: 40px (Default), 48px (Large/Mobile).
  - Radius: 8px.
  - Shadow: Soft colored shadow on primary buttons.
- **Cards**:
  - Radius: 12px.
  - Shadow: Multi-layered soft shadow.
  - Border: None or 1px solid gray-100.
- **Inputs**:
  - Height: 40px.
  - Radius: 8px.
  - Border: Gray-300 default, Mars Green on focus.

## 5. Implementation Notes
- Use `ConfigProvider` in `src/main.tsx` for global Ant Design overrides.
- Use `tailwind.config.js` for utility classes (`bg-mars-500`, `text-mars-600`).
- Use `src/components/common/Logo.tsx` for all logo instances.