§01Foundations

El sustrato. Antes de tocar componentes, estos tokens son la verdad operativa. Cualquier desviación tiene que justificarse (drop especial, colab, etc.) y volver al norte.

§01.1Color · troncales

Nueve tokens troncales que componen el 90% de la superficie de marca. El resto son variaciones operativas (badges, overlays, secciones puntuales).

Reglas de uso

• bg + ink es el chasis. 80% de la web/email vive aquí.
• cream para secciones alternas, cards "soft", contenedores destacados. Aporta calidez sin abandonar minimal.
• accent (azul Klein) es el color de marca activo. Badges sale, links, eyebrows, hero invertido. NO es decorativo, es funcional.
• alert (rojo) se reserva para momentos calientes: BFCM, alarma, drop final, urgencia justificada. NO en comms normales.
• deep (#000) para manifesto, footer, secciones inmersivas.
• success (verde) uso esporádico (confirmación, badge promo). Nunca como color de marca.

12 color schemes · del theme live

El theme define 12 schemes nombrados. Estos son los 7 troncales + 5 variantes con UUIDs. Cada scheme define background, foreground, primary button, secondary, input, variant. Aquí mostramos el preview de los 7 troncales.

Los schemes 8-12 son variantes con UUIDs usadas en secciones específicas (mismas variables base). El theme también incluye colores edge: #924a62 (rosa hover), #000f9f (azul marino borde).

§01.2Typography · Geist

Familia única: Geist (Vercel). Sans-serif moderna, geométrica, neutral pero con carácter sutil. Cinco pesos cubren toda la jerarquía. Geist Mono para eyebrow / código / "track marks". Cero serifs, cero italic display.

Reglas de uso

• Italic solo en <em> y <blockquote> como modulación de énfasis. Nunca como estilo display.
• Eyebrow / labels / tags / mono: uppercase obligatorio + letter-spacing alto (0.14-0.20em).
• Heading: kerning negativo (-0.01 a -0.04em). Display más apretado, body más relajado.
• Body line-height 1.5-1.65. Nunca menor que 1.4 en cuerpo de texto.
• Color del texto: --nos-ink para principal, --nos-ink-soft para secundario, --nos-ink-muted para captions.

§01.3Spacing

Sistema base 4px. El theme usa gaps pequeños (xs 8px → xl 20px) para alta densidad. Las escalas grandes (32-80px) se reservan para márgenes verticales entre bloques.

Gaps del theme

--nos-gap-xs 8px (0.5rem) · interior cards densas
--nos-gap-sm 11px (0.7rem) · grids producto
--nos-gap-md 14px (0.9rem) · default · cards content
--nos-gap-lg 16px (1rem) · separación bloques
--nos-gap-xl 20px (1.25rem) · respiración mayor

§01.4Border Radius · brutalist con guiños

La marca tiene un perfil "casi brutalist": esquinas duras o muy poco redondeadas (0-2px). Excepción: variant swatches (círculos perfectos) y pills (radius alto). Los inputs y popovers tienen 8px, una concesión a la usabilidad.

§01.5Shadow

Tres sombras del theme. Uso mínimo: brutalist no abusa de drop-shadow. Sombras solo para elevación funcional (popovers, hover de cards).

§01.6Motion

Tres velocidades. Hover de cards = lift 4px o scale 1.03. Transiciones siempre ease-out. Sin bouncing, sin sobreanimación.

• --nos-transition-fast · 150ms ease-out · estados de input, hover de pills
• --nos-transition-default · 250ms ease-out · cards, buttons, navegación
• --nos-transition-slow · 400ms ease-out · transformaciones grandes, modales
• --nos-hover-lift · 4px translateY arriba en hover de cards
• --nos-hover-scale · 1.03 scale alternativo en hover de productos

§02Components

Componentes que el sistema reconoce. Pueden recombinarse pero no editarse sin pasar por mantenedor del DS.

2.1 Buttons

<a class="btn primary">Shop</a>
<a class="btn secondary">See the drop</a>
<a class="btn variant">M</a>
<a class="btn variant-selected">L</a>

2.2 Pills · etiquetas no-CTA

2.3 Badges

2.4 Eyebrow / episode marker

episode 04 · game over? · 3:00 am

Marca el inicio de un capítulo, sección, email o drop. Geist Mono · 11-12px · uppercase · letter-spacing 0.18em · color --nos-accent · prefijo ▸.

2.5 Input

Geist body 14px · padding 12/14 · radius 8px · background warm-cream con opacidad · border --nos-warm-border.

2.6 Stripe · signature visual

Doble franja azul + rojo (6px). Recurrente arriba de header / encima de footer / arriba y abajo de arcade. Es el equivalente visual del wordmark.

2.7 Quote / blockquote

"Don't grow up, it's a trap. Growing up was a scam. We've been telling you for years."

2.8 Card

2.9 KPI block

2.10 Manifesto block

2.11 Arcade callback box · uso visual puntual

Regla josé (v0.5): componente reservado a piezas que ya referencien recreativas (drop temático gaming, banner con joystick, packaging especial). "INSERT COIN", "GAME OVER?", "PRESS START" NO entran en copy recurrente — el componente existe, su léxico no es léxico común.

2.12 Do / Don't split

§03Patterns · composiciones

Componentes ensamblados en bloques que aparecen repetidamente. Estos sí se pueden replicar como están.

3.1 Product grid · idéntico a la web real

Bordes negros 1px en los 4 lados de cada card, gap 0 (cards adyacentes comparten línea), aspect 4/5 portrait, fondo transparente (hereda del page bg), object-fit contain con padding generoso, título y precio en Geist 400 13px ink-soft.

3.2 Email template

3.3 Hero pattern

3.4 KPI strip

§04Logo system

Lockup horizontal único (mayo 2026). Pendiente F7: monograma, variantes social square, vertical.

Reglas de uso

• Safe zone: mantener un espacio mínimo equivalente a la altura del logo en todos sus lados.
• Tamaño mínimo: 32px de altura en pantalla. Por debajo se pierde legibilidad del wordmark.
• Fondo: usar versión color sobre fondos claros (bg/cream). Versión blanca sobre deep/accent/foto.
• NO: estirar, recortar, recolorear, añadir efectos, rotar, encajar en formas, combinar con otros logos sin separación.

§05Iconography

Set de iconos del theme. Stroke fino (1.5px), estilo geométrico minimal, coherente con Geist sans. Cuando se necesite un icono nuevo, mantener mismo grosor y estilo.

SVGs disponibles en nostalgic-design-system/assets/icon-*.svg. Versión completa del theme en /tmp/nostalgic-theme/assets/.

§06Anti-patterns

Lo que NO es Nostalgic. Si detectas alguno de estos en una pieza, devuélvela.

§07Export · cómo consumir el DS

Tres formas de usar este sistema desde tu proyecto.

7.1 Importar tokens CSS directamente

<link rel="stylesheet" href="https://.../nostalgic/tokens.css">

/* o si lo copias local */
@import url('./nostalgic/tokens.css');

/* Después usa las variables */
.headline {
  font-family: var(--nos-font-display);
  font-weight: var(--nos-weight-semibold);
  color: var(--nos-ink);
}

7.2 Consumir tokens.json desde tooling

// Style Dictionary, Figma Tokens, design tooling
import tokens from './nostalgic/tokens.json';

const accentColor = tokens.color.accent.$value; // "#2e4aa3"
const h1Size = tokens.typography.size.h1;        // "72px"

7.3 Componentes vivos (HTML/CSS)

Los componentes mostrados en §02 viven en este mismo HTML. Para reusar: copia el bloque relevante + asegúrate de importar tokens.css. No necesitas framework.

7.4 Archivos del sistema

/Desktop/nostalgic-design-system/
├── index.html         ← este documento (visual reference)
├── tokens.css         ← variables CSS reutilizables
├── tokens.json        ← tokens como JSON (tooling)
├── README.md          ← guía de uso
└── assets/
    ├── logo.png
    ├── logo-white.png
    ├── favicon.png
    └── icon-*.svg     ← set completo de iconos

7.5 Mantenimiento

Este DS se regenera desde el theme live de Shopify. Si la marca cambia algo en Shopify (color scheme, fuente, radius), hay que volver a hacer el pull y actualizar este DS. Owner: Adrian / Claude.