Sal ManglarGarlic & Herb
- Para qué
- Para pescados, mariscos y arroces.
- Bolsa
- #06744E · letra crema encima 5,40:1
- Acento
- #007B4E · como letra sobre blanco 5,33:1, sirve para texto
1 · El toldo y el logo
El toldo abre todo.
La franja roja y blanca del toldo encabeza cada pieza de EE. UU. y corre por las cuatro bolsas: lado a lado, sigue de una a la otra. El logo va completo, con ™ en EE. UU., y se monta: nunca se redibuja.
Los colores de la casa
Cinco colores para todo lo que no es de un sabor.
Crema #FBF6EEEl fondo. Hace que todo se vea comestible, no gritón. --cream-100
Blanco #FFFFFFTarjetas y láminas de lectura, sobre la crema. --white
Tinta #141414Texto y logo; de fondo solo en portadas y cierres. --ink-900
Rojo tomate #E62020El toldo. Señal: botones, subrayados, el llamado a la acción. --red-500
Verde hoja #97C12ALa hoja-visto: natural, aprobado. Acento, nunca campo. --green-400
- 60
- crema y blanco: fondo y lectura
- 30
- tinta: texto, portadas y cierres
- 10
- rojo: acción · verde: acento
2 · Un color por sabor
Cuatro sales, cuatro colores.
El toldo es de todos; el color es de una sola sal. Cada una tiene dos tonos: el de la bolsa impresa, que aguanta letra crema encima, y el acento, para el catálogo, la web y las redes. Las cifras de contraste salen de la fórmula WCAG, no del ojo.
Sal OlivoBasil & Oregano
- Para qué
- Para pastas, pizzas y ensaladas.
- Bolsa
- #656C2A · letra crema encima 5,23:1
- Acento
- #7A8C1F · como letra sobre blanco 3,75:1, solo en letra grande
Sal MasalaCurry Spice
- Para qué
- Para pollo, arroces y guisos.
- Bolsa
- #8A5827 · letra crema encima 5,57:1
- Acento
- #D98A00 · como letra sobre blanco 2,77:1, nunca como letra: solo color
Sal RobleSmoked Grill
- Para qué
- Para carnes, costillas y asados.
- Bolsa
- #702F2E · letra crema encima 9,14:1
- Acento
- #69361B · como letra sobre blanco 9,79:1, sirve para texto
Un color de sabor por pieza, nunca dos.
3 · La letra
Dos letras, nada más.
Las dos se sirven desde esta misma web, sin depender de nadie.
Poppins
Títulos y cifras. Geométrica y redondeada: hace eco del logotipo.
- 600 Sazón
- 700 Sazón
- 800 Sazón
Mulish
Texto, citas y etiquetas. Humanista: se lee fácil hasta en la letra chica de la bolsa.
- 400 Sazón
- 600 Sazón
- 700 Sazón
- 800 Sazón
Muestra viva. Toca el texto y escribe el tuyo: sale en Poppins, como un título del sistema.
Echa, prueba, atrévete.
La escala
- --text-2xs · 11 pxSabor latino de verdad, sin química.
- --text-xs · 12 pxSabor latino de verdad, sin química.
- --text-sm · 14 pxSabor latino de verdad, sin química.
- --text-base · 16 pxSabor latino de verdad, sin química.
- --text-md · 18 pxSabor latino de verdad, sin química.
- --text-lg · 22 pxSabor latino
- --text-xl · 28 pxSabor latino
- --text-2xl · 36 pxSabor latino
- --text-3xl · 46 pxSabor
- --text-4xl · 60 pxSabor
- --text-5xl · 76 pxSabor
4 · Las piezas
Como viven en la web.
Copiadas de la web en vivo, no redibujadas: el mismo CSS de /usa y de /r.
Botón
Píldora, rojo para la acción. Tres alturas: 58, 48 y 38 px. .btn--pri · .btn--sec · .btn--lg · .btn--md · .btn--sm
Etiqueta
Primera corrida de EE. UU.
100% naturalSin conservantes ni aditivosUna bolsa de 100 g dura semanasNueva · Primera corrida EE. UU.
El antetítulo abre cada bloque; las etiquetas verdes dicen lo natural, y la verde hoja, lo nuevo. .eyebrow · .chip--natural · .chip--nueva
Tarjeta de receta
La categoría en rojo, la sal en verde. .rw-card · en vivo en /r
Todo el texto de esta página pasa AA (4,5:1; 3:1 en letra grande), medido con la fórmula WCAG. Para lograrlo en letra chica, el rojo sobre crema baja de --red-500 a --red-600 (de 3,90:1 a 4,91:1).
5 · El empaque
Cuatro bolsas, una calle.
El empaque de la primera corrida de EE. UU. Lado a lado, el toldo sigue de una bolsa a la otra y forman una calle. Cada bolsa lleva un QR a su página.
Sal Olivo
Sal Masala
Sal Roble6 · Cómo se usa
Tres reglas.
El fondo es claro y el rojo es señal.
Crema de fondo y blanco para leer. El rojo tomate va solo en lo que se toca—botones, subrayados, el llamado—y el verde es acento, nunca campo.
Un color de sabor por pieza, nunca dos.
El toldo es de todos; el color es de una sola sal, y viaja con ella de la bolsa a la web.
La letra se compone, no se dibuja.
Poppins para títulos, Mulish para leer, y ninguna tercera. El logo se monta, y ninguna imagen lleva letra generada.