Sección 05

Producto

Tokens, componentes y patrones para construir interfaces consistentes — del e-commerce a la app de farmacia.

5.1 Tokens

Espaciado · Radio · Sombra

Spacing — escala 4pt
space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px
space-1664px
Radius
radius-none0
radius-sm6px
radius-md10px
radius-lg16px
radius-xl24px
radius-full9999px
Shadow
shadow-sm
shadow-md
shadow-lg
5.2 Botones

Variantes y estados

Default
Hover
Focus
Disabled
Primario
Secundario
Brillante
Ghost
5.3 Inputs

Campos y formularios

CuidadoBellezaBebésVitaminas
5.4 Patrón

Tarjeta de producto

Más vendido
Cuidado personal
Vitamina C 1000mg
$ 38.900
Nuevo
Cuidado personal
Protector solar SPF 50
$ 64.500
Genérico
Cuidado personal
Acetaminofén 500mg x20
$ 12.300
5.5 Header

Patrón de navegación e-commerce

FARMATODO
Envío gratis desde $50.000·Recoge en tienda en 1 hora
5.6 Accesibilidad

Reglas mínimas

  • →Contraste mínimo 4.5:1 para texto cuerpo, 3:1 para texto grande.
  • →Focus ring visible siempre — outline 2px Azul Brillante con offset 2px.
  • →Áreas táctiles ≥ 44×44 px en mobile.
  • →Iconos sin texto deben llevar aria-label descriptivo.
  • →Estados disabled comunicados además de por opacidad (cursor, aria).
∙ Spec

Guía agent-friendly

Agent spec
Producto · anatomía y estados