tria home

Sistema de diseño

La base visual

Define los colores, tipografías y espaciados que mantienen la identidad de marca coherente en todas las páginas.

Colores

Primarios

Crema

#F1EFE3

Blanco

#FEFEFA

Negro

#181210

Información

Verde

#73917E

Amarillo

#FFC600

Rojo

#B5353F

Paleta neutral

Gris 1

#FBFAF6

Gris 2

#F6F4EC

Gris 3

#ABAAA1

Gris 4

#85837D

Gris 5

#65645F

Tipografías
Manrope Regular — Tipografía principal

Plus Jakarta Sans Light — Tipografía secundaria

MANROPE UPPERCASE — ETIQUETAS

tria home

Componentes de Framer

Cada uno cumple una función específica

Tu sitio está construido con componentes reutilizables

Botones

ver todo

ver todo

ver todo

ver todo

ver todo

Button - Principal

Botón reutilizable para llamadas a la acción y navegación.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

agregar al carrito

producto añadido

producto añadido

Seleccionar Size

agotado

producto añadido

comprar ahora

cantidad max. alcanzada

producto añadido

Add to Cart

Botón de compra conectado al flujo del carrito.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Arrow-Image

Control visual para avanzar o destacar imágenes.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Back

Acción de regreso para páginas u overlays.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Filter

Botón para activar filtros del catálogo.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Card

Tarjetas

almohadones

almohadones

Decoración

Categories

Tarjeta para colecciones o categorias del catálogo.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Image

Componente de imagen reutilizable.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

categoría

PRODUCTO

categoría

PRODUCTO

PRODUCTO

Product

Componente de imagen reutilizable.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Stock Status

Indicador de disponibilidad de producto.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

CARRITO

Button

Botón asociado a acciones del carrito.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Overlay

Panel superpuesto del carrito o estados relacionados.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

State

Estado visual usado por flujos de carrito.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Trigger

Disparador que abre o actualiza el carrito.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

INDEPENDIENTES

JudgeMeRating

Valoración visual conectada a reseñas.

Controles

VARIANTE

Define el estado visual o uso principal del componente.

CONTENIDO

Edita textos, etiquetas o valores visibles.

ENLACE

Configura destino o acción cuando aplica.

Integraciones

Integraciones

Framer Commerce

Activo

Conecta tu tienda Shopify con el sitio web. Gestiona productos, carrito y checkout automáticamente.

No desinstalar ni reconfigurar

Judge.me Reseñas

Activo

Recopila y muestra reseñas de clientes. Las valoraciones aparecen en las páginas de producto automáticamente.

Las reseñas requieren aprobación manual

Qué no modificar nunca

Qué no modificar nunca

Estos elementos no deben cambiarse sin consultar con tu diseñador.

Elemento

Dónde

Riesgo

Handle de producto

Shopify → Productos → SEO

Rompe URLs y desvincula reseñas

Plugin Framer Commerce

Shopify → Apps

Rompe carrito y checkout

Token Judge.me

Judge.me → Integraciones

Desconecta las reseñas

Dominios

Shopify → Configuración

Puede dejar el sitio offline

Componentes Framer

Canvas de Framer

Rompe múltiples páginas

Variables de color

Framer → Assets → Colors

Cambia colores en todo el sitio

Tip / Confirmación

Usar para acciones seguras o estados correctos.

Advertencia

Usar cuando una acción necesita revisión previa.

Peligro / No tocar

Usar para cambios que pueden romper ventas, URLs o reseñas.