8c1d12a5c4
- Add Schamann.png logo to static/ directory - Update base.html header with logo (force scaled to 40px) - Replace primary color with corporate color palette: - Cobalt Blue (#1338BE) for headers and navigation - Tiger Orange (#FC6A03) for accents and loading indicators - Emerald Green (#028A0F) for success states - Add full shade ranges (50-900) for all three colors in Tailwind config - Create docs/CORPORATE_DESIGN.md with color specifications and usage guidelines
176 lines
4.6 KiB
Markdown
176 lines
4.6 KiB
Markdown
# 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 |
|