Athena Swim Brand Style Guide
← Color Fonts

Athena Swim System

Identidad de swimwear de lujo: deep ocean como lienzo, oro como acento precioso y una serif editorial de alto contraste. Elegancia drapeada, empoderada por las olas.

FUENTE: Athena-Swim-Brand-Identity-DESIGN.md

Typography

2 familias
Display system
Prata
Regular · 48px · serif de alto contraste · wordmark y titulares · sustituto de North Roland
Body system
Figtree
Light → Bold · 16px/1.65 body · cuerpo y UI
Luxury swimwear for the modern muse, where Mediterranean light meets the body in motion.
Original fonts: North Roland Regular (display serif, propietaria) → HTML: Prata (Google substitute, didone elegante). Figtree (body) está documentada por la marca y es Google Font, así que se usa sin sustitución.
Figtree LightRegularMediumSemiboldBold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 · ATHENA SWIM

Colors

Named · dark
Gold#CBA24A
Blush Sand#EED7CB
Deep Ocean#0B1C35
White Sand#E8ECF4

Background Deep Ocean #0B1C35 · Surface #162333 · Text White Sand #ECEFF4 · Border #243349 · Accent Gold #CBA24A (Golden Star #D99E36 · champagne #DECCA5) · Warm neutral Blush Sand #EED7CB

Overview

Editorial
LayoutEditorial de moda, spacious
Content width1280px máx, centrado
FramingDeep ocean + oro escaso, foto a sangre
Grid12 col · gutter 24px · hero centrado

Buttons

3 styles
Primary Secondary Link ↗
Primary#CBA24A · #0B1C35 · 2px
Secondaryoutline oro · 2px

Components

Live recipe
Bestseller · SS26
Green Goddess
US $89.00
Gold detail Limited In stock

Spacing

base 8px
Collection
Title block
La copy de descripción refleja la medida de línea, el aire editorial del bloque y el espaciado del CTA.
Discover
Scale
4816242856112
Gap · Card padding
gap 24pxcard 28pxsection 112px

Elevation & Depth

Soft / gold rule

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

TécnicaFilete oro superior en cards + sombra difusa; fotografía con overlay océano.
Surface#162333
Border1px #243349 · top oro
Shadow0 22px 54px -22px rgba(0,0,0,.6)
Canvas#0B1C35 deep ocean

Shapes

Radius family

Radios casi rectos (2–6px): editoriales y elegantes. La sofisticación nace del contraste océano/oro, la serif y el aire, no del redondeo. El único trazo curvo protagonista es el monograma caligráfico del logo.

2px · sm4px · md6px · lgmonograma · caligráfico
Primary radius2px botones · 6px cards
Marca · treatmentMonograma A oro + estrella

Do's and Don'ts

Guardrails

Do

Tratar el oro como material precioso y escaso: monograma, filetes, un CTA.
Mantener el deep ocean de lienzo y el white sand de texto, con mucho aire.
Usar North Roland (Prata) para titulares y wordmark en mayúsculas con tracking.
Usar Figtree para todo el cuerpo y la UI.
Dejar protagonizar la fotografía de mar, arena y piel.

Don't

Abusar del oro ni usarlo en grandes superficies; lo abarata.
Bajar el contraste ni deformar el monograma del logo.
Usar tipografías pesadas o geométricas que rompan la elegancia.
Introducir colores saturados fuera de la paleta nombrada.
Saturar el layout; el lujo necesita aire.

Motion

Subtle · derivado

La fuente es un brand identity estático (incluye un loader minimal, no una guía de motion). Escala mínima propuesta, suave y lenta como tela que cae: fades largos, reveals sutiles, hover delicado. Nada brusco.

Motion levelSubtle
Durations200 · 360 · 600ms
Easingcubic-bezier(.22,1,.36,1)
Hoverzoom lento, subrayado oro
Generado desde DESIGN.md · design-md-styleguide · Athena Swim
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #CBA24A;
  --color-secondary: #EED7CB;
  --color-accent: #D99E36;
  --color-neutral: #E8ECF4;
  --color-background: #0B1C35;
  --color-surface: #162333;
  --color-text-primary: #ECEFF4;
  --color-text-secondary: #AEB8C6;
  --color-border: #243349;
  --font-display: "North Roland";
  --font-body: "North Roland";
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 56px;
  --space-gap: 24px;
  --space-section-padding: 112px;
}
@theme {
  --color-primary: #CBA24A;
  --color-secondary: #EED7CB;
  --color-accent: #D99E36;
  --color-neutral: #E8ECF4;
  --color-background: #0B1C35;
  --color-surface: #162333;
  --color-text-primary: #ECEFF4;
  --color-text-secondary: #AEB8C6;
  --color-border: #243349;
  --font-display: "North Roland";
  --font-body: "North Roland";
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 56px;
  --spacing-gap: 24px;
  --spacing-section-padding: 112px;
}
{
  "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"
  }
}
---
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.