Web_BLV_OA_Exam_Prod/docs/design-system.md

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.