feat(ui): add corporate logo and update colors to Cobalt Blue, Tiger Orange, Emerald Green
- 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
This commit is contained in:
ijuanes
parent
c23304052a
commit
8c1d12a5c4
3 changed files with 225 additions and 16 deletions
176
docs/CORPORATE_DESIGN.md
Normal file
176
docs/CORPORATE_DESIGN.md
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
# 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 |
|
||||
BIN
static/Schamann.png
Normal file
BIN
static/Schamann.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -24,7 +24,7 @@
|
|||
height: 20px;
|
||||
border: 3px solid rgba(0,0,0,.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #10b981;
|
||||
border-top-color: #FC6A03;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<!-- Tailwind config for custom colors -->
|
||||
<!-- Tailwind config for custom corporate colors -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
|
|
@ -58,6 +58,42 @@
|
|||
700: '#047857',
|
||||
800: '#065f46',
|
||||
900: '#064e3b',
|
||||
},
|
||||
cobalt: {
|
||||
50: '#f0f5ff',
|
||||
100: '#e0eaff',
|
||||
200: '#b3c6ff',
|
||||
300: '#80a0ff',
|
||||
400: '#4d7aff',
|
||||
500: '#1338BE',
|
||||
600: '#0f2a9c',
|
||||
700: '#0b1f72',
|
||||
800: '#081552',
|
||||
900: '#060f38',
|
||||
},
|
||||
tiger: {
|
||||
50: '#fff8f0',
|
||||
100: '#ffe8d6',
|
||||
200: '#ffccab',
|
||||
300: '#ffae80',
|
||||
400: '#ff8c55',
|
||||
500: '#FC6A03',
|
||||
600: '#e05a00',
|
||||
700: '#b84500',
|
||||
800: '#8c3300',
|
||||
900: '#662500',
|
||||
},
|
||||
emerald: {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#028A0F',
|
||||
600: '#006b0c',
|
||||
700: '#005209',
|
||||
800: '#003d07',
|
||||
900: '#002904',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,15 +108,12 @@
|
|||
<!-- Container -->
|
||||
<div class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-primary-600 text-white shadow-lg">
|
||||
<header class="bg-cobalt-600 text-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo / Title -->
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||
</svg>
|
||||
<img src="/static/Schamann.png" alt="Corporate Logo" class="h-10 w-auto object-contain" style="max-height: 40px; height: 40px !important;">
|
||||
<h1 class="text-xl font-bold">{{ _('Tablet Management System') }}</h1>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,39 +167,39 @@
|
|||
{% endwith %}
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-primary-600 rounded-lg shadow-md mb-6" aria-label="Main navigation">
|
||||
<nav class="bg-cobalt-600 rounded-lg shadow-md mb-6" aria-label="Main navigation">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap justify-center sm:justify-start gap-1 sm:gap-2 py-3">
|
||||
<a href="/"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Home') }}
|
||||
</a>
|
||||
<a href="/add_tablet"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Add Tablet') }}
|
||||
</a>
|
||||
<a href="/add_user"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Add User') }}
|
||||
</a>
|
||||
<a href="/loan_tablet"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Loan Tablet') }}
|
||||
</a>
|
||||
<a href="/history"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('History') }}
|
||||
</a>
|
||||
<a href="/user_loans"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('User Loans') }}
|
||||
</a>
|
||||
<a href="/non_loanable_devices"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Non-Loanable Devices') }}
|
||||
</a>
|
||||
<a href="/project_management"
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
|
||||
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
||||
{{ _('Project Management') }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue