---
version: "2.0"
name: "Athena Swim"
description: "Identidad de swimwear de lujo: elegancia drapeada, empoderada por las olas. Azul océano profundo como lienzo, oro como acento precioso y una serif display de alto contraste editorial. Femenina, mediterránea y premium."
colors:
  primary: "#CBA24A"
  secondary: "#EED7CB"
  accent: "#D99E36"
  neutral: "#E8ECF4"
  background: "#0B1C35"
  surface: "#162333"
  text-primary: "#ECEFF4"
  text-secondary: "#AEB8C6"
  border: "#243349"
typography:
  display-lg:
    fontFamily: "North Roland"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "60px"
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "Figtree"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "Figtree"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "16px"
    letterSpacing: "0.22em"
rounded:
  sm: "2px"
  md: "4px"
  lg: "6px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "56px"
  gap: "24px"
  section-padding: "112px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "15px 30px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    border: "1px solid {colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "15px 30px"
  button-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "0px"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    borderRadius: "{rounded.lg}"
    padding: "28px"
    boxShadow: "0 22px 54px -22px rgba(0,0,0,0.6)"
---

# DESIGN.md — Athena Swim

> Sistema de diseño extraído del board **Athena Swim — Brand Identity (Dubai, 2025)**.
> Formato DESIGN.md v2: frontmatter YAML de tokens (legible por máquina) + secciones narrativas (legibles por humano y agente).
> Fuente: brand identity estático (logo metálico, paleta nombrada, tipografía y aplicaciones de retail/editorial). Hex verificados por muestreo de píxeles. Motion/WebGL/ThreeJS se completan o se omiten según lo que la fuente documenta.

---

## 1. Tema Visual y Atmósfera

Athena Swim es una marca de swimwear de lujo con alma mediterránea. La identidad vive sobre un **azul océano profundo** (deep ocean) y se ilumina con **oro**: un monograma metálico de la letra A coronada por una estrella, envuelto por el wordmark **ATHENA SWIM** en serif de alto contraste. El conjunto evoca *draped elegance, empowered by the waves*: telas que caen, luz dorada sobre la piel, arena y mar. Es femenino, sofisticado y editorial, más cercano a una portada de revista de moda que a un catálogo de producto.

La paleta nombrada lo dice todo: **White Sand**, **Blush Sand**, **Golden Star** y **Deep Ocean**. El oro nunca grita: aparece como filete fino, foil o el monograma, siempre como material precioso y escaso sobre el azul. La fotografía (playa, arena, agua, piel) es protagonista y se enmarca con generoso espacio en blanco.

**Palabras clave de personalidad**: elegante, femenino, lujoso, mediterráneo, editorial, sereno.

**Densidad del layout**: spacious (editorial, mucho aire).

**Modo preferido**: oscuro (deep ocean como lienzo; existen aplicaciones claras sobre white sand).

**Nivel de ornamentación**: refinado. El detalle es el oro y la serif de contraste; sin texturas pesadas ni gradientes vistosos (solo el brillo metálico del logo).

**Audiencia visual objetivo**: clientas premium de swimwear y moda de playa; segmento aspiracional de lujo.

---

## 2. Paleta de Colores y Roles Semánticos

Paleta de 4 colores nombrados por la marca + el oro metálico del logo. Hex verificados por muestreo.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Gold (Primario) | `--color-primary` | `#CBA24A` | Acento precioso, CTAs, filetes, monograma | `#0B1C35` |
| Gold hover | `--color-primary-hover` | `#D9B45E` | Estado hover del primario | `#0B1C35` |
| Gold activo | `--color-primary-active` | `#B68C39` | Estado pressed del primario | `#0B1C35` |
| Golden Star (swatch) | `--color-gold-star` | `#D99E36` | Oro nombrado de la paleta, highlights | `#0B1C35` |
| Champagne (metálico) | `--color-champagne` | `#DECCA5` | Brillo del logo / foil (highlight) | `#0B1C35` |
| Blush Sand (Secundario) | `--color-secondary` | `#EED7CB` | Neutro cálido, fondos suaves, detalles | `#0B1C35` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Deep Ocean (Fondo) | `--color-bg` | `#0B1C35` | Background de página (lienzo principal) |
| Superficie | `--color-surface` | `#162333` | Cards, paneles |
| Superficie elevada | `--color-surface-raised` | `#1D2C40` | Dropdowns, popovers |
| White Sand | `--color-white-sand` | `#E8ECF4` | Superficies claras, modo claro, negative space |
| Borde | `--color-border` | `#243349` | Divisores, bordes de card/input |
| Borde sutil | `--color-border-subtle` | `#19273B` | Separadores ligeros |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| White Sand (principal) | `--color-text` | `#ECEFF4` | Body text, headings sobre océano |
| Texto secundario | `--color-text-secondary` | `#AEB8C6` | Descriptions, subtítulos |
| Texto muted | `--color-text-muted` | `#76829A` | Placeholders, metadata |
| Texto sobre primario | `--color-text-on-primary` | `#0B1C35` | Texto en botones oro |
| Texto en modo claro | `--color-text-dark` | `#0B1C35` | Body sobre White Sand |

### Colores de estado

> El board no documenta estados; se derivan con sobriedad (oro = atención/éxito editorial, blush como info suave, un rojo apagado para error). Marcados como derivados.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#7FA38C` | `#0B1C35` |
| Advertencia | `--color-warning` | `#D99E36` | `#0B1C35` |
| Error | `--color-error` | `#C26A63` | `#0B1C35` |
| Info | `--color-info` | `#AEB8C6` | `#0B1C35` |

---

## 3. Reglas de Tipografía

Dos familias: **North Roland Regular** (display serif, propietaria) para titulares y el wordmark, y **Figtree** (Google Fonts, documentada por la marca) para el cuerpo y la UI.

### Familias tipográficas

```css
/* Display: North Roland Regular — serif editorial de alto contraste, draped elegance.
   Wordmark y titulares. Sustituto Google Fonts: Prata (didone elegante, alto contraste). */
--font-heading: 'Prata', serif;

/* Body: Figtree — sans humanista limpia, neutral, muy legible. */
--font-body: 'Figtree', sans-serif;

/* Labels / UI: Figtree 600 con tracking amplio (eyebrows en mayúsculas). */
--font-label: 'Figtree', sans-serif;
```

**Google Fonts:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Prata&family=Figtree:wght@300;400;500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**:
- **Display** — Original **North Roland Regular** (serif editorial, propietaria) → **Prata**. Se eligió una didone elegante de alto contraste que conserva la voz de moda/lujo del original, evitando los defaults obvios (Playfair, Bodoni, Cormorant). Para producción con licencia, sustituye por `North Roland` real.
- **Body** — **Figtree** está documentada literalmente por la marca y es Google Font, así que se usa **sin sustitución**.

### Pesos tipográficos

```css
/* Prata (North Roland): un peso display (Regular 400), usado grande y con aire */
--font-display: 400;
/* Figtree */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Escala tipográfica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | ~12px | 1.5 | Captions, eyebrow, metadata |
| `--text-sm` | 0.875rem | ~14px | 1.5 | Labels, helper text |
| `--text-base` | 1rem | 16px | 1.65 | Body text (Figtree) |
| `--text-lg` | 1.125rem | ~18px | 1.6 | Intro paragraphs |
| `--text-xl` | 1.375rem | ~22px | 1.4 | Subheadings (Prata) |
| `--text-2xl` | 1.75rem | ~28px | 1.3 | Títulos de card (Prata) |
| `--text-3xl` | 2.25rem | ~36px | 1.2 | H2 (Prata) |
| `--text-4xl` | 3rem | ~48px | 1.1 | H1 (Prata) |
| `--text-5xl` | 3.5rem | ~56px | 1.05 | Display / hero (Prata) |

### Letter spacing

```css
--tracking-tight: 0em;       /* Display Prata (la serif ya tiene su ritmo) */
--tracking-normal: 0em;      /* Body Figtree */
--tracking-luxe: 0.22em;     /* Eyebrow / wordmark en mayúsculas (ATHENA SWIM) */
```

> El wordmark y los eyebrows van en **mayúsculas con tracking amplio** (0.18–0.24em): es el gesto tipográfico de lujo de la marca.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)        /* #CBA24A oro */
Color de texto: var(--color-text-on-primary)  /* #0B1C35 deep ocean */
Padding: 15px 30px
Border-radius: var(--radius-sm)         /* 2px — refinado, casi recto */
Font: Figtree 600, var(--text-xs), uppercase, tracking 0.18em
Transición: all 200ms ease

Hover:    Background var(--color-primary-hover)  /* #D9B45E */
Active:   Background var(--color-primary-active); transform translateY(1px)
Disabled: opacity 0.5; cursor not-allowed
Focus:    outline 2px solid var(--color-primary); outline-offset 2px
```

**Secundario (outline oro sobre océano)**
```
Background: transparent
Color de texto: var(--color-text)       /* #ECEFF4 */
Border: 1px solid var(--color-primary)  /* oro fino */
Padding y radius iguales al primario
Hover: background rgba(203,162,74,0.10); color var(--color-primary)
```

**Ghost / Link**
```
Background: transparent
Color de texto: var(--color-primary)
Border: none
Hover: subrayado fino oro
```

### Inputs de texto

```
Background: var(--color-surface)        /* #162333 */
Border: 1px solid var(--color-border)
Border-radius: var(--radius-sm)         /* 2px */
Padding: 13px 16px
Color: var(--color-text)
Placeholder: var(--color-text-muted)
Focus: border-color var(--color-primary); box-shadow 0 0 0 3px rgba(203,162,74,0.22)
```

### Cards

```
Background: var(--color-surface)        /* #162333 */
Border: 1px solid var(--color-border)   /* #243349 */
Border-radius: var(--radius-lg)         /* 6px */
Padding: var(--space-7)                 /* 28px */
Box-shadow: 0 22px 54px -22px rgba(0,0,0,0.6)

Detalle de lujo: filete oro fino (1px) en un borde o bajo el título;
fotografía a sangre con overlay océano para los productos.
```

### Badges / Chips

```
Padding: 5px 12px
Border-radius: var(--radius-sm)         /* 2px */
Font: Figtree 600, var(--text-xs), uppercase, tracking 0.14em
Default:  background var(--color-surface-raised); color var(--color-text-secondary)
Gold:     background transparent; border 1px solid var(--color-primary); color var(--color-primary)
Blush:    background rgba(238,215,203,0.14); color var(--color-secondary)
```

### Navegación / Header

```
Background: var(--color-bg)
Border-bottom: 1px solid var(--color-border)
Logo: monograma A oro + wordmark "ATHENA SWIM" (serif, mayúsculas, tracking)
Links: Figtree 600, var(--text-xs), uppercase, tracking 0.18em
  Color: var(--color-text-secondary)
  Hover: var(--color-text)
  Active: var(--color-primary)
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;     /* base */
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;    /* gap entre componentes */
--space-7: 28px;    /* card padding */
--space-10: 40px;
--space-14: 56px;   /* separación entre bloques */
--space-20: 80px;
--space-28: 112px;  /* separación entre secciones (editorial) */
```

### Contenedores

```css
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
```

### Grid

```
Sistema: 12 columnas con gutter de 24px.
Maquetación editorial de moda: hero centrado, grids de imágenes a sangre,
secciones amplias con titular serif y eyebrow en mayúsculas con tracking.
```

### Filosofía de espaciado

Generosa y editorial. El aire negativo es lujo: aísla la fotografía y deja respirar el monograma y los titulares serif. La composición se siente como una revista de moda, no como una ficha de producto; el ritmo es pausado y aspiracional.

---

## 6. Profundidad y Elevación

### Sistema de sombras

```css
--shadow-none: none;
--shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
--shadow-md: 0 12px 30px -12px rgba(0,0,0,0.5);
--shadow-lg: 0 22px 54px -22px rgba(0,0,0,0.6);
--shadow-xl: 0 34px 70px -24px rgba(0,0,0,0.68);
```

La profundidad es suave y cinematográfica: superficies azul océano elevadas (`#162333`) sobre el deep ocean base, con bordes hairline (`#243349`), un posible **filete oro** de 1px como acento, y sombras difusas. Sin glow ni gradientes chillones; el único "brillo" es el oro metálico del logo (champagne→oro), tratado como foil.

### Niveles de elevación

| Nivel | Token | Uso |
|-------|-------|-----|
| 0 — Base | `--shadow-none` | Página (#0B1C35) |
| 1 — Raised | `--shadow-sm` | Cards, tiles |
| 2 — Floating | `--shadow-md` | Dropdowns, tooltips |
| 3 — Overlay | `--shadow-lg` | Cards destacadas, popovers |
| 4 — Modal | `--shadow-xl` | Modals, lookbook overlays |

### Radios de borde

```css
--radius-sm: 2px;     /* botones, inputs, chips — refinado, casi recto */
--radius-md: 4px;     /* controles medianos */
--radius-lg: 6px;     /* cards, paneles */
--radius-full: 9999px; /* uso puntual (avatares, dots) */
```

El radio predominante es **2–6px**: casi recto, editorial y elegante. La sofisticación no viene del redondeo sino del contraste océano/oro, la serif y el espacio. El único trazo curvo protagonista es el monograma caligráfico del logo.

---

## 7. Lo que Sí y lo que No

### ✅ Hacer

1. **Tratar el oro como material precioso y escaso** — monograma, filetes finos, un CTA; su rareza es lo que lo hace lujoso.
2. **Mantener el deep ocean como lienzo** y el white sand para el texto, con mucho aire editorial.
3. **Usar North Roland (Prata) para titulares y wordmark** en mayúsculas con tracking amplio; reserva la serif para momentos de marca.
4. **Usar Figtree para todo el cuerpo y la UI** — neutral y legible bajo la serif.
5. **Dejar protagonizar la fotografía** (mar, arena, piel) con encuadre amplio y overlay océano.
6. **Respetar la paleta nombrada** (White Sand, Blush Sand, Golden Star, Deep Ocean) sin introducir colores ajenos.

### ❌ No hacer

1. **No abusar del oro** ni usarlo en grandes superficies; pierde su valor y abarata la marca.
2. **No bajar el contraste** (oro pálido sobre navy claro, texto gris medio sobre océano).
3. **No deformar el monograma** ni recortar el clearspace del logo.
4. **No usar tipografías pesadas o geométricas** que rompan la elegancia de la serif.
5. **No introducir colores saturados** fuera de la paleta nombrada.
6. **No saturar el layout** — el lujo necesita aire; el apretujamiento lo destruye.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
@media (min-width: 640px)  { } /* sm */
@media (min-width: 768px)  { } /* md */
@media (min-width: 1024px) { } /* lg */
@media (min-width: 1280px) { } /* xl */
```

### Cambios por breakpoint

**Mobile (< 640px)** — Nav: monograma + menú; hero centrado a 1 columna; imágenes full-width; display Prata baja a `--text-4xl`; padding `--space-4`. La tienda y el lookbook son mobile-first.

**Tablet (640–1024px)** — grids de 2 columnas; H1 `--text-4xl`; padding `--space-6`.

**Desktop (> 1024px)** — nav completa; editorial 2-3 columnas; display hasta `--text-5xl`; contenedor con max-width centrado y mucho margen.

### Touch targets (mobile)

- Botones mínimo 44×44px · Links de nav mínimo 48px · Inputs mínimo 44px.

### Filosofía responsive

El sistema escala de la pantalla a la pieza física (etiquetas colgantes, packaging con foil, mupis, tabla de surf de marca) conservando el oro, el deep ocean y la serif en cada touchpoint. Mobile-first para e-commerce y lookbook, manteniendo el aire editorial.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```
Estás trabajando con el sistema de diseño de Athena Swim (swimwear de lujo).

PALETA: Oro #CBA24A (Golden Star #D99E36 / champagne #DECCA5) como acento precioso sobre Deep Ocean #0B1C35, con texto White Sand #ECEFF4 y Blush Sand #EED7CB como neutro cálido.
TIPOGRAFÍA: Display North Roland (sustituto Prata, serif de alto contraste) para titulares y wordmark en mayúsculas con tracking; Figtree para cuerpo y UI.
ESTILO: elegante, femenino, editorial, mediterráneo. "Draped elegance, empowered by the waves." Aire generoso, fotografía protagonista.
TOKENS: usa siempre las variables CSS. El oro es escaso y precioso, nunca relleno. Sistema casi recto (radios 2–6px).
MODO: oscuro (deep ocean).
```

### Prompt: Crear nueva pantalla

```
Crea una pantalla de [FUNCIONALIDAD] para Athena Swim.
- Sigue el DESIGN.md adjunto y sus tokens.
- Deep ocean de fondo, oro como acento escaso, mucho aire editorial.
- Prata para titulares en mayúsculas con tracking, Figtree para el resto.
- Fotografía a sangre con overlay océano. Responsive mobile-first.
```

### Prompt: Revisión de consistencia

```
Revisa esta interfaz y señala qué NO sigue el sistema Athena Swim:
[CÓDIGO O DESCRIPCIÓN]
Para cada problema: el elemento, por qué viola el sistema (¿oro como relleno?, ¿bajo contraste?, ¿serif pesada o geométrica?, ¿color fuera de paleta?, ¿layout apretado?), y la corrección con los tokens correctos.
```

---

## 10. Movimiento (Motion)

> La fuente es un brand identity estático (incluye un loader/spinner en una mockup, pero no una guía de motion). Lo que sigue es una escala mínima **propuesta**, coherente con la atmósfera elegante y pausada. Marcada como derivada.

El movimiento debe sentirse suave, lento y elegante, como tela que cae o agua que se mueve: fades largos, reveals sutiles de imagen, transiciones de hover delicadas. Nada brusco ni mecánico.

**Nivel de motion**: subtle.

**Duraciones**: 200ms (micro), 360ms (estándar), 600ms (reveals editoriales).

**Easings**: `cubic-bezier(0.22, 1, 0.36, 1)` (suave), `ease-in-out` para fades.

**Propiedades animadas en hover**: color, border-color, opacity, transform (zoom lento de imagen, lift 1px).

**Patrones**: fade-in editorial de bloques, zoom lento en hover de imagen, subrayado oro que crece, loader minimal.

```css
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 200ms;
--duration-base: 360ms;
--duration-slow: 600ms;
```

> **Accesibilidad**: respeta siempre `@media (prefers-reduced-motion: reduce)`.

---

## Anexo: Stack técnico detectado

> El board no expone tecnología de implementación (es una pieza de identidad). Inferencias de aplicación:

- **Plataforma / builder**: no especificado en la fuente.
- **Aplicaciones documentadas**: e-commerce / lookbook móvil (con loader minimal), etiquetas colgantes, packaging con foil oro, publicidad exterior (mupi), redes sociales y una tabla de surf de marca.
- **Animación**: no documentada (ver Sección 10, propuesta).
- **3D / WebGL / ThreeJS**: no aplica (la fuente no usa gráficos 3D). Secciones 11 y 12 omitidas.