INSTRUGASRepuestos y componentes
¿Qué repuesto necesitás?Te orientamos Carrito
Menú

Sistema de diseño · muestra v3

El repuesto correcto, rápido y con confianza.

Base visual de INSTRUGAS para técnicos, gasistas y personas que reparan sus propios equipos. Blanco dominante, negro para estructura, dorado como acento premium y los colores del logo solo en detalles.

Búsquedas frecuentes (demo):termocuplaválvula de gasencendedor

01

Principios

  • Encontrar rápido

    Búsqueda por modelo y código siempre visible; categorías por tipo de equipo.

  • Producto sobre blanco

    Fotos aisladas, encuadre homogéneo y bordes finos en lugar de fondos grises.

  • Premium por el orden

    Tipografía, espaciado y datos técnicos alineados; no por exceso de negro o dorado.

  • El logo en los detalles

    Amarillo, azul y rojo en puntos, íconos y la línea de firma. Nunca dominan.

02

Color

Proporción orientativa por pantalla. Los contrastes se calculan en build a partir de tokens.css.

  • Blanco 68%
  • Negro 20%
  • Dorado 8%
  • Amarillo 2%
  • Azul 1%
  • Rojo 1%

Blanco y estructura

El blanco domina. Superficies apenas cálidas separan bloques sin competir con el producto.

  • Fondo y producto--color-canvas#ffffffSuperficie
  • Bloques secundarios--color-surface-soft#f7f6f2Superficie
  • Bandas y deshabilitado--color-surface-sunken#eeede7Superficie
  • Separadores--color-border#e8e6e1Solo decorativo
  • Contorno de campos--color-border-control#8c8a843,5:1 contorno

Negro

Estructura, texto y la acción principal. Nunca un modo oscuro general.

  • Texto y botón primario--color-ink#171a1d17,5:1 con blanco
  • Texto secundario--color-ink-soft#45484e9,2:1 sobre blanco
  • Metadatos y ayudas--color-ink-faint#686c735,3:1 sobre blanco

Dorado

Acento premium: la acción comercial destacada, líneas y foco. El dorado claro nunca es texto.

  • Botón comercial--color-gold#d6ae518,3:1 con texto ink
  • Hover comercial--color-gold-hover#b3861f5,3:1 con texto ink
  • Texto, foco--color-gold-text#8a64125,4:1 sobre blanco
  • Texto sobre tinte--color-gold-deep#6b4d0c7,8:1 sobre blanco
  • Líneas y selección--color-gold-line#e2c47aSolo decorativo
  • Fondo destacado--color-gold-tint#faf4e4Superficie

Colores del logo

Identidad en microelementos: puntos, íconos, líneas y bordes de aviso. Nunca fondos de sección.

  • Llamadas de atención--color-brand-yellow#f5c51810,7:1 con texto ink
  • Información técnica--color-brand-blue#1558c96,4:1 sobre blanco
  • Alertas y seguridad--color-brand-red#d4232b5,2:1 sobre blanco

Estados

Siempre acompañados de ícono y texto; el color solo refuerza.

  • Confirmación--color-success#1e7a465,3:1 sobre blanco
  • Advertencia--color-warning#8a5a005,9:1 sobre blanco
  • Error--color-error#b4231b6,6:1 sobre blanco
  • Información--color-info#1558c96,4:1 sobre blanco

03

Tipografía

La sensación premium sale de acá: pocos pesos, tracking ajustado en títulos y cifras tabulares en precios y medidas.

Aa

Space Grotesk

Títulos, precios y cifras destacadas · 500–700

Aa

Inter

Interfaz, lectura y especificaciones · 400–600

0–9

Monoespaciada del sistema

Códigos de repuesto: DEMO-TC-0001

  1. display--text-displayRepuestos para cada equipo
  2. h1--text-h1Termocuplas y válvulas
  3. h2--text-h2Compatibilidad por modelo
  4. h3--text-h3Ficha técnica
  5. lead--text-leadBuscá por marca, modelo o código de la pieza.
  6. body--text-bodyTexto de interfaz y descripciones de producto.
  7. small--text-smallMetadatos, ayudas y especificaciones.
  8. caption--text-captionETIQUETAS · NOTAS · PRECIO DE PRUEBA

04

Buscar y explorar

El recorrido principal: equipo → categoría → pieza. Filtros grandes y táctiles, sin depender del color para marcar la selección.

Filtros por tipo de equipo

Categorías

  • CalefonesPilotos, encendido e ionización
  • TermotanquesTermostatos para termotanques a gas
  • Cocinas y hornosTermocuplas, válvulas, termostatos, tapas
  • Estufas y calefactoresPilotos y válvulas de seguridad
  • Equipos gastronómicosVálvulas para freidoras

05

Acciones

Una acción principal por bloque. Negro para comprar, dorado para la acción comercial destacada o el asesoramiento.

Primario · negro. Compra y confirmación.

Comercial · dorado. Asesoramiento o acción destacada; máximo uno por pantalla.

Secundario. Alternativas junto al primario.

Ghost. Acciones terciarias y enlaces de sección.

Solo ícono. Siempre con nombre accesible.

Deshabilitado. Con texto que explique el motivo.

Grande · 56 px. Ficha de producto y móvil.

06

Formularios

Etiqueta visible, contorno ≥ 3:1, estados con ícono y texto.

Figura en la etiqueta del equipo.

El código debe tener 12 caracteres (demo).

Formato válido (demo).

Tipo de gas
Mostrar
Cantidad

07

Badges y avisos

Badges mínimos: el dorado distingue, el amarillo llama la atención y azul/rojo quedan para información y seguridad.

DestacadoNuevoInfo técnicaAviso de seguridadConsultarDemo

Para tener en cuenta

Verificá la compatibilidad

Compará el código de la pieza original antes de comprar (texto de demostración).

Atención

Instalación de gas

Las conexiones de gas deben hacerlas personas habilitadas (texto de demostración).

Listo

Agregado al carrito (demo)

No se pudo

No pudimos completar la búsqueda (demo)

Revisá el código e intentá de nuevo.

08

Producto

Producto aislado sobre blanco, código visible cuando exista y datos técnicos antes que decoración. Contenido del catálogo de prueba del cliente; fotos, códigos y precios pendientes.

Tarjeta de catálogo

Fila de listado · densidad para técnicos

Ficha de producto

La ficha completa se ve en una página real, por ejemploTermostato para termotanque a gas Señorial.

09

Identidad y base

Logo de INSTRUGAS

Línea de firma

Traduce el logo a la interfaz: una línea de 3 px con dorado dominante y amarillo, azul y rojo en tramos cortos. Aparece arriba de la cabecera y al pie; no se repite en tarjetas ni botones.

El logo conserva su tratamiento metálico; la interfaz se mantiene plana: sin gradientes, 3D ni brillos.

Iconos · línea 1,6 px · 24 × 24

  • grid
  • filter
  • search
  • cart
  • heart
  • user
  • chat
  • check
  • alert
  • info
  • arrow
  • chevron
  • menu
  • close
  • plus
  • minus
  • document
  • flame
  • droplet
  • bolt
  • thermometer
  • wrench
  • washer
  • radiator
  • fryer
  • camera
  • hexagon

Espacio

  • space-1
  • space-2
  • space-3
  • space-4
  • space-5
  • space-6
  • space-8
  • space-10
  • space-12

Radios y sombras

  • radius-smcontroles chicos
  • radius-mdbotones, campos
  • radius-lgtarjetas
  • shadow-smreposo
  • shadow-mdhover, flotantes
  • shadow-lgpieza protagonista