Guía de estilo
El sistema de 180 Grados CAM: color, tipografía, retícula, la firma, el signo, movimiento, componentes, redes y voz. Cada ejemplo de esta página corre sobre el CSS y el JavaScript vivos del sitio.
Color
Azul tinta y papel hacen casi todo. El verde tiene un solo trabajo: la firma en redes y lo que se enciende. Toca una muestra para copiarla; el valor se lee del CSS vivo, no se escribe a mano.
La base
El acento
En reserva
Estos siete están declarados en tokens.css y en la landing no aparece ninguno. Salen de las combinaciones de Sanzo Wada que dieron la paleta, y sirven para gráficas, estados y láminas de datos. Mientras no tengan un uso, no se reparten por las páginas.
De terceros
El botón de WhatsApp va en su verde oficial, como el logo de una tarjeta en una caja: es una pieza de otro, no de la marca. El glifo va en azul tinta porque en blanco da 1.98:1.
Tipografía
Una serif para lo que se dice y una grotesca para lo que se explica. Sentient casi siempre en 300: la jerarquía la hace el tamaño, no el peso. Las tres caras se sirven desde el propio sitio.
Sentient · 300 y 400 · Indian Type Foundry
Titulares, frases, la firma, el pie. No tiene 600: sus pesos reales son 200, 300, 400, 500 y 700.
Public Sans · variable 100 a 900
Texto corrido, botones, etiquetas, tablas. El cuerpo va en 400; el 300 sólo aguanta a partir de 20 px.
IBM Plex Mono · 400
Rótulos y valores. Siempre en mayúsculas y nunca por debajo de 13 px.
La escala, medida en el sitio
| Estilo | Muestra | 1440 px | 375 px | Aquí | Dónde |
|---|
Las columnas de 1440 y 375 se midieron en la landing publicada. La de «aquí» se mide ahora mismo, en tu pantalla, sobre el mismo CSS.
Reglas. Mayúscula inicial, nunca todo en minúsculas: esas son de sopadeletras®, este material es de ellas. Mayúsculas sostenidas sólo en rótulos. Los cortes de un titular se escriben, no se dejan al navegador. Nada de guiones largos.
Los decks
Las presentaciones tienen su propia escala sobre un lienzo de 1920 × 1080, porque se ven escaladas en una videollamada. El texto más chico mide 21 px compuestos: a 8 px en pantalla, que es como quedaba antes, Cristina no lo leía. Tres tallas de lectura, con ?lectura=media y ?lectura=grande.
Retícula
La unidad no se inventa: sale del interlineado del cuerpo. Todo lo demás es múltiplo de ella, para que el texto siga cayendo en su línea aunque cambie de campo. Pulsa Mayús + G en esta página para verla encima.
| Medida | Valor | De dónde sale | Qué hace |
|---|---|---|---|
| Unidad | --u · 18px | Media línea del cuerpo de los decks, 26/36 | Todo lo demás es múltiplo |
| Deck · alto | 1080 | 108 + 5 × 144 + 4 × 36 + 108 | Cinco filas de campo, cuatro canales |
| Deck · ancho | 1920 | 114 + 12 × 108 + 11 × 36 + 114 | Doce columnas |
| Sitio · caja | .w · 1180px | Máximo, con margen propio | Todas las secciones de la landing |
| Sitio · sección | 128 / 64 px | Aire arriba y abajo, escritorio y teléfono | Separa sin cajas |
| Redes · post | 1080 × 1350 | Margen de 88, firma siempre abajo a la izquierda | Ver 12 · Redes |
En los decks el tamaño de un titular tampoco se pone a mano: ajustarTitulares() mide el campo y baja de escalón hasta que cabe. La tecla G enseña la retícula en cualquier lámina.
Espacio
Apretado dentro de un renglón, generoso entre secciones. El aire hace el trabajo de las cajas: una sección se separa de otra con espacio y una regla de un pixel, no con un fondo.
Líneas y forma
Reglas de un pixel para ordenar; redondo sólo en lo que se toca. Las tarjetas tienen 14 px de radio y los botones son pastillas completas.
--rule · 1pxFilas, la cuenta, índices
--radius · 14pxTarjetas y marcos de imagen
999pxBotones y el botón de WhatsApp
punteada · 3pxSólo en redes: el recibo de «la cuenta»
La firma
El signo y el nombre, siempre juntos y siempre en este orden. El tamaño del signo se cuenta en unidades: la caja alta del nombre se parte en cinco. Hoy el signo mide 9.6, medido en la barra publicada. La propuesta es siete: una arriba y otra abajo, centrado por construcción.
Tamaños mínimos
Por debajo de 18 px de alto la firma horizontal pierde el nombre; ahí va el signo solo. El favicon usa el signo a 16 px.
Lo que no se hace
La firma se calibra en el banco de pruebas: guías, retícula de quintos, el líquido entre las letras y las tres separaciones. Dos decisiones siguen abiertas y están marcadas ahí: las siete unidades y el kerning de los nueve pares.
El signo
Tres aros que no comparten centro: se amontonan arriba y se abren abajo. Es una gota que acaba de caer. Y son tres, que es exactamente el concepto: toda conversación ocurre en tres niveles.
- 01Lo que se dice
El aro de afuera. Es lo primero que se ve y lo único que queda en la minuta.
- 02Lo que se hace
El de en medio. El cuerpo, el tono, quién cierra la carpeta antes de que acabe la junta.
- 03Lo que se siente
El de adentro, el más grueso. El motivo: por qué nadie dijo nada.
Esto es una propuesta de lectura, no algo que ya se haya dicho. El signo se dibujó con tres aros por la gota, y el concepto tiene tres planos por el coaching ontológico. Que coincidan es la mejor historia que tiene la marca y hoy no se cuenta en ningún lado.
La gota, en movimiento
lab/gota.js · bucle sin costura
El mismo motor abre la portada del sitio y el manifiesto. Los puntos de cada anillo se sortean una sola vez: re-sorteados en cada cuadro dejan de ser agua y parecen estática.
Movimiento
Tres curvas y nada más. Lo que entra, sale rápido y se asienta despacio. El desplazamiento se suaviza con Lenis y se devuelve al navegador en cuanto alguien pidió menos movimiento.
--circ-salEntradas, revelados, el aviso. La que más se usa.
--circLo que cruza de un estado a otro: el menú, el acordeón.
--circ-entSalidas: la cortina cuando se va.
Pasa el cursor o el foco por cada curva para correrla.
El agua
lab/agua.js · paleta marca · semilla 180
Manda el degradado largo y la onda apenas lo ondula. Al revés sale un protector de pantalla. Es una superficie, no una imagen: no va detrás de texto chico y no se usa desenfocada como fondo de un post.
| Duración | Para qué |
|---|---|
120 ms | Color y opacidad de botones |
220 ms | Estados de enlaces, el botón de WhatsApp que se abre |
0.8 a 1.2 s | Titulares que suben renglón por renglón, tarjetas que entran |
2.2 s tope | La cortina: se va cuando la página está lista y la gota terminó, lo que ocurra más tarde |
7 s | El bucle de la gota |
Con menos movimiento pedido: no hay cortina, no hay suavizado, los titulares aparecen enteros y el silencio de la landing deja de medir dos pantallas.
Botones y enlaces
Hay una sola acción en todo el sitio y siempre dice lo mismo: solicitar información. Lleva a WhatsApp directo, que es donde ellas contestan.
.cta · sobre papelPastilla azul tinta, Public Sans 600..cta.claro · sobre azulLa misma, invertida. Es la de la portada.| Pieza | Cómo | Por qué |
|---|---|---|
| WhatsApp flotante | Abajo a la derecha, 56 px, verde oficial, el texto sale al pasar | Es la acción de todo el sitio a un toque de distancia |
| Enlace en texto | Subrayado de 1 px, color heredado | El color ya está ocupado por el azul |
| «Ver todo el cuaderno →» | Flecha al final, se corre al pasar | → se queda en el sitio · ↗ sale del sitio |
| Desplegable | Una regla arriba, el signo + a la derecha | Cabe en una fila y no rompe la página |
Componentes
Instancias vivas: el mismo marcado y el mismo CSS que la landing. Lo que se ve aquí es lo que se publica.
La cuenta
El concepto chico a la izquierda, la factura grande a la derecha. En teléfono se apila. El mismo formato va a redes como recibo.
Los pasos
El levantamiento de inquietudes
Hablamos con tu equipo antes que contigo. Se levanta lo que cada quien no dice en la junta, en confianza y sin nombres hacia afuera.
Te llevas Un documento con lo que encontramos. De ahí sale la propuesta, y no antes.
La propuesta
Con el levantamiento en la mano te decimos qué hay que trabajar, con qué y en cuánto tiempo.
Te llevas Alcance, calendario y los criterios con los que vamos a saber si funcionó.
Número en Sentient, título en 400, lo que te llevas separado por su rótulo.
El desplegable
Con qué se trabaja, bloque por bloque
- Workshops de alineación
- Comunicación para la acción · liderazgo consciente · ciclo de coordinación de acciones · diseño estratégico de identidad.
Nativo, <details>: se abre con teclado y sin JavaScript.
Imagen
La regla que falta: si una imagen no enseña gente conversando, no entra. Un bosque no es una junta. Hasta que lleguen las fotos reales de las tres, el sistema es tipográfico.
Cuando lleguen las fotos: luz de día, sin fondo de estudio, las tres en una mesa real con gente real, manos y papeles en cuadro. Nunca sonriendo a cámara con los brazos cruzados.
Redes
Seis plantillas, tres reglas y una firma. Antes eran veintisiete composiciones sobre fotos de paisaje, y el perfil visto entero no se reconocía. Todo lo de abajo se pinta en vivo y se baja en PNG al tamaño exacto.
- La palabra manda.
Lo que vende 180 es lo que se dice. El titular se compone para leerse en la cuadrícula del perfil, donde cada pieza mide 120 px de ancho, no sólo abierto.
- Una sola firma.
Los aros entran enormes y cortados por la misma esquina, y la firma chica va siempre abajo a la izquierda. Es lo que hace que nueve piezas distintas se lean como una marca.
- Cero fotos de banco.
Hasta que lleguen las fotos reales, no hay fotografía. Y ningún texto que no esté aprobado: las piezas no inventan copy.
Las seis
Un carrusel · los tres niveles
Portada, un aro encendido por lámina y el cierre. El signo explica el concepto sin una sola imagen: es la pieza que mejor cuenta qué es 180.
Historias
Lo rayado es lo que tapa Instagram: la barra de arriba y la caja de responder. Nada importante vive ahí; la firma sube por encima.
El perfil, antes y ahora
Hoy
Nueve piezas del sistema actual. Siete son paisajes; dos de ellas repiten el mismo cuadro. Y dos dicen «llegó», un verbo que la marca ya había descartado.
Con el sistema nuevo
Azul y papel alternados, la firma siempre en el mismo sitio y los aros como borde reconocible. Se lee sin abrir ninguna.
La cuadrícula se ve en 3:4 desde 2025, así que un post de 4:5 pierde un poco por los lados en el perfil. Las plantillas dejan el margen suficiente para que no se corte nada.
Voz y tono
Directo, en plural, sin suavizantes. Hablan tres coaches con treinta años adentro de empresas: dicen lo necesario, no lo cómodo.
El concepto rector. Lo que decide todo no es si se dijo, sino cómo se entendió.
La línea. «Entenderse» se promete en infinitivo o en negativo, nunca en futuro: se promete el aprendizaje, no el milagro.
Una idea por frase. Nada de guiones largos. Sin groserías, aunque el tono sea cercano.
La guía completa para ellas, con el botón que la copia para pegarla en ChatGPT, está en cómo escribimos.
Accesibilidad
El contraste se calcula aquí, en vivo, pintando cada color en un pixel y leyéndolo. Con los valores del CSS tal cual: oklch() no se puede leer a ojo.
| Par | Contraste | WCAG | Dónde |
|---|
Ya resuelto
- Un solo
h1por página,<main>y saltar al contenido. - Todo se recorre con tabulador y el foco siempre se ve.
- Menos movimiento se respeta en toda la casa.
- Sin desbordes a 320, 375, 414 ni 768.
- Ninguna tipografía viene de fuera: nada bloquea el render.
Lo que falta
- El rótulo «Han confiado en nosotras» mide 9.9 px, en Plex Mono 300 al 78%. Es el texto más chico del sitio y está en la portada.
- El cuerpo va en Public Sans 300 a 16 y 17 px, y en los pasos del método además en gris. Se lee, pero se lee flojo.
- Los logos de clientes de la portada tienen cada uno su tratamiento: unos en caja blanca, otros calados. A esa distancia algunos no llegan a 3:1.
Capas y cortes
Una lista corta y fija de capas. Lo que entre nuevo tiene que caber entre dos que ya existen.
.salto · .cortinaSaltar al contenido y la gota que abre la página#wasapEl botón de WhatsApp, por debajo de la cortinanavLa barra, pegada arriba.menuEl menú de cuatro.tarjeta · .tarj-fotoTexto sobre imagen dentro de una tarjeta.apiladas canvasEl agua detrás de las tarjetasCortes
Hoy hay ocho cortes distintos en web.css: 359, 640, 700, 701, 720, 760, 860 y 900. Salieron uno por uno, arreglando cada sección por su lado. La propuesta es quedarse con tres anchos:
| Ancho | Nombre | Qué cambia |
|---|---|---|
< 760 | Teléfono | Todo en una columna, la cuenta se apila, el menú se abre con la hamburguesa |
≥ 760 | Tableta | Dos columnas en portada y equipo |
≥ 1100 | Escritorio | La caja llega a 1180 y los márgenes crecen |
Páginas
Lo que ya está publicado y a quién le sirve.
Tokens
Las variables detrás de todo lo de arriba, leídas del CSS vivo. Y una versión en JSON para herramientas de diseño.
Lo que mejoraría
Hacer esta guía obligó a mirar todo junto, y ahí se ven cosas que página por página no se veían. En orden de lo que más cambia.
Las redesen esta guía
Veintisiete composiciones sobre fotos de paisaje, texto chico abajo y un velo azul encima. El perfil no se reconocía y dos piezas usaban un verbo descartado.
Seis plantillas tipográficas con una firma fija. Están arriba, en vivo, y se bajan en PNG. Falta cambiarlas en /redes/ cuando las apruebes.
Una sola regla de imagen
Hoy conviven pinturas de Velasco, paisajes de banco, agua desenfocada y retratos generados. Ninguna enseña una conversación.
Quitar los paisajes del cuaderno y de las tarjetas de la landing, y dejar el sistema tipográfico hasta que lleguen las fotos de ellas. Pedirlas con la guía de la sección 11.
Las fotos reales quedaron de llegar el domingo 21 y no han llegado.
El cuerpo de texto
Public Sans 300 a 16 y 17 px, y en los pasos del método además en gris. Los titulares están bien: el que se queda corto es el texto de abajo, que es el que explica.
Subir el cuerpo a 400 y a 18 px. El 300 se queda para los párrafos grandes, donde sí aguanta. El gris sólo para metadatos.
Medido en la landing publicada, a 1440 y a 375.
Lo que falta para lanzar
El dominio, el formulario (hoy devuelve error porque no hay servicio de correo) y el aviso de privacidad. El sitio sigue en noindex a propósito hasta que eso exista.
«.cam» está en la lista de dominios sospechosos de SpamAssassin: para un negocio que vende por correo conviene uno .com o .mx.
Contar lo de los tres aros
El signo tiene tres aros y el concepto tiene tres niveles. Nadie lo ha dicho en voz alta.
Una línea en «Qué hacemos», la portada del carrusel de redes y una lámina en el deck. Es la historia más fuerte de la marca y cuesta cero.
Darle trabajo al verde
La paleta declara once colores. En la landing aparecen dos: azul y papel. El verde de la marca no sale ni una vez.
Darle un solo trabajo y no repartirlo: la firma en redes, el enlace que se está leyendo, el aro que se enciende. Los siete de reserva, sólo cuando haya datos que graficar.
Los rótulos en mono
«Han confiado en nosotras» a 9.9 px, «Te llevas» y «Se paga en» parecidos. En mayúsculas y espaciados, a ese tamaño se leen como textura, no como palabras.
Nada por debajo de 13 px. Donde no quepa a 13, que no lleve rótulo: ya se probó en la portada y se lee mejor sin él.
Cerrar la firma
Dos decisiones abiertas en el banco de pruebas: el signo a siete unidades y el kerning de los nueve pares, que arregla «Grados» y cierra «CAM».
Aprobarlas y llevarlas a web.css en un solo cambio. El ancho total se mueve menos del 1%, así que no se descuadra nada.
Las tarjetas del cuaderno y de los tres planos
Foto de bosque con degradado azul encima, o agua desenfocada. Es la tarjeta de plantilla que se ve en cualquier sitio.
Hacerlas tipográficas como los posts nuevos, y en las de los tres planos usar el aro que corresponde.
Ocho cortes en el CSS
359, 640, 700, 701, 720, 760, 860 y 900. Cada sección se arregló por su lado.
Quedarse con tres anchos. No se nota desde afuera, pero hoy cada ajuste nuevo inventa el suyo.
Los logos de clientes
Cada uno trae su tratamiento: caja blanca, calado, a color. Juntos se ven como un collage.
Todos en monocromo papel sobre azul, con el mismo alto óptico.