git-branding/README.md

# Git Branding

Temas de colores, paletas y iconos usados para el sitio git.openlat.dev

Este repositorio contiene todos los activos visuales, temas personalizados de git.openlat.dev, paleta de colores Material Design 3 y plantillas institucionales creadas para el proyecto **openlat.dev**.

## 📁 Estructura del Paquete `git-branding`

- **`color-palete.txt`**: Tokens oficiales de color M3 (Zafiro `#4A69AE`, Slate Teal `#3E6B74`, Obsidian Dark, Ice Light).
- **`themes/`**: Temas CSS para Forgejo (`openlatdev-brand-dark.css`, `openlatdev-brand-light.css`, `openlatdev-brand-auto.css`).
- **`icons/`**: Mascota "Guacamaya de Git" en SVG (`logo.svg`, `favicon.svg`), PNGs en alta resolución y muestras vectoriales de color (`icons/colors/`).
- **`templates/`**: Plantilla personalizada limpia de la portada (`home.tmpl`).
- **`LICENSE`**: Licencia MIT de código/recursos abiertos.

---

## 🎨 Paleta de Colores (Material Design 3)

### 1. Colores Principales (Primary & Secondary Accents)
| Nombre | Token | Código HEX | Muestra | Uso / Descripción |
| :--- | :--- | :---: | :---: | :--- |
| **Primary Base** | `--color-primary` | `#4A69AE` | ![](./icons/colors/4A69AE.svg) | Zafiro base. Sobriedad y confianza |
| **Primary Dark** | `--color-primary-dark` | `#3B548C` | ![](./icons/colors/3B548C.svg) | Estados hover/active en Tema Claro |
| **Primary Light** | `--color-primary-light` | `#6B87C8` | ![](./icons/colors/6B87C8.svg) | Estados hover/active en Tema Oscuro |
| **Secondary Base** | `--color-secondary` | `#3E6B74` | ![](./icons/colors/3E6B74.svg) | Slate Teal para insignias, pestañas y botones secundarios |
| **Secondary Light** | `--color-secondary-light` | `#568792` | ![](./icons/colors/568792.svg) | Destacado de bordes e indicadores activos |

### 2. Tema Oscuro (Ink Obsidian Night)
| Elemento | Código HEX | Muestra | Descripción |
| :--- | :---: | :---: | :--- |
| **Body Canvas** | `#0E1217` | ![](./icons/colors/0E1217.svg) | Fondo base ultra oscuro (Ink Obsidian) |
| **Header / Navbar** | `#12171E` | ![](./icons/colors/12171E.svg) | Barra de navegación superior |
| **Card Header** | `#1E2530` | ![](./icons/colors/1E2530.svg) | Cabecera elevada de cajas y contenedores |
| **Card Body** | `#161B23` | ![](./icons/colors/161B23.svg) | Cuerpo del contenedor |
| **Text Primary** | `#F1F5F9` | ![](./icons/colors/F1F5F9.svg) | Tipografía Slate-100 de alto contraste |
| **Text Muted** | `#94A3B8` | ![](./icons/colors/94A3B8.svg) | Texto secundario y etiquetas Slate-400 |
| **Border Subtle** | `#2E3646` | ![](./icons/colors/2E3646.svg) | Divisores y bordes sutiles |

### 3. Tema Claro (Material Ice & Snow)
| Elemento | Código HEX | Muestra | Descripción |
| :--- | :---: | :---: | :--- |
| **Body Canvas** | `#F8FAFC` | ![](./icons/colors/F8FAFC.svg) | Fondo claro suave Slate-50 |
| **Header / Navbar** | `#0E1217` | ![](./icons/colors/0E1217.svg) | Navbar oscuro contrastante |
| **Card Header** | `#F1F5F9` | ![](./icons/colors/F1F5F9.svg) | Cabecera de contenedor Slate-100 |
| **Card Body** | `#FFFFFF` | ![](./icons/colors/FFFFFF.svg) | Contenedor blanco puro |
| **Text Primary** | `#0F172A` | ![](./icons/colors/0F172A.svg) | Tipografía Slate-900 |
| **Text Muted** | `#475569` | ![](./icons/colors/475569.svg) | Texto secundario Slate-600 |
| **Border Subtle** | `#E2E8F0` | ![](./icons/colors/E2E8F0.svg) | Bordes y divisores Slate-200 |

### 4. Colores Funcionales y de Estado
| Estado | Código HEX | Muestra | Nombre |
| :--- | :---: | :---: | :--- |
| **Success** | `#10B981` | ![](./icons/colors/10B981.svg) | Emerald Green |
| **Warning** | `#F59E0B` | ![](./icons/colors/F59E0B.svg) | Amber Yellow |
| **Danger** | `#EF4444` | ![](./icons/colors/EF4444.svg) | Crimson Red |
| **Info** | `#3B82F6` | ![](./icons/colors/3B82F6.svg) | Azure Blue |

---

## Contribuir
Antes de enviar un pull request, verifica que tus modificaciones no rompan el diseño en tema claro/oscuro y explica
por que consideras que deben ser integradas, nos encantará revisar tus sugerencias!


Licencia: MIT License (2026 openlat.dev)