GH-FR-1042
−17% Grupo GH · versión 1.0
Sistema de diseño «Ficha técnica»
Colores, tipografía, formas y componentes de la web de Grupo GH. Todo lo que aparece aquí usa los mismos tokens que la tienda, así que esta página siempre refleja el estado real del sistema.
Principios
Tres reglas de partida
Ficha técnica, no escaparate
Cada pieza se presenta como en un catálogo de refacciones: número de parte a la vista, datos en tipografía técnica y un plano en lugar de adornos.
El azul estructura, el ámbar señala
El acero marca lo que se puede pulsar. El ámbar aparece poco y solo donde hay algo que no debe pasarse por alto: una oferta o la acción principal.
Líneas antes que sombras
Las superficies se separan con bordes de un píxel y esquinas casi rectas. Al pasar el cursor cambia el borde, no la elevación.
Color
Tres escalas propias
Cada escala tiene once tonos. Los tokens viven en app/assets/css/main.css como --color-acero-*, --color-grafito-* y --color-senal-*.
Acero
MarcaBotones, enlaces, selección y los planos de las piezas. 600 en tema claro, 400 en tema oscuro, 950 para las bandas de plano.
50
100
200
300
400
500
600
700
800
900
950
Grafito
NeutroTexto, bordes y fondos. Tiene un tinte azul para convivir con el acero; nunca se usa un gris puro.
50
100
200
300
400
500
600
700
800
900
950
Señal
AcentoOfertas, la llamada principal sobre plano oscuro y la franja de seguridad. Siempre con texto grafito 950, nunca blanco.
50
100
200
300
400
500
600
700
800
900
950
Estados
Colores reservados para comunicar un estado. No se usan como decoración.
Éxito emerald
Disponible, pedido o cita confirmados
Aviso orange
Quedan pocas piezas
Error red
Agotado, campo inválido, acción destructiva
Información sky
Avisos neutros
Tipografía
Tres voces
Una condensada de rotulación para lo que se lee de lejos, una sans para leer y una monoespaciada para los datos.
Display
Barlow Condensed
Títulos, precios, botones y navegación. Siempre en mayúsculas, salvo los precios.
Balatas cerámicas
Texto
Barlow
Párrafos, nombres de pieza, formularios.
Frenado estable en ciudad y carretera, con sensor de desgaste incluido.
Técnica
IBM Plex Mono
Números de parte, marcas, rótulos de sección y datos de ficha.
GH-FR-1042 · Brembo · 12 meses
Forma y textura
Bordes, planos y franja
Radios
Sin radio
Logotipo, etiquetas de oferta, indicadores
md
Botones y campos
lg
Planos de pieza
2xl
Tarjetas y bandas
Toda la escala parte de --ui-radius: 0.125rem. Las tarjetas no llevan sombra; solo el buscador por vehículo, que flota sobre el plano.
Plano claro · fondo de cada pieza
Plano oscuro · portadas y llamadas
Franja de seguridad · solo en el buscador y el pie
Componentes
Piezas de la interfaz
Botones
Sobre plano oscuro, la acción principal va en ámbar y la secundaria en contorno blanco.
Campos y etiquetas
Código postal de 5 dígitos
Disponible Quedan 6 Agotado −17% Frenos
Tarjeta de pieza
Tarjeta de servicio
1.5 h
Servicio de frenos
Cambio de balatas, rectificado de discos y purga del sistema.
- Balatas por eje
- Rectificado de discos
- Purga de líquido
Desde
$1,190