Design System — v1.0.0 — 2026

NOIR ATELIER

Alta Costura Madrid  ·  Sistema de Diseño Digital  ·  Luxury Dark Premium

01 — Contexto y Objetivos

Diseño para la Excelencia

Este sistema de diseño establece los fundamentos visuales y de interacción para la presencia digital de NOIR ATELIER. Cada decisión está orientada a transmitir exclusividad, modernidad y una experiencia sensorial que refleja la artesanía de la colección física.

Principios de Diseño
◈
Silencio Activo
El espacio en blanco comunica lujo. Nunca llenar por llenar.
◈
Jerarquía sin Ambigüedad
Cada elemento debe saber su lugar. El peso tipográfico es la herramienta principal.
◈
Accesibilidad sin Concesiones
WCAG 2.1 AA como mínimo. El lujo no excluye.
Stack de Implementación
Framework Next.js 14
Estilos Tailwind CSS
Diseño Figma
Tipografía Oswald + JetBrains Mono
WCAG 2.1 AA ✓
02 — Tokens de Color

Paleta Monocromática

Sistema de color basado en la dualidad negro absoluto y blanco casi puro, con un gold discreto como único acento cromático. Los tokens de color son la única fuente de verdad — nunca usar valores hexadecimales directamente en componentes.

Fondos (Surface)
AAA
--color-surface
#000000
Fondo principal
AAA
--color-surface-01
#0A0A0A
Tarjetas, modales
AA
--color-surface-02
#111111
Inputs, código
AA
--color-surface-03
#1A1A1A
Hover states, capsules
Texto y Primario
AAA
--color-primary
#FAFAFA
Texto principal, botón primario
AA
--color-text-muted
#9A9A9A
Descripciones, metadatos
AA
--color-accent
#C8A96E
CTA, hover, etiquetas
—
--color-border
#2A2A2A
Separadores, bordes
Estados Semánticos
AA
--color-success
#16A34A
Confirmaciones, stock
AA
--color-warning
#D97706
Últimas unidades, avisos
AA
--color-danger
#DC2626
Errores, agotado
03 — Escala Tipográfica

Oswald — La Voz de la Marca

Tipografía expresiva desktop-first con grid de 8pt. Los titulares en Oswald condensed crean impacto vertical. JetBrains Mono para metadatos y etiquetas técnicas. Todo en mayúsculas con letter-spacing controlado.

Display
Oswald · 5rem / 80px · weight 200 · tracking 0.1em
NOIR ATELIER
H1 — Hero
Oswald · 3rem / 48px · weight 700 · tracking 0.06em
Colección Otoño 2026
H2 — Sección
Oswald · 2.25rem / 36px · weight 500 · tracking 0.08em
Nuevos Ingresos
H3 — Producto
Oswald · 1.75rem / 28px · weight 400 · tracking 0.05em
Abrigo Cachemira Doble
Body — Descripción
Oswald · 1rem / 16px · weight 300 · tracking 0.02em · line-height 1.7
Confeccionado a mano en Milán con cachemira de grado A procedente de Mongolia interior, este abrigo representa la cúspide de la artesanía contemporánea. Cada pieza requiere 80 horas de trabajo de nuestros maestros sastres.
Label / Mono
JetBrains Mono · 0.6875rem / 11px · weight 500 · tracking 0.25em · uppercase
Nueva Colección · Edición Limitada · 12 piezas
04 — Espaciado

Grid de 8pt

Todo el espaciado se deriva de múltiplos de 8px. El grid de 8pt garantiza consistencia visual y facilita la comunicación entre diseñadores e ingenieros.

--space-1
4px · 0.25rem
--space-2
8px · 0.5rem
--space-3
12px · 0.75rem
--space-4
16px · 1rem
--space-5
24px · 1.5rem
--space-6
32px · 2rem
--space-7
48px · 3rem
--space-8
64px · 4rem
--space-9
96px · 6rem
--space-10
128px · 8rem
05 — Componentes

Navegación Principal

Barra de navegación sticky con backdrop blur. Altura fija de 72px. Logo izquierda, links centro, acciones derecha. Touch target mínimo 44px en todos los elementos interactivos.

CSS Custom Props — Nav 
/* Navigation states */
.nav-link {
  color: var(--color-text-muted);
  transition: color 120ms ease;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-primary);
  outline: 2px solid var(--color-accent);
}
.nav-link.active {
  color: var(--color-primary);
}
06 — Componentes

Botones

Sistema de botones con 4 variantes. Mínimo 44px de altura (touch targets). Siempre uppercase con letter-spacing 0.2em para legibilidad. Focus ring obligatorio para teclado.

Variantes
Tamaños
Anatomía del Botón
· Padding horizontal: mín. var(--space-6)
· Altura mínima: 44px (touch target)
· Fuente: Oswald Medium, 14px, uppercase
· Letter-spacing: 0.2em
· Border-radius: var(--radius-sm) = 2px
· Transition: all 240ms ease
Estados Requeridos
✓ Default
✓ Hover — color shift + shadow
✓ Focus-visible — outline 2px accent
✓ Active — scale(0.98)
✓ Disabled — opacity 0.5, no pointer
· Loading — spinner opcional
07 — Componentes

Tarjetas de Producto

Ratio 3:4 para imagen de producto (portrait, orientación editorial). Overlay con acción primaria aparece en hover. Información estructurada: colección > nombre > precio.

NA
Otoño / Invierno 2026
Abrigo Cashmere Milano
€ 3.850
NA
Le Sac — Edición Limitada
Bolso Cuero Artesanal
€ 1.290
NA
Última Unidad
Capsule — Pieza Única
Traje Bespoke Madrid
€ 5.200
08 — Componentes

Formularios

Inputs con altura mínima 48px. Labels en JetBrains Mono uppercase. Estado focus con outline gold. Errores inline inmediatamente bajo el campo.

Solicitar Cita Privada
✕  Introduce un email válido
Describe brevemente la prenda o el servicio que te interesa.
09 — Accesibilidad

WCAG 2.1 AA

Todos los pares de color deben superar el ratio mínimo de contraste WCAG 2.1 AA (4.5:1 para texto normal, 3:1 para texto grande y elementos de interfaz). Ninguna excepción en nombre de la estética.

Ratios de Contraste
#
Primary (#FAFAFA) sobre Surface (#000)
21:1
AAA
#
Accent (#C8A96E) sobre Surface (#000)
7.3:1
AAA
#
Muted (#9A9A9A) sobre Surface (#000)
4.9:1
AA
#
Subtle (#555555) sobre Surface — solo decorativo
2.3:1
Decorativo
Reglas de Interacción
✓ Navegación completa por teclado (Tab, Enter, Escape)
✓ Focus-visible en todos los elementos interactivos
✓ Outline: 2px solid var(--color-accent) en focus
✓ Touch targets mínimo 44×44px
✓ HTML semántico antes de ARIA
✓ Alt text en todas las imágenes de producto
✓ Reducción de movimiento: @media (prefers-reduced-motion)
✓ High-contrast mode: @media (forced-colors)
· Text-subtle solo para elementos decorativos
· Animaciones: reducir/eliminar si prefers-reduced-motion
10 — Anti-Patrones

Prohibido en NOIR ATELIER

Errores comunes en e-commerce de lujo que destruyen la percepción de marca. Cada regla incluye el motivo de la prohibición.

✕
No usar colores de fondo intermedios (#333 – #666) en text-bearing surfaces
Los grises medios no alcanzan el ratio de contraste 4.5:1 requerido por WCAG AA. Usar solo los tokens definidos: surface (#000) o primary (#FAFAFA) como texto.
✕
No usar letter-spacing negativo en titulares
Oswald es condensed por diseño. El letter-spacing negativo colapsa los caracteres y destruye la legibilidad a pantallas pequeñas. Mínimo 0.04em en cualquier tamaño.
✕
No centrar bloques de texto descriptivo largos (+3 líneas)
El texto centrado largo genera "zig-zag" visual que dificulta la lectura. Solo títulos y elementos de UI cortos (1-2 líneas) en center. Descripciones: left-aligned siempre.
✕
No añadir segundos colores de acento sin validación del design system
El gold (#C8A96E) es el único acento cromático. Introducir otros colores de acento (rojo, azul, verde) rompe la coherencia monocromática que define el lujo de la marca.
✕
No usar border-radius mayor que 4px en componentes de producto
Los radios grandes (>8px) comunican playfulness y startup. Para lujo, la geometría debe ser angulosa y precisa. Radius permitidos: sm=2px, md=4px, solo pill para badges.
✕
No mostrar precios sin el símbolo € y formato europeo
El precio es parte de la propuesta de valor de lujo. Formato obligatorio: € 3.850 (espacio después del símbolo, punto como separador de miles, sin decimales si son .00).
11 — QA Checklist

Criterios de Aceptación

Checklist ejecutable en code review para cada pull request que incluya cambios de UI. Un componente no puede mergearse si algún punto obligatorio (●) está en rojo.

✓
● Contraste de texto ≥ 4.5:1 verificado con Chrome DevTools
✓
● Todos los valores de color usan tokens CSS (--color-*)
✓
● Touch targets ≥ 44px (height/width) en todos los interactivos
✓
● Focus-visible visible y con outline var(--color-accent)
✓
● Espaciado en múltiplos de 8pt (var(--space-*))
✓
● Tipografía usa fuentes del sistema (Oswald / JetBrains Mono)
　
● Navegación por teclado Tab→Enter funcional sin mouse
　
● HTML semántico: landmarks, headings en orden, lists
　
◦ Imágenes con alt text descriptivo (no decorative si tienen info)
　
◦ @media (prefers-reduced-motion) respetado en animaciones
　
◦ Responsive: layout no roto en 375px, 768px, 1440px
　
◦ Estados hover/focus/active/disabled implementados
Leyenda
● Obligatorio — bloquea el merge    ◦ Recomendado — se acepta con deuda técnica documentada
12 — Implementación

CSS Custom Properties

Referencia completa de tokens. Copiar en globals.css o convertir a tailwind.config.ts para el proyecto.

CSS — tokens.css 
/* ================================================
   NOIR ATELIER — Design Tokens v1.0.0
   ================================================ */
:root {
  /* Surface */
  --color-surface:       #000000;
  --color-surface-01:    #0A0A0A;
  --color-surface-02:    #111111;
  --color-surface-03:    #1A1A1A;
  --color-surface-04:    #242424;

  /* Typography */
  --color-primary:       #FAFAFA;
  --color-text:          #FFFFFF;
  --color-text-muted:    #9A9A9A;
  --color-text-subtle:   #555555; /* decorativo */
  --color-accent:        #C8A96E; /* gold */
  --color-accent-hover:  #E2C88A;
  --color-border:        #2A2A2A;
  --color-border-active: #FAFAFA;

  /* Semantic */
  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-danger:        #DC2626;

  /* Fonts */
  --font-primary:        'Oswald', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;

  /* Spacing — 8pt grid */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* Radii */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;
}