GestionTablets/docs/CORPORATE_DESIGN.md

# Corporate Design Specifications

## Overview

This document defines the corporate design specifications for the Tablet Management System, including color palette, logo usage, and branding guidelines.

---

## Color Palette

### Primary Corporate Colors

The following three colors constitute the official corporate color palette:

| Color Name | Hex Code | RGB | Usage |
|------------|----------|-----|-------|
| **Cobalt Blue** | `#1338BE` | rgb(19, 56, 190) | Primary brand color, headers, navigation, main actions |
| **Tiger Orange** | `#FC6A03` | rgb(252, 106, 3) | Accents, highlights, loading indicators, secondary actions |
| **Emerald Green** | `#028A0F` | rgb(2, 138, 15) | Success states, positive feedback, confirmation |

### Color Shades

Each corporate color has been extended with a full shade range (50-900) for use in Tailwind CSS:

#### Cobalt Blue Shades
- `cobalt-50`: `#f0f5ff` (Lightest)
- `cobalt-100`: `#e0eaff`
- `cobalt-200`: `#b3c6ff`
- `cobalt-300`: `#80a0ff`
- `cobalt-400`: `#4d7aff`
- **`cobalt-500`: `#1338BE`** (Primary)
- `cobalt-600`: `#0f2a9c`
- `cobalt-700`: `#0b1f72`
- `cobalt-800`: `#081552`
- `cobalt-900`: `#060f38` (Darkest)

#### Tiger Orange Shades
- `tiger-50`: `#fff8f0` (Lightest)
- `tiger-100`: `#ffe8d6`
- `tiger-200`: `#ffccab`
- `tiger-300`: `#ffae80`
- `tiger-400`: `#ff8c55`
- **`tiger-500`: `#FC6A03`** (Primary)
- `tiger-600`: `#e05a00`
- `tiger-700`: `#b84500`
- `tiger-800`: `#8c3300`
- `tiger-900`: `#662500` (Darkest)

#### Emerald Green Shades
- `emerald-50`: `#f0fdf4` (Lightest)
- `emerald-100`: `#dcfce7`
- `emerald-200`: `#bbf7d0`
- `emerald-300`: `#86efac`
- `emerald-400`: `#4ade80`
- **`emerald-500`: `#028A0F`** (Primary)
- `emerald-600`: `#006b0c`
- `emerald-700`: `#005209`
- `emerald-800`: `#003d07`
- `emerald-900`: `#002904` (Darkest)

---

## Logo Usage

### Logo File
- **File**: `assets/Schamann.png`
- **Dimensions**: 175 x 161 pixels
- **Format**: PNG with transparency
- **Web Path**: `/static/Schamann.png`

### Display Guidelines
- The logo should be displayed at a fixed height of 40px in the header
- Use `object-contain` to maintain aspect ratio
- The logo should appear to the left of the application title
- Do not stretch or distort the logo

### Implementation
```html
<img src="/static/Schamann.png" alt="Corporate Logo" class="h-10 w-auto object-contain" style="max-height: 40px; height: 40px !important;">
```

---

## Usage Examples

### Headers and Navigation
```html
<!-- Header background -->
<header class="bg-cobalt-600 text-white shadow-lg">

<!-- Navigation background -->
<nav class="bg-cobalt-600 rounded-lg shadow-md">

<!-- Navigation hover -->
<a class="hover:bg-cobalt-700 transition-colors">
```

### Buttons and Actions
```html
<!-- Primary button (Cobalt Blue) -->
<button class="bg-cobalt-600 hover:bg-cobalt-700 text-white">

<!-- Secondary button (Tiger Orange) -->
<button class="bg-tiger-500 hover:bg-tiger-600 text-white">

<!-- Success button (Emerald Green) -->
<button class="bg-emerald-500 hover:bg-emerald-600 text-white">
```

### Status Indicators
```html
<!-- Success state -->
<div class="bg-emerald-100 text-emerald-800">Success!</div>

<!-- Warning state -->
<div class="bg-tiger-100 text-tiger-800">Warning</div>

<!-- Info state -->
<div class="bg-cobalt-100 text-cobalt-800">Info</div>
```

---

## Tailwind CSS Configuration

The corporate colors are configured in the Tailwind CSS configuration within the base template:

```javascript
tailwind.config = {
    theme: {
        extend: {
            colors: {
                cobalt: {
                    50: '#f0f5ff',
                    100: '#e0eaff',
                    // ... all shades
                    500: '#1338BE',
                    // ...
                },
                tiger: {
                    50: '#fff8f0',
                    // ... all shades
                    500: '#FC6A03',
                    // ...
                },
                emerald: {
                    50: '#f0fdf4',
                    // ... all shades
                    500: '#028A0F',
                    // ...
                }
            }
        }
    }
}
```

---

## Color Accessibility

All corporate colors meet WCAG AA contrast requirements when used appropriately:

- **Cobalt Blue (#1338BE)**: Use white text for backgrounds
- **Tiger Orange (#FC6A03)**: Use white text for backgrounds
- **Emerald Green (#028A0F)**: Use white text for backgrounds

For lighter shades (100-300), use dark text (gray-800 or gray-900).

---

## Version History

| Version | Date | Changes |
|---------|------|---------|
| 1.0 | 2026-06-20 | Initial corporate design specifications with Cobalt Blue, Tiger Orange, and Emerald Green color palette |