Ollincan — Brand Color Palette

Neutros — Blanco a Negro

White #FFFFFF rgb(255, 255, 255)

Off White #FDFDFD rgb(253, 253, 253)

Light Gray #F8F8F8 rgb(248, 248, 248)

Border Light #E8E8E8 rgb(232, 232, 232)

Muted Text #6B6B6B rgb(107, 107, 107)

Secondary Text #3D3D3D rgb(61, 61, 61)

Primary Text #0A0A0A rgb(10, 10, 10)

Near Black #050505 rgb(5, 5, 5)

Black #000000 rgb(0, 0, 0)

Verde Jade — Escala Completa

900

700

600

500

400 ★

300

200

100

50

900

Jade 900 #1A3A30 rgb(26, 58, 48)

700

Jade 700 #2D6150 rgb(45, 97, 80)

600

Jade 600 #3D8068 rgb(61, 128, 104)

500

Jade 500 #4A8C76 rgb(74, 140, 118)

★ BRAND

Jade 400 — Brand #5DBD8C rgb(93, 189, 140)

Jade 300 #7AB8A0 rgb(122, 184, 160)

Jade 200 #9AD9BC rgb(154, 217, 188)

Jade 100 #C5EAD8 rgb(197, 234, 216)

Jade 50 #E8F6EF rgb(232, 246, 239)

Guía de Uso — ¿Dónde va cada color?

Nombre	Uso	HEX
Black	Fondo principal — Homepage, animación Árbol-Ollin, tema oscuro	#000000
Near Black	Fondo de app — Finance Lab, superficies oscuras	#050505
Primary Text	Texto principal en temas claros — CV, documentos	#0A0A0A
Off White	Fondo CV, documentos, superficies de lectura	#FDFDFD
White	Tarjetas de contenido CV, tags, botones claros	#FFFFFF
Jade 900	Líneas decorativas — Animación Árbol-Ollin (trazo fino)	#1A3A30
Jade 700	Títulos de sección CV, fechas, acentos oscuros	#2D6150
Jade 600	Hover states, badges activos — Finance Lab	#3D8068
Jade 500	Líneas acento — Animación Árbol-Ollin, roles CV	#4A8C76
Jade 400 — Brand	Color principal de marca — Botones, tabs activos, montos, enlaces, iconos, progreso, categorías (Finance Lab) · Texto acento (Homepage)	#5DBD8C
Jade 300	Acentos ligeros — Subtítulos, iconografía secundaria	#7AB8A0
Jade 200	Dots de timeline, badges claros, indicadores	#9AD9BC
Jade 100	Hover de links (borde underline)	#C5EAD8
Jade 50	Fondo de sidebar CV, tags, superficies con tinte jade	#E8F6EF

Design Tokens — CSS Custom Properties

Token	HEX	Contexto
--bg	#000000	Homepage (animación)
--bg	#FDFDFD	CV (documento)
--bg	#050505	Finance Lab (app)
--text	#0A0A0A	Texto principal (temas claros)
--text-secondary	#3D3D3D	Texto secundario
--text-muted	#6B6B6B	Texto atenuado
--jade-900	#1A3A30	Trazo fino animación
--jade-700	#2D6150	Títulos sección CV, fechas
--jade-600	#3D8068	Hover, badges activos
--jade-500	#4A8C76	Línea acento animación
--jade (brand)	#5DBD8C	★ Color principal de marca
--jade-300	#7AB8A0	Acentos ligeros
--jade-200	#9AD9BC	Dots timeline, indicadores
--jade-100	#C5EAD8	Borde hover links
--jade-50	#E8F6EF	Sidebar CV, tags

Colores Complementarios — Paleta Extendida

Estos colores contrastan elegantemente con el Jade Brand (#5DBD8C) y expanden el lenguaje visual de Ollincan más allá de la monocromía verde. Úsalos con moderación para acentos, alertas, gráficos y elementos que requieran jerarquía visual sin romper la identidad.

acento

Ámbar Dorado #D4A853 rgb(212, 168, 83)

Ámbar 700 #C4943D rgb(196, 148, 61)

Crema Cálido #F5ECD7 rgb(245, 236, 215)

acento

Lavanda #9B8EC4 rgb(155, 142, 196)

Lavanda 700 #7B6FAA rgb(123, 111, 170)

Lavanda Claro #E8E4F2 rgb(232, 228, 242)

alerta

Coral Suave #D4786E rgb(212, 120, 110)

Coral 700 #B85C52 rgb(184, 92, 82)

Coral Claro #F5DDD9 rgb(245, 221, 217)

profundo

Azul Pizarra #556B8A rgb(85, 107, 138)

Pizarra 800 #3B4F6B rgb(59, 79, 107)

Pizarra Claro #DDE4EF rgb(221, 228, 239)

Familia	Color	Uso recomendado	HEX
Ámbar	Crema	Fondos cálidos, secciones destacadas, tarjetas secundarias	#F5ECD7
	Dorado ★	Destacados premium, badges, iconos de advertencia positiva, gráficos	#D4A853
	Ámbar oscuro	Hover states, texto sobre fondos crema, bordes activos	#C4943D
Lavanda	Lavanda claro	Fondos de secciones alternativas, badges secundarios	#E8E4F2
	Lavanda ★	Acentos alternativos, gráficos (contraste con jade), categorías	#9B8EC4
	Lavanda oscuro	Texto acento, hover intenso, botones secundarios	#7B6FAA
Coral	Coral claro	Fondos de alerta suave, notificaciones	#F5DDD9
	Coral ★	Alertas, errores, eliminaciones, advertencias — usa con moderación	#D4786E
	Coral oscuro	Texto de error, botones destructivos hover	#B85C52
Pizarra	Pizarra claro	Fondos de código, secciones técnicas, data tables	#DDE4EF
	Pizarra ★	Texto técnico, íconos de sistema, gráficos de datos, enlaces secundarios	#556B8A
	Pizarra oscuro	Headings alternativos, código oscuro, hover profundo	#3B4F6B