Design System, B/N

Color, escala neutra

Near-black / near-white, nunca puros (R26). 8 pasos para texto, fondos, bordes y estados.

Tipografía, ratio 1.4x

Máximo 2 typefaces: sans para UI, serif editorial para titulares de marca (pendiente de elegir tras aprobar fundaciones). Body en 16px para lectura larga de producto; UI chrome en 15px.

Párrafo de ejemplo a 70ch máximo: Nuestra tabla »Berta« combina sostenibilidad, sofisticación y funcionalidad, aportando un toque de lujo a la cocina. Cada tabla es una pieza hecha a mano, tratada con aceite certificado apto para alimentos.

Spacing, grilla de 4px

Radios, escala Sweet Grape

Anidación estricta: el radio del hijo = radio del padre − padding (R63). Nunca dos elementos anidados con el mismo radio.

Botones, 5 estados obligatorios

Normal, hover, focus-visible, active y disabled (R120) + loading. Radio --radius-lg (10px, no pill, anatomía Sweet Grape), peso 500, nunca 700.

Badges, estado del producto

1-2 palabras, decorativos (no clicables). Orden de precedencia cuando hay varios: oferta activa > stock bajo > nuevo (regla e-commerce de badges apilados).

Selector de variante, botones, nunca dropdown

Baymard/Polaris: los selectores de talla/tamaño deben exponerse como botones, no como <select>, reduce esfuerzo cognitivo y permite mostrar variantes agotadas tachadas en vez de ocultarlas.

Precio, jerarquía y tabular-nums

El precio es el dato más decisivo del PDP: mayor tamaño, mayor peso, cerca del CTA (NN/g). "Desde" antes de elegir variante, precio exacto tras seleccionar.

Formulario, label arriba, validación inline

Breadcrumbs

Solo cuando hay 3+ niveles: home → colección → producto.

Accordion, FAQ, exclusivo

Un item abierto a la vez. Contenido real extraído del catálogo. Usado en FAQ y en especificaciones de producto (cuidados, envío).

• ¿Cómo cuido mi tabla de madera maciza?
  Lavar a mano con agua tibia, secar de inmediato y tratar periódicamente con el aceite certificado apto para alimentos incluido en nuestras instrucciones de cuidado. Nunca lavavajillas ni remojo prolongado.
• ¿Cuánto tarda el envío?
  Los productos en stock se envían en 2-4 días hábiles. Los tamaños a medida ("Individuelle Größe") tienen un tiempo de producción de aproximadamente 3 meses.
• ¿Puedo devolver un producto a medida?
  Los productos con dimensiones estándar tienen 30 días de devolución. Los productos personalizados a medida están excluidos, al ser fabricados específicamente para ese pedido.

Cards de producto, borde, no sombra

Shadow o border, nunca ambos (R52). Elegimos border + fondo plano: más consistente con el material (madera, líneas rectas) que una sombra flotante. Orden: imagen → nombre → precio → CTA (regla de card de e-commerce).