Miel
Miel pura del bosque valdiviano, aroma floral intenso.
Por mayor: $4.80001 / FUNDAMENTOS
Color y superficies
Paleta derivada del CSS del sitio Raki. El naranja funciona como acento y no como color dominante en controles persistentes.
Verde marca
#2C6F4BNaranja acento
#FF7A59Texto
#0F0F0FFondo
#F6F3EFSuperficie
#FFFFFFSecundario
#6B7280Bordes
#DCE3DDIconos footer
#A5D2B302 / FUNDAMENTOS
Tipografía y ritmo
Roboto como fuente principal. Helvetica Neue, Helvetica y Arial como alternativas. Base de 16 px y altura de línea de 1.6.
Productos del Sur
Catálogo mayorista
Productos artesanales seleccionados para negocios que valoran el origen, la calidad y la cercanía.
Texto secundario · 14 px · Roboto Regular
Espaciado · escala de 4 px
4px8px12px16px24px32px48px64px
Radio base 12 px · contenedor máximo 1100 px · sombra suave para tarjetas.
03 / LENGUAJE VISUAL
Iconografía lineal
SVG monocromáticos sin emojis. Trazo 1.7, tamaño 22 px en escritorio y 20 px en móvil; 17 px en footer.
04 / COMPONENTES
Acciones y estados
Botones con área táctil de al menos 44 px, foco visible y variantes primarias, secundarias, discretas y deshabilitadas.
| Estado | Tratamiento |
|---|---|
| Default | Color y contraste base |
| Hover | Variación sutil de fondo |
| Focus | Contorno verde de 3 px visible por teclado |
| Disabled | Gris, sin interacción |
| Loading | Texto «Enviando…» y bloqueo temporal de acción |
05 / COMPONENTES
Tarjeta de producto
Fotografía sin deformación, título, descripción breve y precio mayorista. Esta muestra utiliza un fondo gráfico ilustrativo, no una fotografía de producto real.
RAKI
Imagen 4:3 · object-fit: cover para miniaturas de catálogo · tarjetas de 12 px de radio · carga diferida cuando no están en el primer bloque visible.
06 / COMPONENTES
Formulario de cotización
Campos con etiquetas visibles, ayuda contextual y mensajes de error. El selector nativo usa texto limpio, sin emojis.
Demostración visual: este formulario no envía datos.
07 / COMPONENTES
Carrusel y navegación
Área a ancho completo, imágenes proporcionadas mediante object-fit: contain y controles accesibles. Este ejemplo usa diapositivas gráficas.
● ○ ○
Movimiento reducido: no iniciar autoplay cuando el usuario prefiere reducir animaciones. Detenerlo al perder visibilidad o al interactuar.
08 / SISTEMA
Responsive y accesibilidad
| Contexto | Reglas |
|---|---|
| Escritorio ≥ 1024 px | Hasta cuatro tarjetas por fila; contenedor de 1100 px; iconos de 22 px. |
| Tablet 641–1023 px | Dos o tres tarjetas según ancho; controles fluidos; carrusel de altura flexible. |
| Móvil ≤ 640 px | Una o dos tarjetas según espacio; formularios de una columna; iconos de 20 px. |
| Pie de página | Iconos de 17 px; contactos apilados en móvil. |
| Accesibilidad | Foco visible, etiquetas asociadas, contraste suficiente, navegación por teclado y reduced motion. |
Guía de implementación: conservar tokens en :root, usar SVG lineales en lugar de emojis y evitar estilos específicos duplicados. El UI Kit es documentación de diseño; no sustituye la validación de rendimiento y accesibilidad del sitio.