Kaizen
Mejorar con lo aprendido. Documentar decisiones, pruebas y errores útiles; explicar qué cambió y por qué.
Jorge Suárez / Marca personal
Jorge Suárez.
La marca, en un solo lugar.
Identidad, reglas y recursos para construir con coherencia, sin perder la curiosidad.
Este kit reúne la identidad, las reglas y los recursos de la marca personal. Es una versión en desarrollo: cada elemento indica si está aprobado, heredado o propuesto.
Versión en desarrollo. Los estados de cada recurso distinguen decisiones aprobadas, reglas heredadas y propuestas por validar.
Cómo leer los estados
Aprobado
Decisión explícita de Jorge.
Heredado
Documentado en una fuente anterior.
Propuesto
Recomendación por validar.
Pendiente
Falta una decisión o comprobación.
01 / Identidad
Base históricaEnergía de builder,
con humildad.
Construir, aprender y compartir el proceso. La experiencia en videojuegos convive con la IA, los negocios y la curiosidad. La credibilidad viene del trabajo que se puede mostrar y de las personas que lo hicieron posible.
Play
Explorar con intención. La energía lúdica abre posibilidades y da calidez, sin convertir toda experiencia en un juego.
La voz que los acompaña
- Comunidad antes que ego. Dar crédito a los equipos; usar “yo” para la experiencia personal y “nosotros” para lo compartido.
- Español primero. Los términos de industria entran cuando ayudan a comprender.
- Pruebas sobre adjetivos. Verificar cifras, cargos y créditos. Evitar promesas grandilocuentes.
Kaizen & Play y la esencia provienen del PDF v1. La formulación de voz concilia v1 y v3 y sigue propuesta. La generosidad se conserva como comportamiento, sin añadir un tercer valor canónico.
02 / Color
Negro. Naranja.
Un contrapunto beige.
La base oscura conserva el foco. El naranja firma la identidad; el beige aporta una superficie cálida y táctil. La dirección está aprobada. Los códigos nuevos de papel, kraft y tinta siguen propuestos.
Aplicación
Blanco o crema sobre oscuro. Tinta oscura sobre naranja. El beige acompaña piezas editoriales e ilustración; no convierte toda la interfaz en tema claro.
Antes de implementar
Comprobar contraste por combinación y estado. El gris #666666 de la guía operativa no se usará para texto esencial en el kit. Los colores de estado siguen pendientes de especificar.
Cómo se relaciona con las fuentes anteriores
El PDF v1 usa #0A0A0C, #16161A y ámbar #F5B51D. La guía operativa v3 documenta #0A0A0A, #161616 y #FFA500. Este kit conserva la base operativa y registra la diferencia; no declara una nueva jerarquía canónica aprobada.
03 / Tipografía
Guía operativa v3Titulares · 700–800
OutfitAa
Carácter geométrico, jerarquía clara.
Texto · 400–600
InterAa
Lectura cómoda, frases directas.
Escala propuesta para web
- Título principal
- 56 / 60 px · móvil 36 / 40
- Título de sección
- 40 / 46 px · móvil 28 / 34
- Cuerpo
- 18 / 28 px
- Interfaz
- 16 / 24 px
- Notas
- 14 / 20 px
Fuentes locales en este kit: Outfit 700 e Inter 400. Space Grotesk, Manrope y Space Mono figuraban como sustitutos provisionales en v1. La monoespaciada se reserva para datos técnicos. Licencia Outfit · Licencia Inter
04 / Moki y assets
Nombre y dirección aprobados
“Moki soy yo.”
El alter ego de Jorge explora, se equivoca y aprende. Lleva su curiosidad y lo que quiere dejar. Puede construir mundos de IA, negocios y videojuegos.
- Cartón naranja, casco crema, visor oscuro y motas de tinta.
- Parche MOKI sobre la oreja derecha del personaje.
- Botas negras y control genérico en el pecho.
- Curioso y cercano. Nunca experto infalible ni alumno torpe.
Acompaña al retrato; no sustituye automáticamente avatar o firma. Mantener el diseño y las proporciones de la referencia aprobada.
PNG · personaje
Moki con parche derecho
Fondo transparente. Referencia visual del personaje.
Descargar PNGPNG · lámina
Ubicación del parche
Lateral aprobado; poses de la lámina en exploración.
Descargar lámina
Los archivos permiten consultar la referencia visual. Su descarga no concede una licencia de explotación ni acredita exclusividad o registro marcario.
05 / Fotografía e ilustración
Dirección de luzLa persona, primero.
La expresión, después.
Jorge es el protagonista
La marca empieza con su rostro y su presencia. Este retrato conserva la fotografía original: gesto, lentes, piel, camisa y proporciones.
Moki representa su curiosidad y lo acompaña en ilustraciones y relatos. Tiene su propio espacio; no reemplaza al retrato personal.
La dirección de luz naranja que sigue es una guía para futuras piezas, no un efecto aplicado a esta fotografía. Uso en este kit de marca; otros usos de la imagen requieren autorización.
Contorno naranja para separar a Jorge del fondo negro. Luz de estudio coherente, piel natural y sombras de contacto. El beige complementa la paleta y los materiales de Moki.
Fotografía
- Preservar rostro, lentes, piel y proporciones reales.
- Moki cabe en la mano; la mano no se agranda para acomodarlo.
- Conservar los elementos reales del retrato y respetar sus créditos y permisos de uso.
- El efecto se evalúa visualmente; no se afirma cuántas luces se usaron.
Ilustración
- Fibras, pliegues, recortes y sombras suaves de contacto.
- Una escena explica una idea y deja espacio para leer.
- Material artesanal solo en el personaje y su mundo.
- Evitar piel pictórica, halos digitales y decoración acumulada.
Para ampliar la selección editorial, confirmar los originales, los créditos fotográficos y las condiciones de cada imagen.
06 / Movimiento
Especificación por probarSe mueve cuando explica.
180–320ms
Entradas e interacciones breves.
600–900ms
Ensamblaje narrativo puntual.
Sin flotación permanente ni capas de glow. Con movimiento reducido, ofrecer una versión estática con el mismo contenido.
Este kit respeta la preferencia del sistema de movimiento reducido. No reproduce audio, animaciones continuas ni video automáticamente.
07 / Aplicaciones
Muestras por validarEl contenido marca el tono.
Web
Conservar estructura, textos y llamadas a la acción actuales. Probar los nuevos recursos en un bloque aislado antes de autorizar cambios.
Social y LCA
Un aprendizaje por pieza: problema, proceso, aprendizaje y siguiente paso. Evidencia, visual útil y revisión antes de publicar.
Audio
La voz de Jorge es la referencia: narración natural, pausas claras y subtítulos. Los recursos de audio se incorporarán cuando estén validados.
Estas muestras no son plantillas de producción aprobadas. Tampoco cambian el copy del sitio.
08 / Design system
En progresoDe reglas a componentes.
Cinco piezas para probar una interfaz coherente. Conservan Outfit, Inter y la paleta del kit. Son candidatos funcionales: su uso en productos necesita validación en contexto.
Cómo se concilia la referencia de Claude
El Design System de Claude reconstruyó el sitio sin acceso a su código fuente ni CSS. Sus tipografías y parte de sus colores son aproximaciones, no decisiones oficiales de marca. Aquí se retoma la organización de componentes y se adapta a la base de este kit.
El artifact declara 62 archivos. Esa cifra describe su inventario; no equivale a un paquete descargado, revisado y aprobado.
01 / Button
Una acción clara
Principal, secundaria y no disponible. Prueba el botón o recorre los controles con Tab para ver el foco real.
Demostración local. No guarda ni envía datos.
Foco visibleMuestra del contorno; los controles usan :focus-visible.
02 / Chip
Tema o selección
Una etiqueta informa. Un chip de selección es un botón: comunica su estado también al lector de pantalla.
Kaizen & Play
El botón alterna seleccionado / no seleccionado; la etiqueta estática no recibe foco.
03 / Card
Una idea por tarjeta
Construir y aprender
Un título, contexto breve y una sola acción. La tarjeta no oculta enlaces dentro de un área clicable.
Leer los valoresEl enlace tiene foco propio. Si no hay una acción disponible, se omite el enlace en lugar de simularlo.
04 / Timeline
Un proceso legible
- 01 · Explorar
Entender la pregunta
Reunir contexto antes de diseñar.
- 02 · Construir
Probar una idea
Hacer visible lo que se quiere aprender.
- 03 · Revisar
Compartir el resultado
Conservar el aprendizaje y decidir qué sigue.
Secuencia ilustrativa, sin fechas ni hitos personales. Lista ordenada nativa; no depende del color.
05 / Wordmark
Una firma tipográfica
JorgeSuarez.com.mxOutfit · texto seleccionable · enlace con foco visible
Muestra para interfaz, no un archivo maestro de logotipo aprobado. Mantener la firma legible; Moki acompaña y no sustituye la identificación.
Espaciado candidato
Escala de la referencia Claude para probar densidad y ritmo. Se aplica solo a estas muestras.
- sp-1 / sp-2 / sp-3 / sp-4
- 4 / 8 / 12 / 16 px
- sp-5 / sp-6 / sp-7 / sp-8
- 24 / 32 / 48 / 64 px
- sp-9 / sp-10
- 96 / 128 px
Radios candidatos
Bordes con intención: controles compactos, superficies y etiquetas.
- r-sm / r-md / r-lg
- 6 / 12 / 18 px
- r-xl / r-pill
- 24 / 999 px
Criterios de esta muestra: controles de al menos 44 px, texto visible para cada estado, foco por teclado y movimiento reducido. Quedan por validar combinaciones de producto, contraste en cada variante y uso real con tecnologías de asistencia. Los controles deshabilitados no disparan acciones.
09 / Fuentes, versiones y pendientes
Cierre 2.0 pendienteLo decidido tiene historia.
Las reglas evolucionan a partir de las fuentes documentadas y las decisiones de marca. La propuesta consolidada 0.2 está disponible para revisión; el cierre del sistema 2.0 sigue pendiente.
Documento de trabajo
Sistema de marca · propuesta 0.2
En progreso · revisión visual 2 · 11 octubre 2026. Diez páginas con Jorge como protagonista, identidad, Moki, reglas visuales, fuentes y componentes candidatos.
Integra la referencia Claude con sus límites. No es Brandbook 2.0 final ni convierte las propuestas en decisiones aprobadas.
- Design System de Claude Reconstrucción de referencia sin CSS original. Componentes y tokens candidatos; 62 archivos declarados, paquete sin auditar.
- Guía operativa v3 Tokens y tipografía operativa; commit f6b5ed5.
- Auditoría del rollout Registro del 22 de agosto de 2026.
- Sitio principal Referencia pública. Este kit no lo modifica.
Para cerrar el sistema
- Ordenar audiencia, oportunidad principal y niveles de expresividad por contexto.
- Consolidar fuentes, tokens semánticos, componentes y estados accesibles.
- Validar aplicaciones reales y registrar la aprobación del candidato 2.0.
- Incorporar nuevos recursos una vez validados sus usos y condiciones.
Qué contiene cada capa
- Brandbook
- Propósito, valores, personalidad y relato.
- Brand guidelines
- Reglas de uso, ejemplos y recursos.
- Design system
- Tokens, componentes, estados y comportamiento comprobado. Todavía incompleto.
- Método de trabajo
- Procedimiento para aplicar y verificar. Su homologación no transfiere esta identidad a otras empresas.
Registro de cambios · 11 octubre 2026
- Consolidación de valores históricos y base operativa con diferencias documentadas.
- Incorporación de Moki y parche lateral derecho aprobados.
- Registro de beige complementario y contorno naranja como dirección aprobada.
- Selección de recursos de referencia disponibles y aplicaciones por validar.
- Incorporación de la referencia Claude y cinco componentes de interfaz en progreso, sin cambiar tipografías ni declarar aprobado su paquete.
- Retrato original de Jorge como protagonista de la portada y referencia de fotografía; Moki conserva su espacio propio.
- Primera edición de este BrandKit de trabajo; no es la aprobación del sistema 2.0.
Contenido y recursos actualizados manualmente. Última revisión: 11 de octubre de 2026.