Athena Swim Brand Style Guide

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#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.
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