Glossier
Sesión fotográfica bajo el sol: papel blanco, tinta negra, un toque de amarillo brillante.
Glossier funciona como una revista de belleza digital: un lienzo casi monocromático en blanco y negro, salpicado por un único y vibrante toque amarillo que sirve como logotipo de la marca y único llamado a la acción. El sistema es sobrio en su contenido —titulares de Apercu de gran tamaño, amplio espacio para texto, fotografías de estilo de vida a página completa que transmiten la mayor parte de la carga emocional— y utilitario en su ejecución: fichas de producto planas, bordes finos y una total ausencia de adornos. El amarillo no es un color secundario de la marca; ES la marca, usado con moderación, de modo que cada aparición evoca el destello de una cámara. Todo lo demás se integra discretamente en el fondo: los tonos neutros son grises cálidos con un sutil matiz rosado, los bordes son discretos y la tipografía es densa y condensada. El resultado es una tienda online que transmite confianza, sobriedad y una modernidad inquebrantable.
La página presenta una serie de secciones a pantalla completa dispuestas verticalmente, cada una diseñada como una página editorial independiente. La sección principal es una foto de ancho completo con una superposición blanca flotante (esquina superior izquierda) y un enorme logotipo amarillo que ocupa toda la parte inferior de la página. Debajo de la sección principal, las secciones alternan entre imágenes a pantalla completa y cuadrículas de tarjetas individuales. La división de categorías (cuidado de la piel/maquillaje) en dos columnas con una proporción igual de imágenes (50/50) se realiza sin un borde visible; solo una línea que conecta las imágenes las separa. El catálogo de productos utiliza una cuadrícula de cuatro columnas de tarjetas cuadradas sobre un lienzo #f7f7f7. La navegación es una barra superior minimalista con una tira publicitaria secundaria encima. Los espacios entre secciones son bastante grandes (64 px), pero las transiciones entre secciones son suaves, sin divisores ni colores de fondo alternos, excepto por el pie de página cálido. El ritmo general es: fotografía, texto, fotografía, cuadrícula, fotografía, como hojear una revista de moda.
La fotografía es el lenguaje visual dominante. Toda el área de visualización está llena de imágenes de estilo de vida y retratos: iluminación cálida de la hora dorada, primeros planos suaves de la piel, manos sosteniendo botellas de productos contra un fondo de resplandor solar. La paleta de colores en las fotografías es cálida y desaturada: cielos color melocotón, tonos de piel terracota, azules profundos del océano. Las imágenes siempre ocupan toda la superficie de la página, sin esquinas redondeadas, marcos ni superposiciones, con la excepción de las tarjetas de texto blancas o el logotipo amarillo. Las fotos de productos en las tarjetas del catálogo están tomadas sobre un fondo blanco puro sin costuras con iluminación plana y uniforme. La proporción imagen-texto es aproximadamente 70/30: las imágenes transmiten emoción, el texto, función. Sin ilustraciones, sin gráficos abstractos, sin renderizaciones 3D.
Paleta
Marca
- Glossier Yellow
#fff116— El amarillo se utiliza como color de acento secundario para detalles decorativos y para resaltar las consultas de búsqueda menos frecuentes. No debe utilizarse como color principal para una llamada a la acción.
Neutral
- Ink
#000000— Texto principal, enlaces de navegación, texto principal, texto del pie de página, contornos de iconos, bordes finos; color tipográfico y estructural dominante. - Paper
#ffffff— Superficies de tarjetas de producto, áreas de relleno, paneles en relieve; el nivel de superficie más brillante en la pila. - Fog
#f7f7f7— El lienzo de la página, los fondos de las secciones, las transiciones entre las imágenes de la página; la superficie base sobre la que se asienta todo el sitio web. - Blush
#faf2f4— Fondo del pie de página, separadores de sección suaves y cálidos; un sutil tinte blanco rosado añade calidez a la parte inferior de las páginas. - Mist
#f0f0f0— Una superficie de soporte ligera para crear un fondo discreto y separar secciones. No debe usarse como color principal para la llamada a la acción. - Ash
#e8e8e8— Bordes de los campos de entrada, fondos de iconos, líneas separadoras finas; color del borde estructural para tarjetas y elementos de formulario.
Tipografía
de 12 a 32 píxeles · 5 pasos
- Apercu — reemplazo: Inter · esquemas 400, 500, 700 · La tipografía principal se utiliza en toda la interfaz de usuario: texto principal a 16 px/400, navegación y leyendas a 12–14 px/500, subtítulos a 20 px/500 y titulares editoriales a 32 px/700. El diseño geométrico y humanista de Apercu le confiere a la marca un estilo condensado y moderno; el espaciado casi nulo entre letras (0,002–0,003 em) hace que la tipografía sea compacta y propia de una revista, en lugar de ligera o amigable. El grosor de 700 está reservado para elementos de visualización en artículos editoriales, no para elementos de la interfaz de usuario.
- Apercu Mono — reemplazo: JetBrains Mono or IBM Plex Mono · esquemas 400 · Tipografía microutilitaria para los metadatos de los pedidos, los números de seguimiento y las etiquetas junto al código; la versión monoespaciada crea una textura técnica sobre un cuerpo de texto proporcional.
- GTStandard-M — reemplazo: Inter · esquemas 400 · GTStandard-M: se encuentra en los datos extraídos, pero la IA no lo describe.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 8px |
| Radio del botón | 0px |
| Radio de la tarjeta | 0px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Glossier y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Lightship — Un diorama cinematográfico de la carretera abierta. Paredes de color crema cálido adornadas con grandes fotografías de paisajes montadas a intervalos cortos, letras negras finas apenas visibles en los marcos y un único toque de naranja brillante que rompe la monotonía como una hoguera en un prado.
- Faire ES — Catálogo mayorista de crema tibia
- Adanola — Un catálogo editorial en papel blanco. Una sesión de fotos de moda donde la tipografía y la fotografía cobran vida sobre superficies blancas impolutas, con tinta negra para la tipografía y una sutil fuente sans-serif distintiva (Favorit), que refleja el estilo general de la marca.
- Oura Ring — Un acogedor taller para hacer avena, bañado por la suave luz del día.
- Stykka — Un taller escandinavo en luz blanca: una tranquila sala de exposiciones artesanal donde la única voz es la fotografía.
- DJI — Lienzo negro aeroespacial con un único detalle en azul eléctrico.
- Altitude Beverages — Doble página de revista en blanco y negro. Imagina una doble página de una revista de moda desprovista de todo color, excepto las fotografías: el texto y el espacio en blanco cuentan toda la historia.
- AATHER — Una palma abierta, una sola llama: un lujo silencioso contenido en la quietud.
- Cowboy — Una galería de bicicletas belga en un entorno de porcelana blanca como la nieve. Una sala de exposiciones donde las superficies mates, las tipografías grandes utilizadas en los materiales editoriales y la casi total ausencia de decoración dirigen la mirada hacia la bicicleta y su contenido.
- Refero — Diseño editorial sobre mármol blanco: una página de producto creada por un tipógrafo, donde el titular con serifa es la tarjeta de presentación de la marca y todo lo demás es discreto.
- Face Formula — Un retrato editorial escandinavo. Una imagen serena, al estilo de una revista, donde la mirada de la modelo y el titular, escrito en una tipografía serif condensada, hablan por sí solos sobre un fondo brumoso y frío.
- Shupatto — Vitrina de museo sobre mármol blanco