Design System · Guía viva

Biblioteca de componentes

Todos los componentes del e-commerce, en aislamiento, con su código y los tokens (CSS Custom Properties) que los controlan.

Recursos del proyecto

El espacio de diseño fuente de este sistema y el código del proyecto.

Repositorio · GitHub

Código fuente del brand hub y el e-commerce.

Ver en GitHub ↗

Colores / Tokens

La paleta desaturada de marca y los tres modificadores de territorio. Nunca uses hex directo: siempre var(--token).

Brand Primaryvar(--color-brand-primary)
BG Mainvar(--color-bg-main)
Text Darkvar(--color-text-dark)
Text Mutedvar(--color-text-muted)
Contenciónvar(--color-territorio-contencion)
Memoriavar(--color-territorio-memoria)
Renacervar(--color-territorio-renacer)
Linevar(--color-line)

Tipografía

Serif elegante (Playfair Display) para títulos; sans limpia (Inter) para lectura.

--font-titles · --fs-3xl · Playfair Display
Acompañamos momentos
--font-titles · --fs-xl
Un lenguaje físico para los instantes
--font-body · --fs-md · Inter
Cada caja nace de una pregunta: ¿qué necesita sentir quien la recibe? La tipografía de lectura es limpia, cálida y de alto contraste.
.overline · --fs-2xs · uppercase
Sistema de acompañamiento

Átomo · Botones

Bordes tipo píldora (--radius-button), hover suave, sin bordes toscos.

Botón primario Botón oscuro Secundario Ghost 
<a class="btn btn--primary">Botón primario</a>
<a class="btn btn--dark">Botón oscuro</a>
<a class="btn btn--secondary">Secundario</a>
Clases: .btn + .btn--primary / .btn--dark / .btn--secondary / .btn--ghostRadio: --radius-button

Átomo · Formularios

Inputs minimalistas de borde delgado y foco cálido. Incluye contador de caracteres.

<div class="field">
  <label class="label">Nombre</label>
  <input class="input" placeholder="Escribe aquí…">
</div>
Clases: .field, .label, .input, .textarea, .select

Átomos · Píldoras, Tags y Rating

Píldoras interactivas para adicionales; tags cromáticos por territorio; valoración.

Contención Memoria Renacer ★★★★★ 7 Reseñas 
<button class="pill is-selected">Seleccionada</button>
<span class="tag tag--contencion">Contención</span>
Píldora: .pill + .is-selectedTags: .tag--{territorio}

Organismo · Tarjeta de producto

Dos variantes sobre la misma base .product-card: la completa (catálogo · PLP) con descripción, aviso de stock y botón "Agregar al carro" que aparece al hover; y la mini (home), más compacta. El precio va en sans-serif sin sufijo CLP y el título enlaza al detalle.

Completa · Catálogo

Memoria Caja Memoria

Caja Memoria

Portarretrato, vela y cuaderno de recuerdos para honrar lo que fue.

Quedan 10 unidades

$42.000

Mini · Home

<!-- Completa (catálogo) -->
<article class="product-card" data-territory="memoria">…
  <button class="product-card__add btn btn--dark">Agregar al carro</button>
</article>

<!-- Mini (home) -->
<article class="product-card product-card--mini" data-territory="memoria">…</article>
Completa: .product-cardMini: .product-card--miniCTA hover: .product-card__addAgotado: .product-card--soldout