// manual de marca — v1.0
El sistema visual y verbal de Kode Lab. Dos protagonistas —Slate y verde terminal—, dos familias tipográficas y un lenguaje de terminal. Nada de humo.
// 01 · Esencia
La mejor función es, a veces, la que no se construye.
Código limpio y diseño cuidado que envejece bien.
Plazos reales, precios claros, decisiones explicadas.
El píxel y el milisegundo importan. Todo está en el remate.
// 02 · Logo
El logotipo kode·LAB para firmar, y el monograma k para espacios pequeños (favicon, avatar, app).
Principal
Invertido
Mono / oscuro
Mono / claro
// construcción
contenedor · radio 22%
tipografía · Sora 800
glifo · ~64% del lado
mín · 24px icono / 90px logotipo
// 03 · Color
El Slate manda y el verde terminal es la chispa: úsalo poco (~10% de la superficie), siempre para señalar acción o foco.
Slate
#0F1419
Principal · fondos, tinta
Terminal Green
#35D07F
Señal · acento, foco (~10%)
Paper
#F4F3EF
Neutro cálido · descanso
Carbon
#232B33
Superficie oscura
Ash
#8A8F8B
Texto secundario
Mint
#D6F7E4
Tinte verde suave
Green Text
#0A5C38
Verde legible sobre claro
// 04 · Tipografía
AaBbCcGg
0123456789
300 · 400 · 600 · 800
AaBbCcGg
0123 { } </>
400 · 500 · 700
// 05 · Elementos gráficos
Recursos que repiten la idea de “terminal”: el cursor, los comentarios //, la rejilla de puntos y el mosaico redondeado.
Cursor · la firma
Comentario · etiqueta
Rejilla de puntos
Mosaico redondeado
// 06 · Voz y tono
// decimos
// no decimos
// antes
“En Kode Lab ofrecemos soluciones digitales innovadoras y a medida que impulsan el crecimiento de su negocio.”
// después
“Diseñamos y programamos tu web o app. Rápida, cuidada y hecha para vender. Sin humo.”
// 07 · Accesibilidad
La regla de oro: el verde brillante es acento, nunca texto sobre blanco. Para verde sobre claro, usa #0A5C38.
16.9
AAA
Blanco sobre Slate
16.9
AAA
Slate sobre Paper
9.3
AAA
Verde sobre Slate
8.0
AAA
Green Text sobre blanco
2.0
FALLA
Verde brillante como texto
El cuerpo nunca baja de 16px; etiquetas mono nunca de 12px.
Anillo verde de 2px en todo elemento interactivo con teclado.
Botones y enlaces con zona de toque mínima de 44×44px.
Los estados llevan icono o texto además del color.