add branding files

README.md

@@ -1,3 +1,65 @@
 # 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 vectores SVG translúcidos (`logo.svg`, `favicon.svg`) y PNGs en alta resolución.
+- **`templates/`**: Plantilla personalizada limpia de la portada (`home.tmpl`).
+- **`LICENSE`**: Licencia MIT de código/recursos abiertos.
+
+---
+
+## 🎨 Paleta de Colores 
+
+### 1. Colores Principales (Primary & Secondary Accents)
+| Nombre | Token | Código HEX | Muestra | Uso / Descripción |
+| :--- | :--- | :---: | :---: | :--- |
+| **Primary Base** | `--color-primary` | `#4A69AE` | ![](https://img.shields.net/badge/-%20-4A69AE?style=flat-square) | Zafiro base. Sobriedad y confianza |
+| **Primary Dark** | `--color-primary-dark` | `#3B548C` | ![](https://img.shields.net/badge/-%20-3B548C?style=flat-square) | Estados hover/active en Tema Claro |
+| **Primary Light** | `--color-primary-light` | `#6B87C8` | ![](https://img.shields.net/badge/-%20-6B87C8?style=flat-square) | Estados hover/active en Tema Oscuro |
+| **Secondary Base** | `--color-secondary` | `#3E6B74` | ![](https://img.shields.net/badge/-%20-3E6B74?style=flat-square) | Slate Teal para insignias, pestañas y botones secundarios |
+| **Secondary Light** | `--color-secondary-light` | `#568792` | ![](https://img.shields.net/badge/-%20-568792?style=flat-square) | Destacado de bordes e indicadores activos |
+
+### 2. Tema Oscuro (Ink Obsidian Night)
+| Elemento | Código HEX | Muestra | Descripción |
+| :--- | :---: | :---: | :--- |
+| **Body Canvas** | `#0E1217` | ![](https://img.shields.net/badge/-%20-0E1217?style=flat-square) | Fondo base ultra oscuro (Ink Obsidian) |
+| **Header / Navbar** | `#12171E` | ![](https://img.shields.net/badge/-%20-12171E?style=flat-square) | Barra de navegación superior |
+| **Card Header** | `#1E2530` | ![](https://img.shields.net/badge/-%20-1E2530?style=flat-square) | Cabecera elevada de cajas y contenedores |
+| **Card Body** | `#161B23` | ![](https://img.shields.net/badge/-%20-161B23?style=flat-square) | Cuerpo del contenedor |
+| **Text Primary** | `#F1F5F9` | ![](https://img.shields.net/badge/-%20-F1F5F9?style=flat-square) | Tipografía Slate-100 de alto contraste |
+| **Text Muted** | `#94A3B8` | ![](https://img.shields.net/badge/-%20-94A3B8?style=flat-square) | Texto secundario y etiquetas Slate-400 |
+| **Border Subtle** | `#2E3646` | ![](https://img.shields.net/badge/-%20-2E3646?style=flat-square) | Divisores y bordes sutiles |
+
+### 3. Tema Claro (Material Ice & Snow)
+| Elemento | Código HEX | Muestra | Descripción |
+| :--- | :---: | :---: | :--- |
+| **Body Canvas** | `#F8FAFC` | ![](https://img.shields.net/badge/-%20-F8FAFC?style=flat-square) | Fondo claro suave Slate-50 |
+| **Header / Navbar** | `#0E1217` | ![](https://img.shields.net/badge/-%20-0E1217?style=flat-square) | Navbar oscuro contrastante |
+| **Card Header** | `#F1F5F9` | ![](https://img.shields.net/badge/-%20-F1F5F9?style=flat-square) | Cabecera de contenedor Slate-100 |
+| **Card Body** | `#FFFFFF` | ![](https://img.shields.net/badge/-%20-FFFFFF?style=flat-square) | Contenedor blanco puro |
+| **Text Primary** | `#0F172A` | ![](https://img.shields.net/badge/-%20-0F172A?style=flat-square) | Tipografía Slate-900 |
+| **Text Muted** | `#475569` | ![](https://img.shields.net/badge/-%20-475569?style=flat-square) | Texto secundario Slate-600 |
+| **Border Subtle** | `#E2E8F0` | ![](https://img.shields.net/badge/-%20-E2E8F0?style=flat-square) | Bordes y divisores Slate-200 |
+
+### 4. Colores Funcionales y de Estado
+| Estado | Código HEX | Muestra | Nombre |
+| :--- | :---: | :---: | :--- |
+| **Success** | `#10B981` | ![](https://img.shields.net/badge/-%20-10B981?style=flat-square) | Emerald Green |
+| **Warning** | `#F59E0B` | ![](https://img.shields.net/badge/-%20-F59E0B?style=flat-square) | Amber Yellow |
+| **Danger** | `#EF4444` | ![](https://img.shields.net/badge/-%20-EF4444?style=flat-square) | Crimson Red |
+| **Info** | `#3B82F6` | ![](https://img.shields.net/badge/-%20-3B82F6?style=flat-square) | 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)

color-palete.txt

@@ -0,0 +1,52 @@
+==============================================================================
+                    OPENLATDEVS BRAND COLOR PALETTE (MD3)
+==============================================================================
+
+Project: Openlatdevs Code Hosting Platform (git.openlat.dev)
+Design System: Material Design 3 (M3)
+
+------------------------------------------------------------------------------
+1. PRIMARY ACCENT (Openlat Sapphire / Professional Indigo)
+------------------------------------------------------------------------------
+  - Primary Base (#4A69AE): Sobriety, trust, enterprise-grade engineering
+  - Primary Dark  (#3B548C): Hover & active states in Light mode
+  - Primary Light (#6B87C8): Hover & active states in Dark mode
+  - Primary Contrast (#FFFFFF in Light / #0E1217 in Dark)
+
+------------------------------------------------------------------------------
+2. SECONDARY ACCENT (Muted Slate Teal)
+------------------------------------------------------------------------------
+  - Secondary Base (#3E6B74): Badges, tabs, secondary action buttons
+  - Secondary Light (#568792): Border highlights & active indicators
+
+------------------------------------------------------------------------------
+3. INK DARK MODE (Obsidian Night Surface)
+------------------------------------------------------------------------------
+  - Body Canvas     (#0E1217): Ultra-deep Ink Obsidian background
+  - Header / Navbar (#12171E): Dark navbar with subtle border
+  - Card / Box Header (#1E2530): Elevated surface for box headers
+  - Card / Box Body   (#161B23): Deep surface for content boxes
+  - Text Primary    (#F1F5F9): High-contrast crisp Slate-100 text
+  - Text Muted      (#94A3B8): Slate-400 secondary typography
+  - Border Subtle   (#2E3646): Fine slate border dividers
+
+------------------------------------------------------------------------------
+4. MATERIAL LIGHT MODE (Clean Snow & Ice)
+------------------------------------------------------------------------------
+  - Body Canvas     (#F8FAFC): Soft Slate-50 background
+  - Header / Navbar (#0E1217): Elegant contrasted Ink navbar
+  - Card / Box Header (#F1F5F9): Slate-100 box headers
+  - Card / Box Body   (#FFFFFF): Pure White crisp card containers
+  - Text Primary    (#0F172A): Deep Slate-900 typography
+  - Text Muted      (#475569): Slate-600 secondary typography
+  - Border Subtle   (#E2E8F0): Slate-200 dividers
+
+------------------------------------------------------------------------------
+5. FUNCTIONAL STATUS COLORS
+------------------------------------------------------------------------------
+  - Success Green:  #10B981 (Emerald)
+  - Warning Yellow: #F59E0B (Amber)
+  - Danger Red:     #EF4444 (Crimson)
+  - Info Blue:      #3B82F6 (Azure)
+
+==============================================================================

templates/home.tmpl

@@ -0,0 +1,66 @@
+{{template "base/head" .}}
+<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
+	<div class="tw-mb-8 tw-px-8" style="padding-top: 2.5rem; padding-bottom: 2rem;">
+		<div class="center">
+			<img class="home-hero-logo" width="480" height="480" src="{{AssetUrlPrefix}}/img/logo.svg" alt="openlat.dev">
+			<div class="hero">
+				<h1 class="ui header title" style="font-size: 3.4rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.5px; border: none; padding: 0;">
+					openlat.dev
+				</h1>
+				<h2 style="font-size: 1.4rem; font-weight: 400; max-width: 800px; margin: 0 auto; color: var(--color-text-light); line-height: 1.55;">
+					Plataforma comunitaria de alojamiento de código de alto rendimiento, libre y orientada a Latinoamérica.
+				</h2>
+
+				{{if not .IsSigned}}
+				<div style="margin-top: 2.2rem; display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap;">
+					<a class="ui primary button large" href="{{AppSubUrl}}/user/sign_up" style="font-weight: 600; padding: 1rem 2rem; border-radius: 8px; font-size: 1.15rem;">
+						{{svg "octicon-person"}} Registrarse Gratis
+					</a>
+					<a class="ui secondary button large" href="{{AppSubUrl}}/explore/repos" style="font-weight: 600; padding: 1rem 2rem; border-radius: 8px; font-size: 1.15rem;">
+						{{svg "octicon-repo"}} Explorar Repositorios
+					</a>
+				</div>
+				{{end}}
+			</div>
+		</div>
+	</div>
+
+	<div class="ui stackable middle very relaxed page grid" style="margin-top: 2.5rem; margin-bottom: 3rem;">
+		<div class="eight wide center column">
+			<h2 class="ui header" style="color: var(--color-primary); font-size: 1.85rem; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
+				{{svg "octicon-globe" 32}} <span>Enfocado en Latinoamérica</span>
+			</h2>
+			<p class="large" style="font-size: 1.15rem; line-height: 1.65; color: var(--color-text);">
+				Servicio de Git comunitario, libre y gratuito creado especialmente para desarrolladores, proyectos de software libre, comunidades tecnológicas y startups de toda América Latina.
+			</p>
+		</div>
+		<div class="eight wide center column">
+			<h2 class="ui header" style="color: var(--color-primary); font-size: 1.85rem; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
+				{{svg "octicon-zap" 32}} <span>Alta Disponibilidad 24/7</span>
+			</h2>
+			<p class="large" style="font-size: 1.15rem; line-height: 1.65; color: var(--color-text);">
+				Infraestructura redundante optimizada en la nube con monitoreo constante, tiempo de actividad del 99.9% y velocidad ultra-rápida en la gestión de repositorios y flujos de trabajo.
+			</p>
+		</div>
+	</div>
+
+	<div class="ui stackable middle very relaxed page grid" style="margin-bottom: 5.5rem;">
+		<div class="eight wide center column">
+			<h2 class="ui header" style="color: var(--color-primary); font-size: 1.85rem; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
+				{{svg "octicon-shield-check" 32}} <span>Seguridad y Protección Elevada</span>
+			</h2>
+			<p class="large" style="font-size: 1.15rem; line-height: 1.65; color: var(--color-text);">
+				Sistemas de defensa activos contra ciberataques (CrowdSec / Fail2Ban), cifrado SSL/TLS de punta a punta, autenticación multifactor (2FA) y protección estricta de privacidad.
+			</p>
+		</div>
+		<div class="eight wide center column">
+			<h2 class="ui header" style="color: var(--color-primary); font-size: 1.85rem; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
+				{{svg "octicon-heart" 32}} <span>100% Sin Fines de Lucro</span>
+			</h2>
+			<p class="large" style="font-size: 1.15rem; line-height: 1.65; color: var(--color-text);">
+				Impulsado por y para la comunidad open source sobre tecnología Forgejo/Gitea. Alojamiento libre de publicidad, rastreadores o restricciones corporativas comerciales.
+			</p>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}