Openlatdevs/git-branding
Watch
1
0
Fork
You've already forked git-branding
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add colors

Browse source
This commit is contained in:
Jesús David Chapman Vélez 2026-07-29 01:58:20 -05:00
commit c955a2880e
22 changed files with 88 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

50
README.md
View file

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

3
icons/colors/0E1217.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#0E1217" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/0F172A.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#0F172A" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/10B981.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#10B981" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/12171E.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#12171E" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/161B23.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#161B23" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/1E2530.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#1E2530" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/2E3646.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#2E3646" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/3B548C.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#3B548C" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/3B82F6.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#3B82F6" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/3E6B74.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#3E6B74" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/475569.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#475569" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/4A69AE.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#4A69AE" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/568792.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#568792" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/6B87C8.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#6B87C8" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/94A3B8.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#94A3B8" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/E2E8F0.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#E2E8F0" stroke="#64748B" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 179 B

3
icons/colors/EF4444.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#EF4444" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/F1F5F9.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#F1F5F9" stroke="#64748B" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 179 B

3
icons/colors/F59E0B.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#F59E0B" stroke="rgba(0,0,0,0.2)" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

3
icons/colors/F8FAFC.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#F8FAFC" stroke="#64748B" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 179 B

3
icons/colors/FFFFFF.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="20" viewBox="0 0 48 20">
<rect width="48" height="20" rx="4" fill="#FFFFFF" stroke="#64748B" stroke-width="1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 179 B