{
	"$esquema": "https://noko.mx/brandid.json",
	"version": 1,
	"nombre": "NoKo Devs",
	"pagina": "https://noko.mx/brandid",
	"reglaDeOro": "La brasa manda en papel y en noche. El cian solo existe en el cuarto de máquinas: fuera de ahí, no se usa.",
	"zonas": [
		{
			"id": "noche",
			"donde": "Arriba y abajo: portada, prueba muda, cierre, pie.",
			"fondo": "#080a10"
		},
		{
			"id": "papel",
			"donde": "El cuerpo de la página.",
			"fondo": "#fbfaf6"
		},
		{
			"id": "maquinas",
			"donde": "El bloque de ingeniería y el 24/7: oscuro y monoespaciado. La única zona donde el cian tiene permiso.",
			"fondo": "#0f131d"
		}
	],
	"paleta": [
		{
			"token": "--noche",
			"valor": "#080a10",
			"grupo": "La noche",
			"rol": "Portada, cierre, pie, y la placa de la marca."
		},
		{
			"token": "--noche-2",
			"valor": "#0f131d",
			"grupo": "La noche",
			"rol": "El cuarto de máquinas."
		},
		{
			"token": "--noche-3",
			"valor": "#171d2b",
			"grupo": "La noche",
			"rol": "El botón sobrio sobre noche."
		},
		{
			"token": "--papel",
			"valor": "#fbfaf6",
			"grupo": "El papel",
			"rol": "El cuerpo. Cálido, no blanco de oficina."
		},
		{
			"token": "--papel-2",
			"valor": "#f2f1ea",
			"grupo": "El papel",
			"rol": "Fondos hundidos, como el de esta sección."
		},
		{
			"token": "--papel-3",
			"valor": "#e7e5db",
			"grupo": "El papel",
			"rol": "Superficies levantadas."
		},
		{
			"token": "--tinta",
			"valor": "#0a0d14",
			"grupo": "La tinta y el hueso",
			"rol": "Todo el texto sobre papel."
		},
		{
			"token": "--tinta-suave",
			"valor": "#5b6675",
			"grupo": "La tinta y el hueso",
			"rol": "Párrafos y notas."
		},
		{
			"token": "--hueso",
			"valor": "#eceadf",
			"grupo": "La tinta y el hueso",
			"rol": "El texto sobre noche."
		},
		{
			"token": "--hueso-suave",
			"valor": "#9aa3b2",
			"grupo": "La tinta y el hueso",
			"rol": "Párrafos sobre noche."
		},
		{
			"token": "--brasa",
			"valor": "#ff6a1f",
			"grupo": "La voz del taller",
			"rol": "Botón principal, realces, la marca."
		},
		{
			"token": "--brasa-viva",
			"valor": "#ff8845",
			"grupo": "La voz del taller",
			"rol": "El foco y el hover."
		},
		{
			"token": "--maquina",
			"valor": "#22d3ee",
			"grupo": "La voz del taller",
			"rol": "El cian. Solo cuarto de máquinas."
		},
		{
			"token": "--alarma",
			"valor": "#b42318",
			"grupo": "La voz del taller",
			"rol": "Lo que salió mal. Se abre sobre fondo oscuro."
		},
		{
			"token": "--linea",
			"valor": "#e4e2d7",
			"grupo": "Las líneas",
			"rol": "Reglas finas sobre papel."
		},
		{
			"token": "--linea-noche",
			"valor": "rgba(148 163 184 / 16%)",
			"grupo": "Las líneas",
			"rol": "Reglas finas sobre noche."
		}
	],
	"contraste": [
		{
			"par": "Tinta sobre papel",
			"razon": "18.61:1",
			"juicio": "AAA",
			"fondo": "--papel",
			"tinta": "--tinta"
		},
		{
			"par": "Tinta sobre brasa",
			"razon": "6.79:1",
			"juicio": "AA",
			"fondo": "--brasa",
			"tinta": "--tinta"
		},
		{
			"par": "Brasa sobre noche",
			"razon": "6.91:1",
			"juicio": "AA",
			"fondo": "--noche",
			"tinta": "--brasa"
		},
		{
			"par": "Cian sobre noche",
			"razon": "10.95:1",
			"juicio": "AAA",
			"fondo": "--noche",
			"tinta": "--maquina"
		},
		{
			"par": "Hueso sobre noche",
			"razon": "16.40:1",
			"juicio": "AAA",
			"fondo": "--noche",
			"tinta": "--hueso"
		},
		{
			"par": "Tinta suave sobre papel",
			"razon": "5.58:1",
			"juicio": "AA",
			"fondo": "--papel",
			"tinta": "--tinta-suave"
		},
		{
			"par": "Blanco sobre brasa",
			"razon": "2.86:1",
			"juicio": "NO PASA",
			"fondo": "--brasa",
			"tinta": "blanco puro (contraejemplo)"
		}
	],
	"tipografia": [
		{
			"token": "--font-display",
			"familia": "Titulares · 400–900",
			"para": "titulares y etiquetas"
		},
		{
			"token": "--font-sans",
			"familia": "Cuerpo · 400/500/600",
			"para": "todo lo que se lee corrido"
		},
		{
			"token": "--font-serif",
			"familia": "Cursiva · 400",
			"para": "el acento humano"
		},
		{
			"token": "--font-mono",
			"familia": "Monoespaciada · 400/600",
			"para": "máquinas, folios, tiempos"
		}
	],
	"escala": [
		{
			"clase": "Titular de portada",
			"tamano": "clamp(2.35rem, 7.2vw, 4.6rem)",
			"detalle": "peso 800 · tracking −0.04em"
		},
		{
			"clase": "Titular de sección",
			"tamano": "clamp(1.75rem, 4.4vw, 2.9rem)",
			"detalle": "peso 700"
		},
		{
			"clase": "Subtítulo",
			"tamano": "clamp(1.1rem, 2.2vw, 1.32rem)",
			"detalle": "peso 600 · interlínea 1.3"
		},
		{
			"clase": "Párrafo",
			"tamano": "clamp(1rem, 1.25vw, 1.1rem)",
			"detalle": "en tinta suave · máx. 62 caracteres"
		},
		{
			"clase": "Título de pantalla",
			"tamano": "clamp(1.5rem, 4vw, 2rem)",
			"detalle": "peso 800"
		},
		{
			"clase": "Nota",
			"tamano": "0.86rem",
			"detalle": "en tinta suave · máx. 64 caracteres"
		}
	],
	"geometria": [
		{
			"token": "--aire",
			"valor": "clamp(3.5rem, 8vw, 7rem)",
			"gobierna": "El respiro de una sección."
		},
		{
			"token": "--aire-corto",
			"valor": "clamp(2rem, 5vw, 3.5rem)",
			"gobierna": "El respiro de un bloque."
		},
		{
			"token": "--marco",
			"valor": "min(1140px, 100% - 2.5rem)",
			"gobierna": "El ancho del contenido."
		},
		{
			"token": "--marco-angosto",
			"valor": "min(760px, 100% - 2.5rem)",
			"gobierna": "Lectura larga y formularios."
		}
	],
	"adn": [
		{
			"regla": "Un solo archivo de tokens",
			"detalle": "y ninguna pantalla escribe un color. Cambiar la marca es cambiar ese archivo, no recorrer pantallas."
		},
		{
			"regla": "El contraste se mide",
			"detalle": "se escribe en la cabeza del archivo y decide. Si el primario es cálido y saturado, el contenido del botón va en tinta."
		},
		{
			"regla": "Las fuentes las servimos nosotros",
			"detalle": "partidas por rango de caracteres. Cero terceros en el camino crítico, y eso incluye iconos, visores y bibliotecas."
		},
		{
			"regla": "El estado base de una animación es su estado final visible",
			"detalle": "lo que esconde lo pone el guion. Comprobado en dos casas: sin guiones nada queda invisible, y con movimiento reducido nada se mueve y nada desaparece."
		},
		{
			"regla": "La cara pública cuelga de su propio nombre de clase",
			"detalle": "y no hereda ni fuga estilos hacia la aplicación. Si un guion dibuja, su estilo va sin ámbito."
		},
		{
			"regla": "La marca gráfica sale de la noche y la brasa",
			"detalle": "aunque el producto tenga otro color de trabajo. Es lo que hace que dos productos se reconozcan."
		},
		{
			"regla": "Un estado nunca es solo color",
			"detalle": "siempre lleva su palabra al lado."
		}
	],
	"receta": [
		"Nombra al que va a usarlo y en qué aparato. Un mostrador con un dedo, una oficina con un ratón ocho horas, un prospecto en un celular con mala señal.",
		"Escribe la tesis en una línea, antes de tocar un color. Si no cabe en una línea, todavía no está.",
		"Decide qué enseña la portada corriendo, y dibújalo. Si la respuesta es «un párrafo que lo explica», va a verse como una página de texto por más paleta que le pongas.",
		"Elige el primario y mide. Si el par no pasa, se cambia el par, no el criterio.",
		"Decide si hay modo noche, y escribe por qué. No es una casilla: es una decisión con argumento.",
		"Copia las piezas y el catálogo de textos. Se copia y se afila, no se reinventa.",
		"Escribe la dirección visual del proyecto con su tabla de contraste, y deriva la marca gráfica para el peor medio en que va a salir."
	],
	"trampas": [
		{
			"n": 1,
			"nunca": "Texto blanco sobre el naranja",
			"porque": "2.86:1. No pasa el mínimo, y de paso pierde el look."
		},
		{
			"n": 2,
			"nunca": "El cian fuera del cuarto de máquinas",
			"porque": "deja de significar «ingeniería» y se vuelve decoración."
		},
		{
			"n": 3,
			"nunca": "Un color escrito dentro de una pieza compartida",
			"porque": "ya costó: un campo tenía el blanco puesto a la fuerza, y en modo noche se volvía blanco con letra blanca al escribir. Un color literal es un color que el tema no puede voltear."
		},
		{
			"n": 4,
			"nunca": "Una fuente traída de un tercero",
			"porque": "el primer pintado con mala señal, y le cuenta a alguien más quién nos visita."
		},
		{
			"n": 5,
			"nunca": "Sombra dura o ruido",
			"porque": "la profundidad se hace con zona y color."
		},
		{
			"n": 6,
			"nunca": "Un botón dibujado fuera de las piezas",
			"porque": "a los seis meses hay nueve botones distintos y ninguno se cambia de un solo lugar. Hay prueba que lo caza."
		},
		{
			"n": 7,
			"nunca": "Un estado indicado solo por color",
			"porque": "la pastilla nunca va sin su palabra."
		},
		{
			"n": 8,
			"nunca": "Una rejilla con mínimo fijo de 320 px",
			"porque": "desborda justo a 320 px de ancho y arrastra la página entera. El mínimo va contra el 100%."
		},
		{
			"n": 9,
			"nunca": "Revelar un bloque devolviéndole su display por omisión",
			"porque": "pisa la rejilla que le puso su clase y las tarjetas se apilan en una columna. Costó dos veces."
		},
		{
			"n": 10,
			"nunca": "Esconder por omisión y revelar con un guion",
			"porque": "la página se queda en blanco si el guion no carga. Se esconde solo cuando el guion ya avisó que llegó."
		},
		{
			"n": 11,
			"nunca": "Una escena de scroll arriba del pliegue",
			"porque": "un elemento sin caja nunca dispara un observador: al cambiar de cara, la portada sale en blanco. Ahí va una animación de entrada, que es CSS."
		},
		{
			"n": 12,
			"nunca": "Un número de venta que no se pueda contar",
			"porque": "un número viejo es una mentira, y nadie revisa la portada de una propuesta buscando eso. Van declarados, y un guion los cuenta contra la realidad."
		},
		{
			"n": 13,
			"nunca": "Un selector que solo usa el guion",
			"porque": "el compilador lo declara sin usar y lo borra del CSS publicado, sin error y sin aviso. La peor forma de perder un estilo, y ya está pagada dos veces."
		},
		{
			"n": 14,
			"nunca": "Una textura con la opacidad elegida a ojo",
			"porque": "en la captura simplemente no existe. Una textura que no se ve cuesta lo mismo que una que sí y no hace nada."
		},
		{
			"n": 15,
			"nunca": "Medir 360 px con una captura de ventana angosta",
			"porque": "una captura recorta el desborde en vez de detectarlo. Se emula el aparato y se compara el ancho real contra el visible."
		},
		{
			"n": 16,
			"nunca": "Un token decorativo que pisa uno funcional",
			"porque": "si el adorno vive en el color primario, ya no se puede cambiar un botón sin mover el título en degradado."
		}
	],
	"voz": {
		"registros": [
			"cara pública",
			"documento comercial"
		],
		"formulas": [
			{
				"formula": "Segunda persona, del tú",
				"ejemplo": "tu operación",
				"nota": "Nunca «las empresas» ni «los clientes»."
			},
			{
				"formula": "El contraste de dos tiempos",
				"ejemplo": "Hoy tu operación se sostiene con voluntad; mañana, con un sistema",
				"nota": null
			},
			{
				"formula": "La prueba en lugar del adjetivo",
				"ejemplo": "Si algo se cae un domingo, alguien contesta",
				"nota": "No «somos confiables»."
			},
			{
				"formula": "La objeción se nombra primero",
				"ejemplo": "La mayoría te va a decir que hay que rehacerlo desde cero",
				"nota": "Nombrarla es lo que hace creíble la respuesta."
			},
			{
				"formula": "La discreción se presume",
				"ejemplo": "Ya conocemos tu operación. Y no la vamos a presumir",
				"nota": null
			},
			{
				"formula": "El anti-cierre",
				"ejemplo": "Primera llamada sin costo. Nadie te va a perseguir por correo después",
				"nota": null
			},
			{
				"formula": "Se le habla al que ya tiene un problema",
				"ejemplo": "Cuéntanos qué se te atora",
				"nota": "No al que busca un proveedor."
			}
		],
		"candados": [
			"Ni un precio publicado.",
			"Nada de la receta: ni herramientas, ni máquinas, ni un cliente.",
			"Las etiquetas de los campos de un formulario no se editan."
		]
	},
	"casas": [
		{
			"casa": "La casa",
			"tesis": "Un taller de ingeniería, no una agencia",
			"familias": "4",
			"noche": "tres zonas",
			"relieve": "sin sombra",
			"leccion": {
				"titulo": "El cian solo existe en el cuarto de máquinas",
				"texto": "Un color que significa una cosa en un solo lugar sigue significando algo. Repartido por la página, se vuelve decoración. Es la regla que sostiene toda la paleta."
			},
			"esLaCasa": true
		},
		{
			"casa": "Una plataforma escolar",
			"tesis": "Fresco y orgánico: escuela, no corporativo",
			"familias": "4",
			"noche": "zona + dos temas",
			"relieve": "con relieve",
			"leccion": {
				"titulo": "La portada enseña el producto corriendo",
				"texto": "Su chat y su terminal están vivos arriba del pliegue, no descritos en un párrafo. Y la portada cuelga de su propio nombre de clase para no heredar ni fugar estilos hacia la aplicación: es una página aparte que solo comparte el método."
			},
			"esLaCasa": false
		},
		{
			"casa": "Un producto de evaluación para RH",
			"tesis": "Preciso y con señal, no cálido y editorial",
			"familias": "3",
			"noche": "zonas alternadas",
			"relieve": "sin sombra",
			"leccion": {
				"titulo": "Copiar la paleta no copia el resultado",
				"texto": "Lo dejó escrito al heredar el método de la casa escolar, y es la frase más útil de todo esto: lo que hace que una portada se vea mejor que una página de texto no es la paleta. Aquí la pantalla del participante y el panel de resultados están dibujados a mano, no fotografiados."
			},
			"esLaCasa": false
		},
		{
			"casa": "Un anuncio de oficinas",
			"tesis": "La foto es la protagonista; el sitio es el marco",
			"familias": "2",
			"noche": "dos bandas, sin foto",
			"relieve": "sin sombra",
			"leccion": {
				"titulo": "El golpe en los dos estados",
				"texto": "Con foto y sin ella. Sin foto, la atmósfera se dibuja: nunca hay un hueco. Salió de una segunda pasada, porque la primera leyó «sobrio» como «callado». Y su semáforo lleva pares: el verde que se ve bien como punto es ilegible como letra, así que el color de la marca y el del texto son dos tokens distintos del mismo estado."
			},
			"esLaCasa": false
		},
		{
			"casa": "Una terminal de mostrador",
			"tesis": "Un aparato, no una página web",
			"familias": "1",
			"noche": "la casa entera",
			"relieve": "con relieve",
			"leccion": {
				"titulo": "Reposar es reposar",
				"texto": "Medido en la terminal de verdad: con la pantalla ya en negro por reposo, el equipo seguía repintando a 56 cuadros por segundo. Una franja que respira no para porque le pongan una capa negra encima. Y aquí el primario significa «lo que está vivo», no «la casa»: un color no puede significar dos cosas."
			},
			"esLaCasa": false
		},
		{
			"casa": "Una tienda de piezas de barro",
			"tesis": "El color pone la alegría, la composición la calma",
			"familias": "2",
			"noche": "ninguna, a propósito",
			"relieve": "sin sombra",
			"leccion": {
				"titulo": "No tener modo oscuro es una decisión",
				"texto": "El papel crema es la identidad de una tienda de barro, no una preferencia del sistema. Y dibuja lo que todavía no tiene foto: un plato en trazos, sembrado con el gráfico y no con la publicación, que desaparece solo en cuanto llega la foto. Un catálogo de cuadros grises con «sin foto» se ve roto, no se ve nuevo."
			},
			"esLaCasa": false
		}
	]
}