Design System de cliente
Un design system (o sistema de diseño) lleva la marca al terreno digital.
Si el brand book explica cómo es la marca, el design system define las piezas concretas con las que se construye la web y cualquier pantalla: los colores exactos, las tipografías, los botones, las tarjetas, los formularios y el espaciado, ya listos para montar. Trabajar así tiene tres ventajas: la web es fiel a la marca, se construye más rápido, y es fácil de mantener y ampliar en el futuro sin que nada se desajuste.
Las decisiones de marca codificadas como variables. Todo componente las consume; ningún valor se escribe a mano. Namespace --fv-*.
El brand book veta rojo/rosa/fucsia como color de marca. Estos dos tonos existen únicamente como señal funcional de formularios y son tierra/apagados para no romper la paleta cálida.
El sistema usa pocas sombras: la elevación se resuelve con color de superficie (paper sobre hueso) y borde cálido, no con sombras pesadas. Coherente con el carácter técnico y sobrio de la marca.
Space Grotesk (display) para titulares y datos; Inter (body) para lectura y UI. Sin serifas: técnica, limpia y moderna.
display-xlSpace Grotesk · 600h1Space Grotesk · 600h2Space Grotesk · 600h3Space Grotesk · 600body-lgInter · 400bodyInter · 400smallInter · 400labelInter · 600La marca vive sobre base hueso (claro). El teal-grafito es una superficie oscura editorial para secciones de impacto. Mismos componentes, tokens remapeados con .fv-dark.
Seguridad y resistencia para fachadas, barandillas y mamparas.
Ver solucionesSeguridad y resistencia para fachadas, barandillas y mamparas.
Ver solucionesPrimario en teal-deep (CTA principal, máximo uno por bloque). Secundario en outline. Ghost para acciones terciarias.
Estados: hover oscurece a teal-grafito; focus muestra anillo --fv-shadow-ring (accesibilidad de teclado); disabled al 45%.
Para los listados de Productos (familias Templados / Laminados). Imagen del material, familia, ventajas clave y acceso a ficha.
Resistencia mecánica y térmica hasta 5× el recocido. Rotura en fragmentos romos.
Dos o más lunas unidas por butiral (PVB). Retención de fragmentos y aislamiento acústico.
Decorativo, serigrafiado, curvado y soluciones técnicas para proyectos singulares.
El componente clave para prescriptores. Especificaciones verificables y normativa aplicable, en formato escaneable. Datos de ejemplo (a sustituir por catálogo real).
| Espesores | 4, 5, 6, 8, 10, 12, 15, 19 mm |
|---|---|
| Dimensión máxima | 2.400 × 4.200 mm |
| Resistencia a flexión | ≥ 120 N/mm² |
| Tratamiento de canto | Pulido brillo / mate / industrial |
| Clasificación de seguridad | 1C1 / 1C2 según espesor |
| Composiciones | 3+3 · 4+4 · 5+5 · 6+6 · 8+8 · 10+10 |
|---|---|
| Butiral (PVB) | 0,38 / 0,76 / 1,52 mm · transparente o acústico |
| Atenuación acústica | hasta 42 dB (Rw, según composición) |
| Prestación | Seguridad, antirrobo, control solar |
| Clasificación de seguridad | 2B2 / 1B1 según composición |
Casos de obra con imagen, ubicación y tipo de vidrio. Sin crédito de arquitecto obligatorio (decisión cerrada). La foto del material en contexto es la protagonista.
Cierre de página orientado a la acción del prescriptor. Variante sobre acento y variante sobre superficie oscura.
Mándanos los planos o la prescripción y te devolvemos solución, espesores y plazos.
Pedir asesoramientoCon el menú real previsto (presupuesto 250279): Productos, Proyectos, Aplicaciones, Blog + contacto. Idiomas ES / CA.
Transformación, manufactura y vidrios especiales. Badalona.
La web pide asesoramiento y contacto. Set acotado a lo que se usa de verdad (sin date pickers ni toggles): texto, email, select, textarea, checkbox RGPD.
La marca es vidrio: la web puede comportarse como el material. Capa opcional (solo en marcas con concepto físico) de micro-interacciones que consumen los tokens de motion y glass. Regla de oro: sutil y técnico, nunca efectista.
Reglas de uso: CSS primero, JS mínimo (passive + requestAnimationFrame); prefers-reduced-motion obligatorio (todo se desactiva); fallback de navegador (si no hay soporte, queda estático, nunca roto); máximo un efecto fuerte por vista. En WordPress/Bricks: CSS en Custom CSS, el JS como script encolado.
Un haz de luz cruza la tarjeta a medida que sube por la pantalla, como un reflejo sobre el vidrio. Atado a la posición de scroll.
El cristal gira siguiendo el cursor y el brillo se desplaza al contrario, como la luz sobre un vidrio real al moverlo. Tope de giro 16°.
La barra y el panel se quedan fijos mientras el fondo sube por detrás: el contenido se difumina al pasar a través del cristal. Es el comportamiento de un menú sticky de vidrio sobre el contenido real.
Los seis efectos, en vivo y comentados, están en el laboratorio: Vidrio en movimiento → (mismo acceso). Esta capa se construyó como módulo reutilizable; se activa por marca según el concepto.