propuesta · septiembre 2026

identidad paracasa de la grana

construimos una identidad para el museo ecológico de la grana cochinilla nocheztlicalli, pensada para convivir con la tradición y resolver lo de todos los días: señalética, piezas editoriales, redes y materiales de visita.

cliente

museo nocheztlicalli

etapas

lectura, patrón, respuesta

entrega

diez meses

ver el caso

agendar llamada

casa de la grana

IDA 2025 · plata

la paleta: la oficial de sopadeletras.art/branding, en los tres volúmenes

oficina usa negro y blanco y el azul solo para lo que se toca. las placas de color entran desde editorial. sobre azul el texto va en blanco; sobre las placas claras, en negro.

guardada: la paleta de corea, del folleto de Nodeul

qué cambia de un volumen a otro

una propuesta

propuestas, cotizaciones y contratos. el precio, cuando lo hay, va en la tabla de tiempos y solo en documentos privados.

una herramienta interna

buscar referencias⌘K

tema oscuro

casa de la grana

casadelagrana.mx

DíA* amarillo

udem.edu.mx

cerveza jimena

cervezajimena.com

dash, finanzas, ref y lo que construyamos para trabajar. es el volumen de ref.sopadeletras.art: etiquetas en light, conteos al lado y tema oscuro.

una lámina para un corporativo

decks para corporativos y proveedores. la misma lámina de 16:9 de los decks de avances, sin placas: marca abajo a la derecha, etiquetas arriba.

<link rel="stylesheet" href="https://sopadeletras.art/sistema/sopa.css">
<html data-volumen="oficina">  <!-- oficina | editorial | juego -->

prompt para empezar un proyecto con Claude

una sesión nueva no conoce el sistema ni las reglas de la casa. pega esto al inicio.

vamos a construir algo con el sistema visual de sopadeletras®.
guía: https://sopadeletras.art/corea/estilo

1. enlaza el css del sistema y elige el volumen:
   <link rel="stylesheet" href="https://sopadeletras.art/sistema/sopa.css">
   <html data-volumen="oficina">   (oficina | editorial | juego)
   oficina = serio y sobrio (propuestas, contratos, herramientas internas, corporativos)
   editorial = el sitio y los casos · juego = redes, recreo, campañas
2. usa sus clases antes de escribir css propio: s-display, s-titulo, s-escalera,
   s-entrada, s-texto, s-etiqueta, s-fila, s-datos, s-lista, s-accion, s-boton,
   s-chip, s-tabla, s-tarjeta, s-campo, s-aviso. tema oscuro: data-tema="oscuro".
3. reglas: helvetica neue light y bold (nunca helvetica pixelated). lo secundario
   va en light, no en gris. paleta oficial de /branding: #1d1d1f, #f0f0f0,
   #1961ae, #e03e52, #f7ea48, #ff9e1b, #71b790, #b4b5df.
   en oficina el espacio separa las cosas, no las líneas.
   minúsculas cuando habla sopadeletras®. nunca raya larga (—), guion normal.
   sin precios en nada público. sin iconos de librería: las flechas son texto
   (→ en el sitio, ↗ afuera, ↓ baja). sin sombras, blur ni degradados.
   el color de los clientes vive dentro de su foto o su placa, nunca pinta la página.
4. antes de entregar: revisa en 375 px sin scroll horizontal, contraste AA y
   que nada suene a texto de ia (ver el playbook de clichés).

el texto nunca va de color. sobre una placa el texto es tinta; sobre una foto se vuelve palabra hueca, blanca con contorno. los grises sólo aparecen como filetes (#2C2C2C, #303030) y como texto secundario (#4D4D4D).

escala, en unidades de hoja

interlínea 1 en titulares, .99 cuando se apilan tres renglones, 1.37 a 1.56 en texto. tracking negativo en titulares grandes (−.02 a −.03em) y positivo en las fechas (+.05em). en el original el coreano va en una gótica (Apple SD Gothic Neo); en español todo es Helvetica.

las etiquetas llevan un segundo contorno a 1.45 hacia adentro y, salvo la rectangular, un hoyo arriba. el boleto tiene las esquinas cóncavas. el filete de sección mide .3 y la marca triangular abre cada platillo del menú.

en el cuadernillo cada página lleva el reverso de la que sigue. se hace clonando el contenido, volteándolo con scaleX(−1) y bajándolo a opacidad .1 con un desenfoque de .16 unidades y 35% de gris.

:root {
  --papel: #F3F3F1;
  --tinta: #161616;
  --mesa: #141012;
  --panel: #DFE4E9;
  --verde: #1F8F48;
  --amarillo: #F6CB1A;
  --azul: #1A7BC0;
  --rojo: #D8252B;
  --naranja: #EE7A24;
  --rosa: #E2689A;
  --lat: "HN", "KR", sans-serif;
  --kr: "KR", "HN", sans-serif;
}
.pag { aspect-ratio: 1 / 1.41421; container-type: inline-size; }
.e { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); }
.t { font-size: calc(var(--f) * 1cqw); line-height: var(--lh, 1); }