Documento personal · Diseño web
Aquí están, con nombre y apellido, los estilos y elementos que usamos en la página de prueba. Sirve como catálogo: cuando quieras algo, lo pides por su nombre y vamos directo al grano. Cada tarjeta trae una demo en vivo y la frase exacta para pedírmelo.
01 — Los estilos
Un “estilo” es el ambiente general de la página: colores, tipografía y actitud. Con estos seis cubres casi cualquier negocio.
Fondo casi negro cálido, tipografía gigante y aire de revista. Elegante pero con carácter.
Ideal para: restaurantes, bares, moda, portafolios, marcas con personalidad.
Colores planos, bordes duros, sombras sólidas y tipografía pesada. Se ve joven y honesto.
Ideal para: startups, marcas jóvenes, eventos, productos creativos.
Letreros de taquería, sellos, colores de comal y ese sabor de barrio que no se finge.
Ideal para: comida, barberías, cantinas, talleres, marcas locales.
Blanco, mucho aire, tipografía limpia y jerarquía clara. Transmite orden y confianza.
Ideal para: clínicas, despachos, SaaS, consultoría, servicios profesionales.
Negro profundo, dorado discreto y tipografía con serif. Menos es más, y lo caro se nota.
Ideal para: joyería, hoteles, eventos, bienes raíces de lujo, spas.
Crudo a propósito: sin adornos, tipografía enorme y estructura visible. Rompe la regla.
Ideal para: portafolios creativos, artistas, música, proyectos experimentales.
02 — Los elementos
Estos son los ingredientes que usamos en la página de la taquería. Cada uno tiene su nombre técnico, una demo viva y la frase para pedirlo.
Rotating circular badge / stamp. Un círculo con texto que gira lento; da sensación artesanal y de marca establecida.
Pídemelo así: “Ponme un sello giratorio con el nombre del negocio alrededor.”
Infinite marquee / ticker. Texto que corre sin fin, como los letreros de las noticias. Agrega movimiento sin distraer.
Pídemelo así: “Ponme un marquee con los platillos / servicios.”
Outline / hollow text (text-stroke). Letras transparentes con puro borde. Se ve moderno y da jerarquía sin llenar de color.
Pídemelo así: “Ponme una palabra gigante en contorno, sin relleno.”
Film grain / noise overlay. Ruido sutil encima de todo. Hace que el fondo no se vea “plástico” y da textura de foto análoga.
Pídemelo así: “Agrégale textura de grano de película al fondo.”
Ambient glow / radial gradient light. Manchas de luz suave detrás de las cosas. Dan profundidad y sensación premium.
Pídemelo así: “Ponle un glow cálido en el fondo, sutil.”
Hairline grid / bento layout. Tarjetas separadas por líneas de 1px. Ordena contenido sin cajas pesadas.
Pídemelo así: “Hazme el menú en grid con líneas de 1 píxel.”
Pill buttons. Botones muy redondeados, uno lleno (acción principal) y uno con borde (acción secundaria).
Pídemelo así: “Ponme botones en forma de pastilla, uno lleno y uno con borde.”
Hover lift / elevation on hover. Al pasar el mouse, la tarjeta sube y se resalta. Invita a hacer clic.
Pídemelo así: “Que las tarjetas se levanten al pasar el mouse.”
Abstract color fields / gradient art. “Imágenes” hechas con puras mezclas de color. Carga instantáneo y se ve artístico.
Pídemelo así: “Rellena la galería con bloques de gradientes, sin fotos.”
Stylized map + pulse pin. Un “mapa” dibujado con líneas y un punto que late. Da ubicación sin depender de Google Maps.
Pídemelo así: “Ponme un mapa estilizado con un pin que pulse.”
Scroll reveal / fade-up. Los bloques suben y aparecen cuando llegas a ellos. Hace la página sentir viva.
Pídemelo así: “Que las secciones aparezcan con fade-up al hacer scroll.”
Animated counters / count-up. Los números cuentan al aparecer. Perfecto para logros: años, clientes, proyectos.
Pídemelo así: “Ponme contadores animados en las estadísticas.”
Condensed display type. Letras altas y apretadas, como cartel de cine. Es la que le da fuerza a los títulos.
Pídemelo así: “Usa una tipografía display condensada para los títulos.”
Glassmorphism header / backdrop blur. Menú fijo semitransparente que difumina lo que pasa debajo. Se ve moderno y no estorba.
Pídemelo así: “Hazme el menú fijo con efecto de vidrio esmerilado.”
03 — La paleta
Esta paleta cálida es la de la taquería. Toca cualquier color para copiar su código. Se puede adaptar a cualquier marca.
04 — Tipografía
La regla es sencilla: una letra con carácter para títulos, y una limpia y legible para el texto. Nunca dos “de carácter” peleando.
Display condensada, toda en mayúsculas, gratis en Google Fonts. Es la de los títulos gigantes de la página.
Alternativas: Anton, Oswald, Archivo Black, Teko.
Sans geométrica, muy legible en pantalla y con buen peso. La del cuerpo, botones y etiquetas.
Alternativas: Inter, DM Sans, Poppins, Work Sans.
Serif elegante con mucho contraste. Se usa cuando el estilo es lujo oscuro o algo editorial clásico.
Alternativas: Cormorant, Lora, Libre Baskerville.
05 — Cómo pedirlo
No necesitas saber el nombre técnico: con decirme lo que quieres de esta columna, yo sé qué tocar.
| Quiero… | Pídemelo así |
|---|---|
| Que se vea elegante y oscuro | “Hazme una página estilo editorial oscuro.” |
| Que se vea joven y atrevida | “Dale un look neo-brutalista suave.” |
| Sabor de barrio / comida | “Estilo retro-diner con sellos y tipografía de cartel.” |
| Confianza y limpieza | “Algo minimal claro, con mucho aire.” |
| Que se vea caro | “Lujo oscuro: negro, dorado y serif.” |
| Un sello que gire | “Ponme un sello giratorio con el nombre alrededor.” |
| Movimiento en una franja | “Agrega un marquee con los servicios.” |
| Letras huecas gigantes | “Una palabra en contorno, sin relleno.” |
| Textura de foto vieja | “Agrega grano de película al fondo.” |
| Que la página se sienta viva | “Que todo aparezca con fade-up al bajar.” |
| Números que impresionen | “Contadores animados en las estadísticas.” |
| Menú fijo moderno | “Header fijo con efecto de vidrio esmerilado.” |
| Mapa sin depender de Google | “Un mapa estilizado con pin pulsante.” |
| Galería sin fotos | “Bloques de gradientes abstractos.” |