Charte byteTuto
Concept : ▶_ — el botón de reproducción de un vídeo que se convierte en el prompt de una terminal.
Firma : « Aprende tecnología, un byte a la vez ».
El nombre se escribe siempre byteTuto (nunca Bytetuto, ByteTuto, BYTETUTO en el texto corriente).
Colores (tokens)
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | fondo de página |
| surface-raised | #FFFFFF | #171B22 | tarjetas, bloques de código |
| ink | #0E1116 | #F2F1EC | texto principal |
| ink-muted | #565B66 | #A3A8B3 | texto secundario |
| line | #DDDBD2 | #2A2F38 | líneas, puntos de la trama |
| byte | #B8F03C | #B8F03C | verde firma: mosaico, botón principal, rellenos |
| byte-ink | #3B6B00 | #B8F03C | el verde cuando es TEXTO |
| byte-tint | #E9F9C8 | #24300F | fondo ligero, insignia |
| on-byte | #0E1116 | #0E1116 | texto colocado sobre byte o spark |
| spark | #FF5A1F | #FF6B33 | acento raro: UN solo elemento por pantalla |
| tile | #0E1116 | #1E232C | rellenos oscuros, bandas |
| danger | #C4320A | #FF7A5C | solo errores |
Reglas:
- Nunca
byte(#B8F03C) como texto sobre fondo claro → usarbyte-ink. - Nunca texto blanco sobre
byteospark→on-byte. - Sin degradados ni sombras en el logo. Los brillos « neón » son un envoltorio de animación, no el logo.
- Contraste texto/fondo ≥ 4,5:1.
Tipografía (Google Fonts)
- Space Grotesk 700 (títulos, interletrado estrecho −0,02em a −0,03em)
- IBM Plex Sans 400/600 (texto)
- JetBrains Mono 500 (código, comandos, etiquetas pequeñas estilo terminal)
Formas
Radios: 6px (insignias), 12px (botones, tarjetas), 24px (bloques grandes, mosaico del logo = 23 % del lado).
Motivo propio: trama de puntos en line sobre fondo oscuro, bloques byte/spark que sobresalen de los bordes.
Logo
El logotipo es un DIBUJO (trazos monoline de 9 unidades, extremos redondeados), no una fuente: nunca volver a escribirlo como texto.
Los trazados están en site/index.html (SVG .logo). Sobre fondo oscuro: « byte » en #F2F1EC, « Tuto » en #B8F03C.
Símbolo solo: site/favicon.svg.
Tono
Tuteo, frases cortas, verbos de acción. Se muestra antes de explicar. Sin jerga sin explicar, sin promesas exageradas. Ejemplos: « Instala Node en 2 minutos », « El bug que me costó 4 horas ».
Accesibilidad
Respetar prefers-reduced-motion para cualquier animación nueva. Foco visible (outline byte).