Style Guide
Documento de referencia visual para el diseño y desarrollo de la tienda Gütskin.
Identidad de Marca
Variantes de logotipo. Nunca deformar, cambiar proporción ni aplicar sobre fondos que comprometan su legibilidad.
"Tu piel merece lo mejor del skincare coreano."
Posicionamiento: destino de K-beauty especializado para el consumidor peruano. Experto, accesible, confiable.Sistema de Color
Cada color base genera 8 variantes en Automatic CSS. El swatch marcado con ★ es el valor BASE que se registra en ACSS. Los demás se generan automáticamente a partir de él.
Primary — Amarillo Cálido
--primary-ultra-light--primary-light--primary-semi-light--primary--primary-semi-dark--primary-semi-dark--primary-dark--primary-darkNeutral — Escala de Grises
--secondary-ultra-dark--secondary-hover--neutral-ultra-light--neutral-light--neutral-semi-light--neutral--neutral-semi-dark--neutral-darkTipografía
Cormorant Garamond para displays y títulos editoriales. Plus Jakarta Sans para cuerpo de texto, UI y navegación.
Tu piel, transformada.
Skincare que funciona.
Escala Tipográfica
Espaciado
Escala de tokens usada en padding, margin y gap en todo el sitio.
Botones
Primario para la acción principal. Secundario para acciones alternativas. Outline y ghost para acciones de menor peso visual.
Variantes
Tamaños
Insignias y Etiquetas
Insignias de estado para la tarjeta de producto. Etiquetas de atributo para la ficha de producto.
Insignias de Estado
Etiquetas de Atributo
Tarjeta de Producto
Componente central del ecommerce. Anatomía con sus 7 elementos etiquetados.
[ Imagen del producto ]
600 × 600px
COSRX
Advanced Snail 96 Mucin Power Essence
Imagen del producto — 600×600px, fondo neutro.
Insignia de estado — posición absoluta arriba izquierda. Prioridad: Agotado › Oferta › Más Vendido › Nuevo.
Wishlist — ícono de corazón arriba derecha. Toggle activo/inactivo.
Marca — label pequeño en uppercase.
Nombre del producto — máximo 2 líneas. Ellipsis si es más largo.
Precio — actual destacado. Precio tachado solo si hay oferta activa.
Botón de carrito — ancho completo. Deshabilitado si está agotado.
Alertas del Sistema
Cuatro variantes. Siempre: ícono + título en negrita + mensaje de apoyo.
Tono de Comunicación
Cómo habla Gütskin en todos los puntos de contacto: web, correos, redes, fichas de producto y atención al cliente.
Atributos de Voz
Ejemplos — Correcto vs. Incorrecto
| Contexto | ✓ Sí decimos | ✕ No decimos |
|---|---|---|
| Descripción de producto | Calma la piel irritada y refuerza tu barrera cutánea desde la primera aplicación. | ¡El mejor sérum del mundo! Resultados milagrosos garantizados al 100%. |
| Botón de acción | Agregar al carrito · Comprar ahora · Ver rutina | ¡Cómpralo YA! · ¡No te lo pierdas! · Click aquí |
| Stock bajo | Últimas 3 unidades disponibles. | ¡¡URGENTE!! ¡Se acaba! ¡Corre! |
| Confirmación de compra | Tu pedido está en camino. Aquí tienes el detalle y el número de seguimiento. | ¡Gracias por tu compra, esperamos que te encante y vuelvas pronto! |
| Guía de rutina | Paso 1: Limpieza. Empieza con un aceite para disolver el maquillaje del día. | ¡Descubre el secreto de las coreanas! 12 pasos para piel de porcelana. |
Vocabulario
- Barrera cutánea
- Rutina de skincare
- Tipo de piel
- Activos (centella, niacinamida…)
- Productos validados
- Fórmula efectiva
- Piel luminosa / saludable
- Dermatológicamente testado
- Milagroso / revolucionario
- Resultados garantizados
- Piel perfecta / sin imperfecciones
- Secreto coreano
- Piel de porcelana
- El mejor del mercado
- 100% natural (sin respaldo)
- Anti-age