Manual de marca

Sistema visual

La identidad de Gustavo Vargas Rubiano. Negro industrial con amarillo limón: el acento marca el dato, el verde marca la acción, el violeta separa. Color plano, sin degradados.

Fundamento

El fondo es la marca

Arquitecturas que producen

Sobre este negro, un solo color luminoso basta para dirigir la vista. Ese es todo el sistema.

Acción+40%estado
Industrial, no corporativo
Bordes rectos, color plano, tipografía que no adorna. El sitio de alguien que construye sistemas, no de una agencia.
Un acento por pantalla
Tres colores vivos existen para tres trabajos distintos, no para usarse juntos.
El dato manda
Las cifras van en mono y en amarillo. Es lo primero que debe encontrar quien lee.

Color

Los contrastes están calculados con la fórmula de WCAG 2.1 contra el fondo #08090B, no estimados a ojo. El número decide si un color puede llevar texto.

Fondo

Negro industrial, no negro puro. El #000 absoluto vibra contra el texto claro y cansa la vista; este casi-negro tiene un punto de azul que asienta la imagen y hace que el amarillo se vea más limpio encima.

  • lienzo

    #08090B

    Fondo de toda la página. Es la base de la marca.

  • superficie

    #0F1114

    Tarjetas, sidebar y bloques que se separan del fondo

  • superficie-alta

    #16191E

    Lo que va encima de una tarjeta: campos, cabeceras

Bordes

Separan sin gritar. Nunca llevan texto: su contraste está por debajo de 2:1 a propósito, porque un borde que compite con el contenido es ruido.

  • borde

    #232830

    Separador por defecto

    1.3:1 · decorativo, sin texto

  • borde-fuerte

    #333A45

    Borde al pasar el cursor, o cuando algo debe destacar

    1.7:1 · decorativo, sin texto

Acento · amarillo limón

El color de la marca. Métricas, cifras, enlaces y énfasis. Nunca en botones: si el mismo color acentúa y además invita a pulsar, deja de significar cualquiera de las dos cosas.

  • Aa

    acento

    #DEFF4F

    Cifras, enlaces, énfasis, cargo en el sidebar

    17.6:1 · AAA

  • acento-tenue

    #1E2410

    Fondo de chips y del elemento activo en el menú

Acción · verde

Solo lo que se pulsa. Reservarlo hace que se sepa dónde hacer clic sin leer. En cuanto aparezca en algo que no es un botón, pierde ese poder.

  • Aa

    accion

    #94FF4F

    Fondo de botones principales

    15.8:1 · AAA

  • Aa

    accion-fuerte

    #7AE63A

    El mismo botón al pasar el cursor

  • accion-tenue

    #14200F

    Fondo de estados favorables en el panel

Secundario · violeta

Contrapeso frío frente a tanto amarillo y verde. Ojo con el tono base: da 2.8:1 sobre el fondo, así que sirve de fondo o de borde, pero NUNCA lleva texto encima ni se usa como texto. Para eso está la versión clara.

  • violeta

    #6100FF

    Fondos y bordes de estado. Nunca como texto

    2.8:1 · decorativo, sin texto

  • Aa

    violeta-claro

    #9D5CFF

    La versión que sí se puede leer sobre el fondo oscuro

    5.1:1 · AA

  • violeta-tenue

    #150330

    Fondo de estados en curso

Texto

Tres niveles de jerarquía. Si todo el texto pesa igual, no hay jerarquía y el ojo no sabe por dónde entrar.

  • Aa

    tinta

    #EEF0F3

    Títulos y texto principal

    17.4:1 · AAA

  • Aa

    tinta-suave

    #A6ADB8

    Párrafos y descripciones

    8.8:1 · AAA

  • Aa

    tinta-tenue

    #6B7280

    Metadatos y fechas. No usar en párrafos largos

    4.1:1 · solo UI y texto grande

Tipografía

Tres familias con un trabajo cada una. Instaladas por npm, no se descargan de Google al compilar.

Montserrat

Títulos · 600 · 700

Arquitecturas que producen

Geométrica y con presencia. Sostiene un titular grande sin desarmarse. Solo en h1, h2 y h3 — en párrafo cansa.

Inter

Cuerpo · variable 100–900

Sincroniza catálogo, precios, stock, clientes y pedidos entre SAP Business One y cuatro canales de venta, para dos marcas con contabilidad separada.

Dibujada para pantalla. Aguanta párrafos largos sin fatigar, que es exactamente lo que hace un reclutador leyendo un caso. Al ser variable, un solo archivo cubre todos los pesos.

Space Mono

Datos · 400 · 700

+40% · 4.100 SKU · 125 workflows · 2026-08-03

Métricas, fechas, etiquetas y stack. Carga el peso técnico del perfil sin tener que decirlo con palabras.

Escala

  • despliegue

    clamp(2.5rem, 6vw, 5rem)

    Titular de portada

  • título

    clamp(1.75rem, 3.5vw, 2.75rem)

    Encabezado de sección

  • h3

    1.25rem

    Subsección

  • cuerpo

    1rem

    Párrafo

  • apoyo

    0.875rem

    Texto secundario

  • etiqueta

    0.6875rem

    Versalitas mono

Escala y forma

Radio

4px

chips pequeños

8px

tarjetas y botones

12px

bloques grandes

∞

chips de stack

Elevación

Sin sombras. La profundidad se hace subiendo el tono del fondo.

lienzola página
superficietarjeta
superficie-altasobre la tarjeta

Componentes

Botones

PrincipalSecundarioenlace →

Uno principal por pantalla. El texto siempre en negro.

Chips de stack

Next.jsSAP B1n8n
SupabaseTypeScript

Borde en el sitio público; fondo tenue en el sidebar.

Métrica

+40%

en facturación

Mapache

Cifra en mono y amarillo, contexto debajo. Sin contexto, un porcentaje no dice nada.

Estados del panel

nuevapreparandopostuladaoferta

Neutro → violeta → amarillo → verde. El color avanza con el proceso.

Voz

Cómo se escribe aquí: en el sitio, en el CV, en las cartas y en LinkedIn.

  • Concreto antes que ambicioso

    «4 canales, 4.100 SKU, sincronizados cada hora»

    «Soluciones innovadoras de última generación»

  • El resultado antes que la herramienta

    «Cero sobreventa. +40% en facturación»

    «Implementé n8n con Supabase»

  • Decir las brechas

    «No he trabajado con Kubernetes; lo más cercano es Docker en producción»

    Omitir lo que falta y que salga en la entrevista

  • Sin relleno

    «Lidero la arquitectura»

    «Me apasiona liderar equipos multidisciplinarios de alto rendimiento»

Reglas

  • Texto negro sobre el amarillo y el verde

    Texto blanco sobre el amarillo y el verde

    Blanco sobre #DEFF4F da 1.1:1. Es prácticamente invisible.

  • Verde solo en botones

    Verde en cifras, iconos o bordes decorativos

    Si el verde aparece donde no se puede pulsar, deja de señalar la acción.

  • Violeta como fondo o borde

    Violeta #6100FF como color de texto

    Da 2.8:1 sobre el fondo. Para texto va #9D5CFF.

  • Color plano

    Degradados, sombras de color, resplandores

    La marca es industrial. El degradado la vuelve genérica.

  • Un acento por pantalla

    Amarillo, verde y violeta compitiendo en el mismo bloque

    Tres acentos a la vez es ninguno.

La regla que más se rompe

Sobre amarillo y verde el texto va negro. Míralo tú mismo:

Negro · 17.6:1Blanco · 1.1:1

Tokens

La fuente de verdad está en src/app/globals.css. Cambiar un color ahí lo cambia en el sitio, el CV y el panel a la vez.

globals.css
/* Marca — Gustavo Vargas Rubiano */
--color-lienzo:          #08090b;  /* fondo de la página */
--color-superficie:      #0f1114;  /* tarjetas y sidebar */
--color-superficie-alta: #16191e;  /* elevado sobre tarjeta */

--color-borde:           #232830;
--color-borde-fuerte:    #333a45;

--color-tinta:           #eef0f3;  /* 17.4:1  AAA */
--color-tinta-suave:     #a6adb8;  /*  8.8:1  AAA */
--color-tinta-tenue:     #6b7280;  /*  4.1:1  solo UI */

--color-acento:          #deff4f;  /* 17.6:1  AAA  · datos y énfasis */
--color-acento-tenue:    #1e2410;

--color-accion:          #94ff4f;  /* 15.8:1  AAA  · solo botones */
--color-accion-fuerte:   #7ae63a;
--color-accion-tenue:    #14200f;

--color-violeta:         #6100ff;  /*  2.8:1  sin texto encima */
--color-violeta-claro:   #9d5cff;  /*  5.1:1  AA */
--color-violeta-tenue:   #150330;

--color-sobre-acento:    #08090b;  /* texto sobre amarillo o verde */

--font-sans:    "Inter Variable", ui-sans-serif, system-ui, sans-serif;
--font-display: "Montserrat", var(--font-sans);
--font-mono:    "Space Mono", ui-monospace, monospace;

Si cambias un color, recalcula su contraste contra #08090B antes de usarlo en texto. Un color bonito que no se lee es un color que no sirve.