Design kit

Un solo sistema para frutostayen.cl y tayen.cl

Los valores de esta página no son una propuesta: son los tokens que hoy usa el frontend nuevo en producción, extraídos de app/globals.css (bloque @theme de Tailwind 4). El sitio legacy consume las mismas custom properties, así que un cambio de token se propaga a ambos.

Fuente de verdad: forgejo:magiatek_admin/frutostayen → app/globals.css. Contraste calculado con la fórmula WCAG 2.1 sobre fondo crema #F5F2EB.

Marca

Verde musgo, terracota y crema. El dorado es acento, nunca color de texto corrido.

moss-main#2D4636

vs crema 9.20:1

terracotta#B36D4D

vs crema 3.60:1

terracotta-hover#9A5A3D

vs crema 4.81:1

cream-main#F5F2EB

vs crema 1.00:1

moss-pale#D9E2D5

vs crema 1.19:1

charcoal#333333

vs crema 11.30:1

gold#B8860B

vs crema 2.91:1

Soporte y categorías

Los tres verdes de soporte estaban hardcodeados en los componentes; pasan a token para que dejen de derivar. Los colores de categoría identifican cada familia de producto.

link-green#15803D

vs crema 4.49:1

banner-green#4F7D49

vs crema 4.31:1

highlight-lime#D9F95D

vs crema 1.06:1

snacks-mixs#5BBCB4

vs crema 2.02:1

frutos-secos#D1C1A5

vs crema 1.58:1

deshidratadas#C4437A

vs crema 4.24:1

semillas#BCD49C

vs crema 1.44:1

cereales#CB9051

vs crema 2.46:1

chocolates#685246

vs crema 6.51:1

Neutros y oliva

stone-50#FAFAF9

vs crema 1.07:1

stone-100#F5F5F4

vs crema 1.02:1

stone-200#E7E5E4

vs crema 1.12:1

stone-300#D6D3D1

vs crema 1.33:1

stone-400#A8A29E

vs crema 2.26:1

stone-500#78716C

vs crema 4.29:1

stone-600#57534E

vs crema 6.82:1

stone-700#44403C

vs crema 9.19:1

stone-800#292524

vs crema 13.57:1

stone-900#1C1917

vs crema 15.64:1

olive-50#F3F6EC

vs crema 1.02:1

olive-100#E2EAD0

vs crema 1.11:1

olive-200#C5D5A1

vs crema 1.40:1

olive-300#A8C072

vs crema 1.80:1

olive-400#8BAB4D

vs crema 2.34:1

olive-500#6E9038

vs crema 3.29:1

olive-600#55722C

vs crema 4.90:1

olive-700#3D5420

vs crema 7.55:1

olive-800#263614

vs crema 11.59:1

olive-900#0F1808

vs crema 16.27:1

olive-950#070C03

vs crema 17.67:1

Tipografía

Cormorant Garamond para display y títulos de sección; Montserrat para todo lo demás. Cinco pesos como máximo por familia.

display · 44px / 700 / heading

Frutos secos Tayen

h2 · 30px / 600 / heading

Frutos secos Tayen

h3 · 14px / 700 / body

Frutos secos Tayen

price · 18px / 900 / body

Frutos secos Tayen

body · 14px / 400 / body

Frutos secos Tayen

eyebrow · 10px / 700 / body

Frutos secos Tayen

button · 12px / 700 / body

Frutos secos Tayen

Componentes

Botones

Badges

Nuevo Oferta Disponible

Formularios

Tarjeta de producto y radios

imagen 1:1

SemillasNombre del producto en dos líneas máximo

$4.990

--radius-md · 6px

--radius-lg · 8px

--radius-xl · 12px

--radius-full · 9999px

Movimiento y layout

Token	Duración	Uso
`--tayen-dur-micro`	200ms	Hover de botones y links
`--tayen-dur-card`	300ms	Elevación de tarjeta
`--tayen-dur-zoom`	700ms	Zoom de imagen en la tarjeta
`--tayen-dur-fade`	1000ms	Fundidos de sección

Token	Valor
`--tayen-container`	1280px
`--tayen-gutter-mobile`	16px
`--tayen-gutter-desktop`	24px
`--tayen-header-height`	80px
`--tayen-nav-height`	48px
`--tayen-topbar-height`	32px

Qué corrige este rediseño

Cada fila sale de una medición sobre el sitio legacy, no de una opinión.

Problema medido en el legacy	Corrección en el rediseño	Evidencia
Grilla de producto en móvil: 1 columna (305 px por tarjeta, 35 productos = ~35 pantallas de scroll)	2 columnas en móvil, 3 en tablet, 4 en desktop	`Medido en el sitio legacy a 390×844`
Títulos de producto en `#e98a16` sobre blanco: contraste 2.59:1 (el audit midió 2.68:1; AA exige 4.5)	Títulos en `stone-800 #292524`: 13.57:1 sobre crema, 15.17:1 sobre blanco	`El naranja queda solo para acentos`
Badge «OFERTA» con contraste 3.27:1	Badge con fondo `moss #2D4636` y texto `lime #D9F95D`: 8.65:1	`Sin excepciones de AA`
Home sin `<h1>`	Un solo `h1` por página, jerarquía h1 → h2 → h3	`Verificado en el HTML generado`
61 archivos CSS/JS y 375 KB de texto para el primer render	1 hoja de estilos (~22 KB) y cero JS de framework	`El catálogo es estático, no necesita hidratación`
133 imágenes, 5.44 MB, 0 en WebP	Imágenes a máx. 820 px en JPEG progresivo, 2.5 MB para 24 fichas	`Reducción medida de 54%`
Elementor + 65 plugins en producción	Sin dependencia de page builder: HTML plano	`Menos superficie de falla`