Cómo está construida esta marca.

01

La marca

Un destello de cuatro puntas con los lados cóncavos. No es un símbolo nuevo: la web anterior ya lo usaba como separador entre secciones, y aquí se asciende a marca. Lo que era un adorno pasa a ser lo único que hay que recordar.

Construcción

Se dibuja dentro de un cuadrado de 100 × 100. Las cuatro puntas tocan el centro de cada lado y las curvas se tiran hacia el centro con controles a 27 unidades, lo que da el perfil cóncavo. Es simétrico en los dos ejes: gira sin deformarse, que es justo lo que hace en la web.

Área de respeto y tamaño mínimo

• Área de respeto: la mitad del ancho de la marca por cada lado. Con una marca de 40 px, 20 px libres alrededor.
• Mínimo en pantalla: 16 px. Por debajo, las puntas desaparecen.
• Mínimo impreso: 6 mm.

El lockup

Marca + «Nice & Visual» en Clash Display Semibold, separados por el 60 % del ancho de la marca. En contextos donde hace falta la persona, se añade «Francisco Sánchez» en Satoshi Medium tras una línea vertical fina, a un tercio del tamaño.

Usos y prohibiciones

• No recolorear: solo rojo de marca, hueso o negro tinta.
• No añadirle sombras, contornos, degradados ni relieve.
• No meterlo en cajas ni orlas que no estén en este manual.
• No rehacer el lockup a mano: usar siempre el archivo.

02

Color

Un solo acento y dos neutros. La marca no necesita más: cuando todo puede ser de color, nada destaca. El azul aparece únicamente difuminado en los fondos, nunca en texto ni en elementos de interfaz.

Impresión

• El negro tinta en impresión va como negro rico C60 M50 Y40 K100, no como K100 a secas: en superficies grandes el negro plano se ve gris y desigual.
• El hueso no se imprime: se consigue eligiendo un papel cálido. Si el soporte es blanco puro, ese 4 % de tinta se aplica en plano.
• Pantone. El punto de partida para el rojo es Pantone 172 C, que es lo más cercano de la gama. Hay que confirmarlo sobre guía física antes de mandar nada a imprenta: ninguna equivalencia calculada desde un HEX es fiable en papel.

Proporción y contraste

• Reparto aproximado: 70 % neutro, 25 % de contraste, 5 % de rojo. El rojo marca, no decora.
• Texto principal siempre hueso sobre tinta o tinta sobre hueso. Ambas combinaciones superan el contraste AAA de la WCAG.
• El rojo nunca se usa para texto largo. Solo en titulares, en la marca y en detalles pequeños.

03

Tipografía

Dos familias variables, las dos de Indian Type Foundry y con licencia libre para uso comercial. Se sirven desde el propio dominio, no desde un CDN: son 70 KB en total y así ni dependen de terceros ni generan tratamiento de datos.

Reglas

• Clash Display no se usa por debajo de 20 px. A tamaño pequeño pierde y no se lee.
• Las etiquetas de sección van en Satoshi 700, 12 px, mayúsculas y letter-spacing: 0.18em. Sin ese espaciado, las mayúsculas se apelmazan.
• Nada de cursivas: ninguna de las dos familias las trae, y falsearlas se nota.
• Si en algún soporte no hay licencia para estas fuentes, la sustitución es Archivo para titulares e Inter para texto.

04

Escala y ritmo

Los tamaños son fluidos: se calculan con clamp() entre un mínimo de móvil y un máximo de escritorio, sin saltos bruscos en los tamaños intermedios.

Rejilla y márgenes

• Ancho máximo del contenido: 1360 px, centrado.
• Margen lateral: de 20 px en móvil a 72 px en escritorio (clamp(1.25rem, 4vw, 4.5rem)).
• Aire entre secciones: de 80 px a 176 px (clamp(5rem, 10vw, 11rem)). Es el que marca el pulso de la página.
• Radios: 999 px en botones y etiquetas, 14–18 px en tarjetas y paneles, 10 px en imágenes.

05

Componentes

Las piezas que se repiten. Cada una tiene una única forma correcta; si hace falta una variante nueva, se añade aquí antes de usarla.

06

Movimiento

El movimiento es parte de la identidad, no un adorno que se añade al final. Todo sale de dos curvas y tres duraciones.

Reglas

• Solo se animan transform y opacity. Lo demás cuesta fotogramas.
• Nada rebota. La marca no es simpática, es precisa.
• Todo se apaga con prefers-reduced-motion. Quien tenga activado «reducir movimiento» ve la web quieta y completa, no rota.

07

Redes sociales

Piezas producidas y medidas de referencia. Todas se generan desde plantillas HTML y se exportan a doble resolución, así que rehacerlas cuando una plataforma cambie de medidas cuesta minutos, no una tarde.

LinkedIn

Instagram

La cuenta @nice_and_visual está inactiva desde 2023. Estas medidas quedan definidas para el día que se retome como escaparate de proyectos, pero ninguna pieza está producida todavía: definir un formato no es lo mismo que tener contenido.

Reglas comunes

• Fondo tinta siempre. La marca no vive sobre blanco en redes.
• Un mensaje por pieza. Si hacen falta dos, son dos piezas.
• Nada de texto sobre la zona que recorta cada plataforma, que es distinta en cada una.
• El grano y la aurora se mantienen: son lo que hace reconocible una pieza sin logotipo.

08

Archivos

La marca en los formatos que hacen falta. El SVG es el original: cualquier otro formato sale de él, nunca al revés.

Antes de mandar el logo a un tercero

El texto de logo.svg va como texto, no como curvas. Si va a una imprenta o a otro estudio, ábrelo en Illustrator o Figma y expórtalo con el texto convertido a trazados. Si no, se compondrá con otra tipografía y dejará de ser el logotipo.