efraingaray.com · v1.0

El lenguaje visual de Efrain Garay

El mismo sistema con el que se dibujan los reels de redes y bajo nivel: paleta, tipografía, movimiento y componentes. Tokens en dos niveles — primitivos y semánticos — dark-first, listos para reutilizar en la web, los videos y cualquier pieza.

DARK-FIRST MOBILE-FIRST LIGHT + DARK CSS CUSTOM PROPERTIES MIT · REUTILIZABLE

Color

Dos niveles: primitivos (valor crudo) → semánticos (rol por tema).

Primitivos

Aa · primary

Teal — Primary

#3ECF8E

Acción principal, éxito, estado ESTABLISHED, dato base.

Aa · accent

Violet

#A98BFF

Capa Red / IP, acento secundario, gradiente de marca.

Aa · accent

Peri

#8B9DF0

Subtítulos, capa física/bits, puente del gradiente.

Aa · accent

Blue

#5AA9FF

Capa Enlace / Ethernet, datos en tránsito.

Aa · warning

Amber — Warning

#E8B446

Transporte / TCP, respuesta, estados en transición.

Aa · danger

Red — Danger

#FF5C6C

Error, cierre FIN, saturación, 503 / 429.

Aa · ground

Base

#0A0E16

Fondo. Casi-negro con sesgo frío hacia el teal.

Aa · surface

Surface

#101725

Tarjetas, paneles, superficies elevadas.

Aa · text

Ink

#E8EEF7

Texto primario sobre fondo oscuro.

Aa · muted

Mute

#6B7A90

Texto secundario, bordes, metadatos mono.

Semánticos → primitivo

Superficie

--bgbase #0A0E16

--surface#101725

--surface-sunken#0E1420

--bordermute 20%

Contenido

--text→ ink

--text-muted→ mute

--primary→ teal

--on-primary#06090F

Estado

--success→ teal

--warning→ amber

--danger→ red

--info→ blue

Tipografía

Inter para todo; JetBrains Mono para datos y etiquetas.

Display / 900Conexión TCP

Título / 900Resolución DNS

Heading / 800Encapsulación por capas

Body / 400El emisor baja el dato por sus siete capas y agrega una cabecera en cada una hasta convertirlo en bits.

Label / mono 700REDES · BAJO NIVEL

Data / mono 600seq=1 ack=1 · 192.0.2.10 · :443

Radio · Elevación · Movimiento

Curvas y tiempos derivados de la animación de los reels.

Radio

--r-xs6px

--r-sm9px

--r-md14px

--r-lg20px

Duracióninstant80ms
quick150ms
base250ms
slow400ms
drama700ms

Easing (spring)

std.4,0,.2,1

spatial.2,0,0,1

spring.34,1.56,.64,1

Componentes

Los primitivos con que se construye cada reel.

Packet Pill — cápsula con cabeceras acumuladas

DATOS TCPDATOS IPTCPDATOS ETHIPTCPDATOS

State Badge — máquina de estados

CLOSED SYN-SENT ESTABLISHED 503

Panel de capa / servicio

L3RedPAQUETE

IP · routing

Caption karaoke

ElresolverguardalaIPencaché.

Cadena PDU — footer

DATO → SEGMENTO → PAQUETE → TRAMA → BITSENCAPSULACIÓN ⇄ DESENCAPSULACIÓN

Tokens · copiar y usar

Pega esto y ya tienes toda la marca.

/* Efrain Garay — design tokens (primitivos + semánticos) */
:root{
  /* brand ramp */
  --teal:#3ECF8E; --violet:#A98BFF; --peri:#8B9DF0;
  --blue:#5AA9FF; --amber:#E8B446; --red:#FF5C6C;
  --ink:#E8EEF7; --mute:#6B7A90;
  /* roles (dark) */
  --bg:#0A0E16; --surface:#101725; --border:#6B7A9033;
  --text:var(--ink); --text-muted:var(--mute); --primary:var(--teal);
  /* type */
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",monospace;
  /* motion */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-base:250ms;
}