hey404
404 · not found
hey, esto no existe… todavía.
manual visual · sistema de identidad hey404.com
contenidos
13 secciones · las visuales están resueltas; las conceptuales son base para completar
01hey
02¿por qué existimos?
03el futuro en el que creemos
04manifiesto de marca
05personalidad
06voz y tono
07adn visual
08uso del logo
09sistema de color
10tipografía
11elementos
12content system
13social media
14the community
lavanda = sección visual resuelta
01 · hello
hello

hey404 es un canal de YouTube y cursos donde se aprende a crear con tecnología — haciendo, rápido y con humor.

why “hey”

Un saludo que baja la barrera. Vuelve cercano un “mirá lo que podés hacer” que suena intimidante.

why “404”

Un 404 es “no encontrado”. Lo leemos como lo que todavía no existe — y se puede hacer.

the big idea
hey, esto no existe… todavía.
02 · misión
por qué existimos
el problema y nuestra respuesta
el problema

El muro no es la capacidad: es la intimidación y el aburrimiento de cómo se enseña la tecnología.

Y hay un público que ni sabe que hoy podría hacerlo — el más numeroso y el menos atendido.

nuestra respuesta

Que cualquiera con una idea pueda hacerla realidad, sin que lo técnico ni el aburrimiento lo frenen.

Revelamos, no explicamos: mostramos que era posible.

03 · visión
el futuro en el que creemos
la transformación que provocamos — el primer escalón es el más grande
01
“ni se me había ocurrido”
02
“esto no es para mí”
03
“hey, yo puedo hacer esto”

La tecnología ya está al alcance de cualquiera; las herramientas cambian todo el tiempo. El cambio que queremos crear: pasar del “no es para mí” al “yo puedo”.

04 · manifiesto
No estamos para hacer la tecnología más complicada.
Estamos para que crear con ella se sienta posible.
Porque toda gran idea arranca con curiosidad.
Y toda conversación arranca con un simple… hey.
la IA es una herramienta más, no la razón de ser
05 · personalidad
personalidad
bufón + mentor — el amigo que sabe de tecnología y te lo hace fácil y divertido
amigo, no profesor
irreverente
maker
sin vueltas
desmitificador
arriba de lo nuevo
somos

Cercano y directo · Divertido, con filo · Concreto: mostramos el resultado

no somos

Académico, solemne · Condescendiente con el que aprende · Corporativo, con jerga

06 · voz y tono
voz y tono
así hablamos
De igual a igual, sin cátedra
Humor y memes; nos reímos de nosotros
Al grano, ritmo alto
En español
así no hablamos
Como una clase o un paper
Con jerga para parecer más listos
Nunca nos reímos del que aprende
Como una terminal / consola de dev
07 · adn visual
adn visual
de qué está hecho el sistema visual
logotipo · isologo
color · base + neón
AaAa
tipografía · display + mono
elementos · UI / sistema
mockups · ventanas
todo elemento coloreado va contenido por el contorno negro
08 · uso del logo
las tres lecturas
construcción · versiones · área de resguardo · tamaño mínimo · usos correctos e incorrectos
la invitación
el saludo — baja la barrera
lo desconocido
el 404 — lo que todavía no está
el descubrimiento
el cursor — hacerlo vos
08 · uso del logo
construcción
Las teclas se apoyan en una grilla modular. No se recomponen ni se cambian de orden.
Cada tecla conserva su color y su contorno negro. No se aplana a un solo color.
La rotación de cada tecla es parte del dibujo. No se endereza.
08 · uso del logo
área de resguardo

Se debe mantener un espacio libre de gráficos, texto u otros elementos visuales alrededor del logo.

= la altura de la letra h

la medida escala con el logo:
si el logo crece, el resguardo crece.

08 · uso del logo
tamaño mínimo
100% — 250 × 250 px
mínimo — 150 × 150 px
tamaño permitido

Cualquier tamaño entre 250 × 250 px y 150 × 150 px según el formato. Por debajo de 150 px las teclas pierden el contorno y no se usa.

09 · sistema de color
color
base cálida · un solo neón de acento
crema
#FCEFE3
base
tinta
#14121A
texto · borde · sombra
lima
#7EE84C
acento · máx 10%
rosa
#FF5FA2
acento
lavanda
#B49BFF
acento
amarillo
#FFD84D
acento
El lima nunca en texto
Base crema, no menta
Todo color contenido por el contorno
Un solo acento por pieza
10 · tipografía
tipografía
display para titulares · monoespaciada como acento · una tipografía de texto para párrafos
Aa
League Spartan
titulares · caja baja
Aa
Anonymous Pro
mensajes de sistema · UI
Aa
Open Sauce
párrafos · descripciones
H1 — 48–64 pxH2 — 32–40 pxH3 — 24–28 pxBody — 18–25 px Small — 14 pxCaption — 12 pxUI — 12–16 px
BOLD: frases de alto impacto y mensajes clave
REGULAR: texto general
10 · tipografía
el resaltado
el único énfasis del sistema
no hay subrayado ni cursiva
personas al frente
bloque en el acento de la pieza
contorno tinta de 3 px
radio 6 px, igual que todo
padding lateral ≈ 0,15 em
texto siempre en tinta
sin sombra: es texto, no card
una o dos palabras
La que carga el sentido de la frase. El resto queda en tinta plana.
un solo resaltado
Y un solo color por pieza. Dos acentos en un titular se pelean.
no
texto en lima
Sobre claro no contrasta. El lima existe como bloque, nunca como letra.
no
toda la frase resaltada
Si todo pesa, nada pesa. El resaltado deja de leerse como énfasis.
sobre tinta también funciona
el bloque mantiene su contorno tinta
y el texto de adentro sigue en tinta
11 · elementos
elementos gráficos
ventanas de sistema, cursores, caras, flores, teclas y signos — borde negro grueso y sombra dura sin blur
ventana de sistema — vector de marca, con los tres puntos incluidos
Máximo dos elementos por pieza.
Uno pisando la esquina del marco, otro dentro de la foto. Nunca sobre la tipografía.
excepciones multicolor: el logo y la ventana de sistema
12 · content system
tipos de publicación
cinco formatos — cada uno hace un trabajo distinto
experimento
“hice X y esto pasó”
revela
challenge
el proceso con los errores
desmitifica
tutorial express
hook → mini-proyecto
puente al curso
historia
contexto y cultura
construye marca
noticias con filo
actualidad con opinión
da frecuencia
por completar plantillas por tipo: miniatura de YouTube · portada · avatar · story
hey404
lorem ipsum dolor sit amet
hey404
lorem ipsum dolor sit amet
hey404
consectetur elit
hey404
sed do eiusmod tempor
captura de la herramienta
hey404
ut labore et dolore magna
hey404
quis nostrud tempor
hey404
sed ut perspiciatis unde
hey404
duis aute irure dolor
hey404
excepteur sint non
13 · social media
personas al frente

Nadie le compra cursos a una máquina. Dos de cada tres posts llevan una persona real como protagonista.

Nunca dos posts de sistema seguidos. La cara siempre cerca.
El acento rota y no se repite en celdas vecinas.
El titular va arriba, nunca en una franja al pie.
13 · social media
los tres tipos de pieza
1080 × 1350 · edge to edge
el tipo no se estampa en la pieza
hey404
lorem ipsum dolor sit amet
A · persona al frente — mayoría
hey404
sed do eiusmod tempor
captura de la herramienta
C · tutorial en ventana de sistema
hey404
sed ut perspiciatis unde
D · sistema puro — minoría
14 · the community
La mejor parte de hey404 no está en estas páginas: está en cada tutorial, cada herramienta y cada persona que decide hacer algo nuevo.
nos vemos en YouTube
hey404
hey404.com