54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
|
# 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.
|