¿Qué repuesto necesitás?Te orientamos Carrito
MenúCerrar

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

Revans

Títulos e interfaz · Medium

Aa

Inter (cifras)

Precios, pasos y cantidades · tabulares

Aa

Classica

Párrafos y descripciones · 400

Aa

Inter

Datos densos y controles · 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 sola forma (radio de 4 px) y un canto inferior en lugar de degradé o brillo. Negro para comprar, dorado solo para la acción comercial destacada, contorno para alternativas y enlace subrayado para lo terciario.

Primario · negro. Compra y confirmación.

Destacado · dorado. Acción comercial destacada; máximo uno por pantalla. Dorado plano con canto inferior.

Secundario · contorno. Alternativas junto al primario; al pasar, el contorno pasa a tinta.

Terciario · subrayado dorado. Acciones terciarias y enlaces de sección, con flecha.

Solo ícono. Siempre con nombre accesible.

Deshabilitado · discontinuo. Contorno discontinuo, sin relleno; con texto que explique el motivo.

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

Chico · 36 px. Dentro de tarjetas y filas de listado.

Sobre negro. Contorno dorado; el deshabilitado se apaga sobre el mismo fondo oscuro.

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
Variante (como en la ficha)
Mostrar
Cantidad

07

Badges y avisos

Vocabulario de marca, no de interfaz genérica: el hexágono del logo como marca recurrente, tipografía de placa grabada, superficies de papel/grafito. Seis badges con peso visual propio: destacado pesa más que seguridad, seguridad más que nuevo, y así hasta el chip neutral. Los avisos se separan por función —seguridad, nota técnica, comprobante, vista previa y error—, cada uno con su anatomía. El significado siempre va también en el texto o el ícono, nunca solo en el color.

SelecciónSeguridadNuevoCon variantesPrecio pendienteConsultar
SelecciónSeguridad

Avisos por función

Cinco funciones con anatomía propia, no un tono por color: cada una se reconoce por su palabra, su pictograma y su forma. El amarillo de marca vive solo en la placa de seguridad y el verde, solo en el sello del comprobante; el pendiente no usa color de alarma.

1 · Placa de seguridad — solo seguridad de gas. Completa (ficha) y compacta (guía de la home: pestaña lateral en escritorio, apilada en móvil):

2 · Nota técnica — parte de la hoja técnica de la ficha; el texto de compatibilidad es del cliente y va detrás de un rótulo propio:

3 · Comprobante — en el carrito, al volver de «Agregar al carrito»: la pieza, la variante y la cantidad que se agregaron. Estático, sin auto-cierre y sin región viva:

Agregado al carrito

Revisá la variante antes de seguir

Piloto Orbis tradicional

Soporte: IzquierdoBujía: Con bujíaInyector: Gas natural

2

4 · Pendiente / vista previa — lo que todavía no está conectado. Bloque, en línea (notas pegadas a un control), sin caja (bajo un botón deshabilitado) y sobre negro:

Vista previa

El envío se cotiza más adelante. El costo depende del origen, el código postal de destino y el peso y las medidas del paquete; se va a calcular cuando esos datos estén cargados.

Vista previa

Canal de contacto no conectado en la demostración.

Vista previa

Sin caja: la nota de un botón deshabilitado.

Vista previa

Canal de contacto no conectado en la demostración.

5 · Error en línea — pegado a lo que falló, con la salida al lado (carrito y opciones de la ficha):

No se agregó el producto: faltó elegir una opción. Volver a la ficha

Falta elegir: Bujía e Inyector.

  • «Atención» (brand-yellow) sobre la banda ink10,7:1
  • Tema de la banda (on-ink-faint) sobre ink6,4:1
  • Pendiente: etiqueta (ink-faint) sobre blanco5,3:1
  • Pendiente sobre negro: texto (on-ink-soft) sobre ink-raised8,9:1
  • Pendiente sobre negro: etiqueta (on-ink-faint) sobre ink-raised5,7:1

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
  • water-heater
  • tank-heater
  • range
  • space-heater
  • deep-fryer
  • catalog
  • guide
  • pilot
  • valve
  • thermostat
  • thermocouple
  • burner-cap

Espacio

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

Radios y sombras

  • radius-smcontroles y botones
  • radius-mdtarjetas chicas
  • radius-lgtarjetas
  • shadow-smreposo
  • shadow-mdhover, flotantes
  • shadow-lgpieza protagonista