ijuanes 8c1d12a5c4 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

2026-06-20 12:40:00 +01:00

4.6 KiB

Raw Blame History

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

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

Usage Examples

<!-- 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

<!-- 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

<!-- 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:

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

4.6 KiB Raw Blame History