From 8c1d12a5c412dc8b7c87765a77b9cd7ba22a786a Mon Sep 17 00:00:00 2001 From: ijuanes Date: Sat, 20 Jun 2026 12:40:00 +0100 Subject: [PATCH] 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 --- docs/CORPORATE_DESIGN.md | 176 +++++++++++++++++++++++++++++++++++++++ static/Schamann.png | Bin 0 -> 10944 bytes templates/base.html | 65 +++++++++++---- 3 files changed, 225 insertions(+), 16 deletions(-) create mode 100644 docs/CORPORATE_DESIGN.md create mode 100644 static/Schamann.png diff --git a/docs/CORPORATE_DESIGN.md b/docs/CORPORATE_DESIGN.md new file mode 100644 index 0000000..eae6bed --- /dev/null +++ b/docs/CORPORATE_DESIGN.md @@ -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 +Corporate Logo +``` + +--- + +## Usage Examples + +### Headers and Navigation +```html + +
+ + +