La casa
Un taller de ingeniería, no una agencia
- familias
- 4
- noche
- tres zonas
- relieve
- sin sombra
Carta de marca · Septiembre 2026
Esto no es un manual escrito para verse bonito: es lo que ya está en producción en seis casas, con sus valores medidos y sus trampas pagadas. Se publica porque la disciplina con la que se construye una interfaz es el producto.
La regla de oro del color
La brasa manda en papel y en noche.
El cian solo existe en el cuarto de máquinas.
Fuera de ahí, no se usa. Es lo que hace que el bloque de ingeniería se sienta otro lugar; repartido por la página, el cian deja de significar nada.
Se demuestra sola Esta página está construida con los tokens que documenta, y los lee del mismo archivo. Si algo se ve mal aquí, está mal en la marca.
01 · La composición
La cara pública no tiene un tema: tiene una composición de zonas. El papel y la noche conviven en la misma página, y eso es dirección de arte — es la mitad de lo que la hace verse cara. Voltearla con un interruptor no daría «la misma página en oscuro»: daría otra página, peor.
Las costuras entre zonas son un degradado corto, nunca una línea dura. Las que ves arriba y abajo de esta sección son las de verdad.
02 · La paleta
Los valores viven en un solo archivo, y ese archivo es el que gana. Ninguna pantalla escribe un color a mano: pide una pieza. Los hexes de abajo se leen de ahí en cada compilación, así que esta tabla no puede quedarse vieja.
La noche
El papel
La tinta y el hueso
La voz del taller
Las líneas
03 · El contraste
Los seis pares están calculados y escritos en la cabeza del archivo de tokens. Aquí se enseñan pintados de verdad: cada tarjeta usa los dos colores que declara.
Si alguien «arregla» el botón poniéndole texto blanco, rompe la accesibilidad — y de paso pierde el look, porque tinta sobre naranja es justo lo que hace que se vea de taller y no de plantilla. La tienda de barro llegó a la misma conclusión por su lado, con otra paleta: blanco sobre su coral da 2.92:1. No es casualidad, es la aritmética de un color cálido y saturado. Cualquier marca con un primario cálido va a caer ahí.
04 · Tipografía
Partidas por rango de caracteres para que el celular baje solo lo que usa. Cero llamadas a un tercero: con mala señal una fuente remota cuesta el primer pintado, y además le cuenta a alguien más quién nos visita.
Aguanta el día a día
Tu operación ya funciona; lo que la frena son los pasos que todavía se hacen a mano y los datos que viven en hojas de cálculo.
Una por pantalla como mucho
Si está en todos lados deja de ser acento.
operación 24/7 · 320px → 1440px · v1.0.0 · 2026-09-02
| Papel | Tamaño | Detalle |
|---|---|---|
| Titular de portada | clamp(2.35rem, 7.2vw, 4.6rem) | peso 800 · tracking −0.04em |
| Titular de sección | clamp(1.75rem, 4.4vw, 2.9rem) | peso 700 |
| Subtítulo | clamp(1.1rem, 2.2vw, 1.32rem) | peso 600 · interlínea 1.3 |
| Párrafo | clamp(1rem, 1.25vw, 1.1rem) | en tinta suave · máx. 62 caracteres |
| Título de pantalla | clamp(1.5rem, 4vw, 2rem) | peso 800 |
| Nota | 0.86rem | en tinta suave · máx. 64 caracteres |
05 · Geometría y ritmo
Sin sombra dura y sin ruido. La profundidad se consigue con zona y color, no con capas de sombra. Y todo borde es de un pixel.
| Token | Valor | Gobierna |
|---|---|---|
| --aire | clamp(3.5rem, 8vw, 7rem) | El respiro de una sección. |
| --aire-corto | clamp(2rem, 5vw, 3.5rem) | El respiro de un bloque. |
| --marco | min(1140px, 100% - 2.5rem) | El ancho del contenido. |
| --marco-angosto | min(760px, 100% - 2.5rem) | Lectura larga y formularios. |
El descuento lateral del marco es lo que deja aire a 360 px, y por eso no se toca. Se diseña a 360 px y se crece, con blanco de toque de 44 px en lo que de verdad se pica, y nada que dependa de pasar el puntero encima.
06 · El cuarto de máquinas
Esta zona es la única donde el cian tiene permiso. Y es donde va lo que se aprendió a golpes: cada renglón está aquí porque ya costó en una de las seis casas, y ocho tienen una prueba que los caza antes de que salgan a producción.
07 · La voz
Los ejemplos de abajo son los textos que están en producción ahora mismo, no muestras escritas para esta página.
Siete fórmulas que ya funcionan
Ni un precio publicado, jamás. Sí la mecánica del cobro.
Nada de la receta: ni las herramientas, ni las máquinas, ni un cliente. Aquí no hay logotipos porque quien nos contrata no aparece.
Ni una etiqueta de campo editable: un formulario cuyas etiquetas se renombran es un formulario que nadie puede sostener después.
120 caracteres para la línea maestra, 90 para un titular, 40 para un botón. Un título de tres renglones descuadra la composición, así que la brevedad es un candado, no un gusto. Y si alguien borra un texto, sale el de fábrica: un encabezado vacío es una página rota.
08 · Las casas
Seis casas, seis paletas, ninguna compartida. Y aun así se reconocen como hermanas, porque se copiaron unas a otras el método y no el color. Aparecen por su oficio: quien nos contrata no aparece.
Cada flecha es una copia declarada, no un parecido.
Tres pruebas de que la cadena es real: el token del ancho de contenido es literalmente el mismo en la casa de RH y en la nuestra; nuestra entrada escalonada desciende de la suya, con la misma curva y casi la misma duración; y las cinco capas de atmósfera del anuncio de oficinas llevan su procedencia anotada capa por capa.
La casa
Un taller de ingeniería, no una agencia
Una plataforma escolar
Fresco y orgánico: escuela, no corporativo
Un producto de evaluación para RH
Preciso y con señal, no cálido y editorial
Un anuncio de oficinas
La foto es la protagonista; el sitio es el marco
Una terminal de mostrador
Un aparato, no una página web
Una tienda de piezas de barro
El color pone la alegría, la composición la calma
Tres cosas que ninguna casa dice sola: las familias tipográficas bajan cuando sube la exigencia de peso de página —el anuncio de oficinas pagó dos, porque una tercera costaba noventa kilobytes del primer pintado con mala señal—; el relieve solo se prende cuando hay que parecer un aparato; y todas tienen noche menos la que vende barro.
La casa
El cian solo existe en el cuarto de máquinas
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.
Una plataforma escolar
La portada enseña el producto corriendo
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.
Un producto de evaluación para RH
Copiar la paleta no copia el resultado
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.
Un anuncio de oficinas
El golpe en los dos estados
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.
Una terminal de mostrador
Reposar es reposar
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.
Una tienda de piezas de barro
No tener modo oscuro es una decisión
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.
09 · La receta
Estas siete cosas se conservan siempre. Son lo que hace que seis casas con seis paletas distintas se reconozcan como hermanas.
Copiar la paleta no copia el resultado.
Lo que hace que una portada se vea mejor que una página de texto no es la paleta: es que enseña el producto corriendo. Y ninguna de las seis metió una biblioteca de animación para conseguirlo.
Para máquinas Todo lo de esta página, en un solo archivo y de la misma fuente. Si vas a construir algo con esta marca, léelo de ahí y no del HTML: /brandid.json