---
version: "1.0"
name: "14islands"
description: "Sistema visual de 14islands, estudio creativo sueco-brasileño pionero del WebGL scrolleable (autores de r3f-scroll-rig): un lienzo gris pálido (#F2F2F2) con tinta casi negra (#070707) donde la tipografía es la protagonista absoluta. Display humanista gigante (Aften Screen) que llega a 314px con line-height 0.8 y tracking -0.05em, compuesto en escalones asimétricos; labels diminutos en mayúsculas (Benton Sans, 13px). Neutros cálidos de arena (#EAE5DF, #A59D92) y acentos por proyecto (lila #A5A9FD, amarillo #FFCA6B). Radios de 5px, cero sombras, y un solo canvas WebGL global que persigue al DOM con Lenis debajo. Light mode editorial, sereno, con física de scroll."
colors:
primary: "#070707"
canvas: "#F2F2F2"
background: "#F2F2F2"
surface: "#FFFFFF"
surface-sand: "#EAE5DF"
surface-highlight: "#E4DED7"
surface-dark: "#26272A"
ink: "#070707"
text-primary: "#070707"
text-secondary: "#797979"
text-muted: "#A2A2A9"
sand: "#EAE5DF"
sand-highlight: "#A59D92"
white: "#FFFFFF"
project-purple: "#A5A9FD"
project-yellow: "#FFCA6B"
project-lemon: "#FFF38B"
project-grey: "#1F1F1F"
project-black: "#101010"
border: "#07070726"
typography:
display-hero:
fontFamily: "Aften Screen"
fontSize: "314.81px"
fontWeight: 400
lineHeight: "0.8"
letterSpacing: "-0.05em"
display-lg:
fontFamily: "Aften Screen"
fontSize: "160px"
fontWeight: 400
lineHeight: "0.9"
letterSpacing: "-0.05em"
display-md:
fontFamily: "Aften Screen"
fontSize: "83.33px"
fontWeight: 400
lineHeight: "1.0"
letterSpacing: "-0.04em"
lead:
fontFamily: "Aften Screen"
fontSize: "32px"
fontWeight: 400
lineHeight: "1.2"
letterSpacing: "-0.02em"
body:
fontFamily: "Benton Sans"
fontSize: "16px"
fontWeight: 400
lineHeight: "1.5"
letterSpacing: "normal"
label:
fontFamily: "Benton Sans"
fontSize: "12.96px"
fontWeight: 400
lineHeight: "1.4"
letterSpacing: "normal"
textTransform: "uppercase"
accent-italic:
fontFamily: "Aften Screen Italic"
fontSize: "inherit"
fontWeight: 400
lineHeight: "inherit"
letterSpacing: "inherit"
rounded:
none: "0px"
soft: "5px"
spacing:
indent: "max(0.9375rem, 3.7616vw)"
menu-height: "max(5rem, 7.6968vw)"
breakpoint-medium: "600px"
breakpoint-desktop: "900px"
breakpoint-large: "1400px"
components:
button-link:
backgroundColor: "transparent"
textColor: "{colors.ink}"
typography: "{typography.label}"
rounded: "{rounded.none}"
padding: "0"
card-thumb:
backgroundColor: "{colors.surface-dark}"
rounded: "{rounded.soft}"
padding: "0"
boxShadow: "none"
highlight-text:
backgroundColor: "{colors.surface-highlight}"
textColor: "{colors.ink}"
typography: "{typography.display-md}"
input:
backgroundColor: "{colors.white}"
borderColor: "{colors.border}"
textColor: "{colors.ink}"
rounded: "{rounded.soft}"
padding: "14px"
---
# DESIGN.md - 14islands
> Sistema de diseño extraído de `https://14islands.com` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, familias, tamaños, easings y breakpoints medidos sobre el sitio en vivo: la paleta completa está declarada como variables `--color-*` en su `:root` (con duplicado `--rgb` para alphas), los `@font-face` (AftenScreen, AftenScreenItalic, BentonSans, Inter) se leyeron de las hojas servidas, y las clases del `` (`js-has-global-canvas lenis lenis-smooth js-smooth-scrollbar-enabled`) delatan la arquitectura de motion. Lo que el sitio no expone (estados, sombras, escala de espaciado completa) va marcado como *(derivado para completar el sistema)*.
---
## 1. Tema Visual y Atmósfera
14islands es un estudio creativo entre Estocolmo y Brasil, y su casa digital es lo contrario de lo que uno espera de un estudio WebGL: no hay neón, no hay oscuridad gamer, no hay partículas gratuitas. Hay un lienzo gris pálido `#F2F2F2`, una tinta casi negra `#070707` (nunca negro puro: siete puntos de gris la separan del `#000`), y tipografía enorme respirando en silencio. El hero real escribe "Design & Technology" en tres escalones asimétricos: "Design" arriba a la izquierda, el ampersand en gris `#A2A2A9` debajo, "Technology" entrando desde la derecha. La composición es el logo.
La medida lo confirma: el blanco `#FFFFFF` y el gris `#F2F2F2` suman casi toda el área del sitio (scores 21.2M y 1.35M), y el color de verdad solo entra **por proyecto**: el lila `#A5A9FD` y el ámbar `#FFCA6B` de AILA, el limón `#FFF38B` del case de HeroKit, los casi negros `#101010`/`#1F1F1F` de los fondos de trabajo. El sistema del estudio es neutro para que el trabajo ponga el color, y esa neutralidad no es fría: los apoyos son arenas cálidas (`#EAE5DF`, `#A59D92`, highlight `#E4DED7`), no grises azulados.
La tipografía tiene dos registros y un truco. El display es **Aften Screen**, una humanista de pantalla con itálica verdadera, usada en un solo peso (400) pero a escalas brutales: el h1 medido llega a **314.81px con line-height 0.8 y letter-spacing -0.05em**. El cuerpo y los labels son **Benton Sans**, la grotesca americana de Tobias Frere-Jones, a 12.96px con caja alta para los kickers ("CREATIVE AGENCY", "INDUSTRY", "MORE WORK"). El truco: entre 13px y 314px casi no hay paradas intermedias. La jerarquía es un salto de 24x, y el peso nunca cambia: **la escala es el único énfasis**.
Y luego está la ingeniería, que es invisible hasta que haces scroll. El `` lleva las clases `js-has-global-canvas lenis lenis-smooth`: un único canvas WebGL global cubre el viewport y "persigue" a las imágenes del DOM para distorsionarlas con shaders, mientras Lenis amortigua el scroll. Es exactamente el patrón de **r3f-scroll-rig**, la librería open source que el propio estudio mantiene. El `:root` declara una biblioteca de **25 easings** con nombre (de `--ease-cubic` a `--ease-back-out-more`, este último con un overshoot de 1.65), señal de que el motion aquí está tokenizado igual que el color. El resultado: una página que parece un PDF elegante y se comporta como un motor de juego discreto.
**Palabras clave de personalidad**: sereno, editorial, tipográfico, neutro cálido, nórdico, técnico sin ruido
**Densidad del layout**: bajísima; un elemento protagonista por viewport y márgenes fluidos generosos (`--indent: max(15px, 3.76vw)`)
**Modo preferido**: claro (`#F2F2F2`/blanco; los oscuros `#26272A` y `#101010` son fondos de proyecto, no el sistema)
**Nivel de ornamentación**: mínimo en objetos, alto en comportamiento (la ornamentación es el shader y la física del scroll, no los bordes)
**Audiencia visual objetivo**: marcas y equipos de producto que quieren WebGL de autor sin estética de demo técnica
---
## 2. Paleta de Colores y Roles Semánticos
Un sistema neutro cálido con acentos delegados a los proyectos. Todas las variables de color de abajo son **reales**, con sus nombres literales del `:root` del sitio (que además duplica cada una como tripleta `--rgb` para componer alphas).
### Colores del sistema
| Nombre | Variable CSS real | Hex | Rol | Texto sobre él |
|--------|-------------------|-----|-----|----------------|
| Casi negro | `--color-almost-black` | `#070707` | La tinta universal: display, body, labels, íconos | `#F2F2F2` / `#FFFFFF` |
| Fondo | `--color-background` | `#F2F2F2` | El canvas del sitio | `#070707` (18:1 AAA) |
| Blanco | `--color-white` | `#FFFFFF` | Superficie de secciones y cards; la mayor área medida | `#070707` (20.2:1 AAA) |
| Arena | `--color-sand` | `#EAE5DF` | Superficie cálida de apoyo, bloques de cultura | `#070707` (16.1:1 AAA) |
| Arena intensa | `--color-sand-highlight` | `#A59D92` | Acento de arena: subrayados, detalles | `#070707` |
| Gris medio | `--color-grey-highlight-dark` | `#797979` | Texto secundario | sobre `#F2F2F2`: 3.9:1, solo grande |
| Gris claro | `--color-grey-highlight-light` | `#A2A2A9` | El ampersand del hero; texto decorativo | 2.3:1: nunca funcional |
| Highlight beige | `--color-beige-theme-animated-text-highlight-bg` | `#E4DED7` | Fondo animado que "subraya" palabras del display | `#070707` |
| Highlight oscuro | `--color-dark-theme-animated-text-highlight-bg` | `#26272A` | El mismo subrayado en secciones oscuras | `#FFFFFF` |
### Colores de proyecto (reales, con nombre de cliente en la variable)
El `:root` incluye la paleta del proyecto AILA como tokens propios; el resto entra por case. El color pertenece al trabajo, no al estudio.
| Nombre | Variable real | Hex | Uso medido |
|--------|---------------|-----|------------|
| Lila AILA | `--color-aila-purple` | `#A5A9FD` | Fondos y UI del case AILA |
| Ámbar AILA | `--color-aila-yellow` | `#FFCA6B` | Acento del case AILA |
| Gris AILA | `--color-aila-grey` | `#1F1F1F` | Fondo oscuro del case |
| Negro AILA | `--color-aila-almost-black` | `#101010` | Fondo profundo del case |
| Limón HeroKit | *(medido por área, no tokenizado)* | `#FFF38B` | Canvas WebGL del case HeroKit: 1.44M de score, segundo color del sitio tras el blanco |
### Contraste verificado
| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#070707` sobre `#F2F2F2` | 18.0:1 | AAA |
| `#070707` sobre `#FFFFFF` | 20.2:1 | AAA |
| `#070707` sobre `#EAE5DF` | 16.1:1 | AAA |
| `#070707` sobre `#FFF38B` | 17.7:1 | AAA |
| `#070707` sobre `#FFCA6B` | 13.3:1 | AAA |
| `#070707` sobre `#A5A9FD` | 9.3:1 | AAA |
| `#FFFFFF` sobre `#26272A` | 15.4:1 | AAA |
| `#797979` sobre `#F2F2F2` | 3.9:1 | AA solo texto grande |
| `#A2A2A9` sobre `#F2F2F2` | 2.3:1 | Decorativo (el "&" del hero, 300px+) |
> **La regla del gris**: `#A2A2A9` existe para UNA cosa: piezas tipográficas gigantes que funcionan como forma (el ampersand de 300px). A tamaño funcional no pasa ni AA texto grande. El secundario real de lectura es `#797979`, y solo desde 19px.
### Colores de estado
El sitio no expone estados semánticos (no hay formularios con error en la home). Derivados para completar el sistema, manteniendo la lógica neutra + acento de proyecto:
| Estado | Hex | Fondo | Nota |
|--------|-----|-------|------|
| Éxito | `#070707` *(derivado)* | `#EAE5DF` | Confirmación en arena: sin verde, el sistema no lo tiene |
| Error | `#070707` *(derivado)* | `#FFCA6B` | El ámbar como alerta cálida |
| Info | `#070707` *(derivado)* | `#E4DED7` | El highlight beige como aviso suave |
| Foco | `#070707` | — | Outline 2px de tinta, offset 3px |
---
## 3. Reglas de Tipografía
```css
/* Familias reales (self-hosted, @font-face leídos del sitio):
AftenScreen -> display (Monokrom, un solo peso 400 + itálica real)
AftenScreenItalic -> acentos editoriales dentro del display
BentonSans -> body y labels (Font Bureau, peso 400)
Inter -> auxiliar de UI (cargada, uso puntual) */
--font-display: 'Work Sans', 'Aften Screen', 'Helvetica Neue', sans-serif;
--font-body: 'Libre Franklin', 'Benton Sans', Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* no detectada en el sitio */
```
**Google Fonts (sustitutos):**
```html
```
### Nota sobre sustitución tipográfica
**Original: Aften Screen -> HTML: Work Sans (Google substitute).**
Aften Screen (Monokrom, fundición noruega) es una humanista de pantalla de altura de x generosa, aperturas abiertas, `g` de doble piso y una itálica verdadera con formas cursivas, usada aquí en un único peso 400 llevado a tamaños de póster. No está en Google Fonts.
Candidatas comparadas antes de decidir:
| Candidata | Por qué encaja | Por qué se descarta |
|---|---|---|
| **Work Sans** | Humanista optimizada para pantalla (el mismo brief que "Screen" en el nombre de la original), doble piso en la `g`, terminales cálidos, itálicas reales y peso 400 que aguanta los 300px del display con tracking -0.05em sin volverse rígido. | **Elegida.** |
| Instrument Sans | Contemporánea y limpia, buen display. | Aperturas más cerradas y gesto más técnico: pierde la calidez nórdica del original. |
| Inter | El propio sitio la carga como auxiliar. | A 300px es anónima; el hero perdería la voz que distingue al estudio. |
| Public Sans | Sólida, doble piso, buen rango. | Deriva burocrática de Libre Franklin: más rígida y más fría que Aften en display. |
**Original: Benton Sans -> HTML: Libre Franklin (Google substitute).**
Benton Sans es la revival de las gothics de Morris Fuller Benton hecha por Frere-Jones; Libre Franklin es la revival libre del mismo linaje (Franklin Gothic). Es la sustitución más directa que existe en Google Fonts: mismas proporciones de caja alta para labels, mismo tono americano neutro a 13px. Se compararon Public Sans (derivada de Libre Franklin pero más plana) e Inter (más fría, altura de x mayor que distorsiona los labels).
> Mono: el sitio no usa monoespaciada; se declara la pila del sistema solo para bloques de código en documentación *(derivado para completar el sistema)*.
### Escala tipográfica
> Tamaños reales medidos a viewport 1600px. El sitio escala el display en vw (fluido), con `--indent` y `--menuNavigationHeight` en `max(rem, vw)`.
| Token | px real @1600 | Line height | Weight | Tracking | Uso |
|-------|---------------|-------------|--------|----------|-----|
| `--f-display-hero` | 314.81px | 0.8 (251.85px) | 400 | -0.05em | h1 de case y hero escalonado |
| `--f-display-lg` | ~160px *(interpolado)* | 0.9 | 400 | -0.05em | Titulares de sección grandes |
| `--f-display-md` | 83.33px | 1.0 (83.33px) | 400 | -0.04em | h4 de contacto ("hello@14islands.com") |
| `--f-lead` | ~32px *(derivado)* | 1.2 | 400 | -0.02em | Entradillas largas de case |
| `--f-body` | 16px | 1.5 | 400 | normal | Texto de lectura |
| `--f-label` | 12.96px | 1.4 (18.15px) | 400 | normal | Labels UPPERCASE, nav, créditos |
### Pesos tipográficos
```css
--font-regular: 400; /* el ÚNICO peso medido en todo el sitio */
```
> Un solo peso en dos familias. No hay bold: el énfasis se hace con **escala** (13px a 314px, un salto de 24x), con la **itálica** de Aften para acentos editoriales, o con el **highlight animado** (`#E4DED7` creciendo detrás de la palabra). Poner un 700 en este sistema es como gritar en una biblioteca: funciona, pero ya no estás en 14islands.
### Letter spacing
```css
--tracking-hero: -0.05em; /* 314px: -15.74px medidos */
--tracking-display: -0.04em; /* 83px: -3.33px medidos */
--tracking-text: normal; /* body y labels: sin tracking */
```
**Regla clave**: el tracking negativo crece con el tamaño (más grande, más apretado) y desaparece en texto funcional. El display se compacta como un logotipo; el cuerpo se queda quieto. Y la interlínea acompaña: 0.8 en el hero (las líneas se solapan visualmente en los escalones), 1.5 en lectura.
---
## 4. Estilos de Componentes
### Enlaces y botones
El sitio casi no tiene "botones": tiene texto que actúa. El CTA es un label en caja alta o un titular entero clickeable.
**Link de label (el control real del sitio)**
```
Background: transparent
Color: #070707
Border: none
Border-radius: 0
Padding: 0
Font: Benton Sans 400, 12.96px, uppercase, line-height 1.4
Hover:
Subrayado de 1px que entra animado de izquierda a derecha
(patrón medido en nav y footer)
Focus:
Outline: 2px solid #070707, offset 3px
```
**Link de display (titular clickeable)**
```
Font: Aften Screen 400, 83-160px, tracking -0.04em
Hover: la palabra clave gana el highlight #E4DED7 que crece
desde la base (el "animated-text-highlight" tokenizado)
```
**Botón de acción (derivado para completar el sistema)**
```
Background: #070707
Color: #F2F2F2
Border-radius: 5px (el único radio del sistema)
Padding: 14px 24px
Font: Benton Sans 400, 14px, uppercase
Hover:
Background: #26272A
```
### Card de trabajo (componente firma)
```
Contenedor: border-radius 5px (real: 12 nodos medidos con 5px),
overflow hidden, fondo del proyecto (#101010, #FFF38B...)
Media: imagen/render conectada al canvas WebGL global; en scroll
el shader la distorsiona (curvatura + parallax)
Label superior: categoría en Benton 12.96px uppercase #797979
Título: nombre del proyecto en Benton 12.96px uppercase #070707
Sin borde, sin sombra: el color del proyecto separa la card del canvas
```
### Highlight de texto animado (componente firma)
El sitio tokeniza el fondo del subrayado en dos temas (`--color-beige-theme-animated-text-highlight-bg`, `--color-dark-theme-...`): un rectángulo `#E4DED7` (o `#26272A` en oscuro) que crece detrás de palabras del display conforme entran al viewport.
```
Fondo: #E4DED7 (tema claro) / #26272A (tema oscuro)
Animación: scaleX de 0 a 1 desde la izquierda, ligada al scroll
El texto no cambia de color: el fondo hace el énfasis
```
### Navegación / Header
```
Wordmark: "14islands" en Aften 400, ~24px, tinta #070707
Altura: max(5rem, 7.7vw) (real: --menuNavigationHeight)
Links: Benton 12.96px uppercase, separados por --indent
Menú móvil: overlay a pantalla completa sobre #F2F2F2
Botón "Menu/Close": texto puro, sin caja
```
### Footer / contacto (componente firma)
```
CTA: "Let's make something great together" en Aften display
Email como h4: 83.33px, line-height 1.0, tracking -0.04em,
clickeable completo
Créditos: Benton 12.96px uppercase con separadores de espacio
(© 2026 14ISLANDS / INSTAGRAM / X / LINKEDIN / PRIVACY)
```
### Inputs de texto (derivado para completar el sistema)
```
Background: #FFFFFF
Border: 1px solid rgba(7, 7, 7, 0.15)
Border-radius: 5px
Padding: 14px
Font: Benton Sans 400, 16px
Color: #070707
Placeholder: #797979
Focus:
Border-color: #070707
Outline: none
```
---
## 5. Principios de Layout
### Espaciado (tokens reales)
El sitio declara su espaciado maestro como funciones fluidas, no como escala fija:
```css
/* Reales, del :root del sitio */
--indent: max(0.9375rem, 3.7615740741vw); /* el margen maestro: 15px móvil, 60px @1600 */
--menuNavigationHeight: max(5rem, 7.6967592593vw); /* 80px móvil, 123px @1600 */
--vw: 1vw; --vh: 1vh; /* unidades corregidas por JS (mobile bars) */
```
> `--indent` es EL token del layout: margen lateral, gap entre columnas y sangría de composición, todo sale de la misma función. Los denominadores con nueve decimales delatan que la fórmula viene de un diseño a 1728px de base convertido a vw.
### Escala derivada
Para completar el sistema *(derivado; el sitio compone con `--indent` multiplicado)*:
```css
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
--space-5: 64px;
--space-6: calc(var(--indent) * 2);
--space-section: clamp(96px, 12vw, 200px);
```
### Composición
```
Rejilla: composición asimétrica sobre --indent, no una rejilla de 12
columnas visible. El hero escalona tres piezas tipográficas
en diagonal descendente izquierda -> derecha.
Un protagonista por viewport: titular gigante, O card de trabajo,
O bloque de texto. Nunca dos protagonistas.
El label pequeño ancla la esquina: cada bloque grande lleva su kicker
de 13px uppercase como contrapeso diminuto.
```
### Filosofía de espaciado
El vacío es la ornamentación. Entre el label de 13px y el display de 314px no hay elementos intermedios que "llenen": la tensión entre lo diminuto y lo enorme ES la composición. Regla práctica: **si un viewport tiene más de un elemento protagonista, sobra uno; si un display no tiene un label diminuto cerca, falta el contrapeso.**
---
## 6. Profundidad y Elevación
Cero sombras medidas. La profundidad de 14islands no es de capas: es **física y cromática**.
### Sistema de profundidad
```css
/* No hay box-shadow en el sistema. La separación se hace por: */
--sep-color: /* cambio de superficie: #F2F2F2 -> #FFFFFF -> #EAE5DF */
--sep-media: /* el canvas WebGL da la profundidad real: parallax,
curvatura de shader y velocidad diferencial */
--sep-scale: /* el salto tipográfico 13px vs 314px crea planos */
```
| Nivel | Superficie | Uso |
|-------|-----------|-----|
| 0 - Canvas | `#F2F2F2` | Fondo del sitio |
| 1 - Sección | `#FFFFFF` | Franjas de contenido |
| 2 - Cálido | `#EAE5DF` / `#E4DED7` | Bloques de cultura, highlights |
| 3 - Proyecto | `#101010`, `#FFF38B`, `#A5A9FD`... | Cards y cases: el color del cliente |
| WebGL | canvas global | Las imágenes viven aquí: parallax y distorsión al hacer scroll |
### Radios de borde
```css
--radius-soft: 5px; /* real: 12 nodos; thumbnails y controles */
--radius-none: 0; /* el resto del sistema: el texto nunca lleva caja */
```
### Bordes
```css
--hair: rgba(7, 7, 7, 0.15); /* divisores discretos (derivado del patrón) */
```
> Si necesitas elevar algo en este sistema, no le pongas sombra: cámbialo de superficie (blanco sobre gris, arena sobre blanco) o dale movimiento diferencial en el scroll. La sombra dura del flat design y el glow del WebGL barato quedan igual de fuera.
---
## 7. Lo que Sí y lo que No
### Sí hacer
1. **Mantén el lienzo neutro cálido**: `#F2F2F2` de fondo, `#FFFFFF` de sección, arenas `#EAE5DF`/`#E4DED7` de apoyo. El color saturado entra solo con un proyecto.
2. **Usa la tinta `#070707`, no negro puro**: esos siete puntos de gris son la suavidad del sistema.
3. **Compón el display como logotipo**: un solo peso 400, tracking -0.05em, line-height 0.8, escalones asimétricos. La escala es el énfasis, no el bold.
4. **Ancla cada bloque gigante con un label diminuto** de 13px uppercase (Benton/Libre Franklin): la tensión de escalas es la firma.
5. **Delega el color al trabajo**: las cards toman el fondo del proyecto (`#FFF38B`, `#A5A9FD`, `#101010`); el sistema solo pone el marco neutro.
6. **Enfatiza con el highlight animado** (`#E4DED7` creciendo tras la palabra) o con la itálica, nunca con peso.
7. **Reserva `5px` como único radio** para thumbnails y controles; el texto va sin caja.
8. **Liga el movimiento al scroll con física**: Lenis + canvas global; el shader distorsiona las imágenes según la velocidad de scroll, no según un timeline.
### No hacer
1. **No metas bold ni semibold.** El sitio entero vive en peso 400; el énfasis es escala, itálica o highlight.
2. **No uses sombras**, ni suaves ni de tarjeta: la profundidad es superficie + parallax.
3. **No pongas `#A2A2A9` en texto funcional**: es un color de forma (el ampersand de 300px), da 2.3:1.
4. **No llenes el viewport**: un protagonista por pantalla; si hay dos, sobra uno.
5. **No uses grises fríos azulados** de sistema: los neutros de apoyo son arena (`#EAE5DF`, `#A59D92`).
6. **No apliques el tracking negativo al texto pequeño**: -0.05em es solo para display; el body va a tracking normal.
7. **No conviertas el WebGL en protagonista**: el shader sirve a las imágenes del DOM (patrón scroll-rig), no flota como demo.
8. **No redondees más de 5px**: una card de 16px de radio pertenece a otro sistema.
---
## 8. Comportamiento Responsive
### Breakpoints (reales, tokenizados en el :root)
```css
--breakpoint-medium: 600px;
--breakpoint-desktop: 900px;
--breakpoint-large: 1400px;
```
### Cambios por breakpoint
**Mobile (< 600px)**
- `--indent` toca su suelo: 15px (`max(0.9375rem, 3.76vw)`)
- El hero escalonado se apila: "Design", "&", "Technology" en columna, tamaño ~18vw
- Nav colapsa a "Menu" textual con overlay a pantalla completa
- Las cards de trabajo pasan a columna única, media primero
**Tablet (600px a 900px)**
- `--indent` interpola (~3.76vw); el display ~20vw
- El strip de trabajos pasa de fila horizontal a rejilla de 2
**Desktop (>= 900px)**
- Composición escalonada completa del hero; h1 hasta 314.81px @1600
- `--menuNavigationHeight` llega a 7.7vw
- El canvas WebGL global activa parallax y distorsión completos
**Large (>= 1400px)**
- El display sigue creciendo en vw (no topa): en pantallas 4K el hero es arquitectura
### Touch targets (mobile)
- Los labels de 13px crecen su área de toque a 44px con padding invisible *(derivado)*
- El email de contacto (h4 display) es clickeable en toda su caja
- El menú overlay usa items de display (~40px) con toda la fila activa
### Filosofía responsive
El sitio no reorganiza: **re-escala y re-apila**. Las funciones `max(rem, vw)` hacen el trabajo continuo (margen y nav crecen con el viewport) y los tres breakpoints solo deciden cuántas piezas caben en el escalón del hero. El canvas WebGL es el mismo en móvil, con la distorsión atenuada *(derivado: en viewports táctiles el scroll nativo sustituye a Lenis según el patrón de la librería)*.
---
## 9. Guía de Prompts para Agentes
### Prompt de inicialización de sesión
```text
Estás trabajando con el sistema de diseño de 14islands (estudio
creativo sueco-brasileño, autores de r3f-scroll-rig).
PALETA: lienzo #F2F2F2, secciones #FFFFFF, tinta #070707 (casi negro,
nunca #000). Apoyos cálidos: arena #EAE5DF, arena intensa #A59D92,
highlight beige #E4DED7 (y #26272A en oscuro). Texto secundario
#797979 (solo 19px+); #A2A2A9 solo como forma decorativa gigante.
El color saturado entra POR PROYECTO: lila #A5A9FD, ámbar #FFCA6B,
limón #FFF38B, oscuros #101010/#1F1F1F. Cero sombras.
TIPOGRAFÍA: dos familias, UN peso (400). Display: Work Sans
(sustituta de Aften Screen), 83-314px, line-height 0.8-1.0, tracking
-0.04/-0.05em, composición escalonada; itálica para acentos. Labels y
body: Libre Franklin (sustituta de Benton Sans), 13px uppercase para
labels, 16px para lectura, tracking normal. Sin bold: el énfasis es
escala, itálica o highlight animado.
ESTILO: radio 5px solo en thumbnails/controles; texto sin caja. Margen
maestro --indent: max(15px, 3.76vw). Un protagonista por viewport, con
un label diminuto como contrapeso. MODO: claro.
MOTION: Lenis smooth scroll + un solo canvas WebGL global que persigue
las imágenes del DOM (patrón r3f-scroll-rig). Easings tokenizados; el
estándar es cubic-bezier(0.66, 0, 0.34, 1) y expo-out para entradas.
```
### Prompt: Crear nueva pantalla
```text
Crea una pantalla de [FUNCIONALIDAD] para 14islands.
Requisitos:
- Fondo #F2F2F2 o #FFFFFF, tinta #070707, sin sombras
- Un titular protagonista en Work Sans 400, tracking negativo,
compuesto en escalones si tiene más de una palabra
- Un label de 13px uppercase (Libre Franklin) anclando la esquina
- Superficies de apoyo en arena #EAE5DF si hace falta calidez
- Color saturado solo si la pantalla muestra un proyecto (usa su paleta)
- Enfatiza con highlight #E4DED7 o itálica, nunca con bold
- Radio 5px máximo, solo en media y controles
```
### Prompt: Añadir componente al UI kit
```text
Añade un componente de [TIPO] al sistema de 14islands.
Debe:
- Usar solo tokens del DESIGN.md de 14islands
- Peso 400 en todo; jerarquía por escala y caja alta
- Sin box-shadow; separación por cambio de superficie
- Estados: hover con subrayado animado o highlight creciente,
focus con outline 2px #070707
- Si lleva media, prever el hueco para el canvas WebGL (la imagen
se distorsiona con el scroll)
```
### Prompt: Revisión de consistencia
```text
Revisa esta interfaz y detecta qué no sigue el sistema de 14islands.
Verifica:
1. Si hay algún peso distinto de 400 (no debe haberlo)
2. Si la tinta es #070707 y no #000000
3. Si hay box-shadow en algún elemento (no debe)
4. Si el tracking negativo aparece en texto pequeño (solo es de display)
5. Si #A2A2A9 o #797979 se usan en texto funcional pequeño
6. Si los neutros de apoyo son arenas cálidas y no grises azulados
7. Si hay más de un protagonista por viewport
8. Si los radios superan 5px o se aplican a texto
9. Si el color saturado aparece sin pertenecer a un proyecto
```
### Prompt: Variante de campaña
```text
Genera una variante [case de proyecto / página de cultura / journal]
para 14islands manteniendo el sistema base.
Conserva:
- El marco neutro (#F2F2F2/#FFFFFF/#070707) y el peso único 400
- El display escalonado con tracking negativo y su label contrapeso
- La regla "sin sombras, con física"
Puedes variar:
- La paleta del proyecto (el case manda: limón, lila, oscuro...)
- El tema del highlight animado (beige #E4DED7 u oscuro #26272A)
- La intensidad del shader del canvas (de parallax sutil a distorsión)
```
---
## 10. Movimiento (Motion)
El motion es la especialidad de la casa y está tokenizado como el color: el `:root` real declara **25 curvas de easing con nombre**. La arquitectura es la de su librería open source r3f-scroll-rig: un solo canvas WebGL global sincronizado con el scroll amortiguado de Lenis, donde los elementos DOM "proyectan" sus imágenes para recibir shaders.
**Nivel de motion**: alto pero al servicio del contenido; nada se mueve si el scroll no lo pide
**Duraciones**: 400-600ms (reveals de texto por palabra), 800-1200ms (highlight creciente), continuo (parallax y distorsión, ligados a la velocidad de scroll) *(derivadas: el sitio tokeniza curvas, no duraciones)*
**Easings (reales, nombres literales del :root)**:
```css
--ease-cubic: cubic-bezier(0.66, 0, 0.34, 1); /* LA curva de la casa (custom) */
--ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1); /* entradas de display */
--ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1); /* reveals suaves */
--ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-back-out-more: cubic-bezier(0.56, 0.91, 0.465, 1.65); /* overshoot 1.65: el único gesto juguetón */
/* + la librería Penner completa: sine/quad/cubic/quart/quint/expo/circ
en in, out e in-out (25 tokens en total) */
```
**Propiedades animadas**: `transform` (translate de reveals, scaleX del highlight, parallax), `opacity`, uniforms de shader (curvatura, desplazamiento UV) en el canvas global
**Patrones de motion**:
- **Global canvas + scroll-rig**: las imágenes del DOM se dibujan en un único canvas WebGL que las persigue; al hacer scroll reciben parallax y una distorsión proporcional a la velocidad (clases reales `js-has-global-canvas`, `lenis-smooth`)
- **Hero escalonado**: "Design", "&", "Technology" entran por pasos con translate + opacity, cada pieza con su delay
- **Highlight que subraya**: el rectángulo `#E4DED7`/`#26272A` hace scaleX de 0 a 1 detrás de la palabra al entrar al viewport (tokenizado en el :root)
- **Reveals por palabra**: los párrafos de display aparecen palabra a palabra con máscara, siguiendo el progreso de scroll
- **Subrayado de link**: 1px que entra de izquierda a derecha en hover con `--ease-cubic`
- **Strip de trabajos**: la fila de proyectos se desplaza con velocidad diferencial respecto al scroll (parallax horizontal)
> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Con motion reducido, Lenis cede al scroll nativo, el canvas WebGL congela las distorsiones (las imágenes se muestran planas), los reveals por palabra aparecen completos y el highlight se pinta sin animación.
---
## Anexo: Stack técnico detectado
- **Plataforma**: Next.js (chunks `_next/static`, webpack build), Google Tag Manager. Página servida como SPA con hidratación.
- **Arquitectura de motion**: clases reales en el ``: `js-has-global-canvas lenis lenis-smooth js-smooth-scrollbar-enabled`. Es el patrón exacto de **@14islands/r3f-scroll-rig** (React Three Fiber + Lenis), librería open source del propio estudio: un canvas WebGL global persistente + scroll amortiguado + componentes DOM que proyectan su media al canvas.
- **Sistema de tokens**: `:root` con paleta completa nombrada (`--color-almost-black`, `--color-background`, `--color-sand`, `--color-sand-highlight`, `--color-grey-highlight-dark/light`, highlights por tema, y la paleta del proyecto AILA), cada color duplicado como tripleta `--rgb`; **25 easings** nombrados; `--indent` y `--menuNavigationHeight` como `max(rem, vw)`; breakpoints tokenizados (600/900/1400); `--vw`/`--vh` corregidos por JS.
- **Tipografía**: 4 `@font-face` self-hosted: `AftenScreen` (400) y `AftenScreenItalic` (Monokrom), `BentonSans` Regular (Font Bureau), `Inter` Regular (auxiliar). Un solo peso en todo el sitio.
- **Medidas display**: h1 de case 314.81px / line-height 251.85px (0.8) / letter-spacing -15.74px (-0.05em); h4 de contacto 83.33px / 1.0 / -0.04em; labels 12.96px / 18.15px, uppercase.
- **Área de color**: blanco 21.2M, limón HeroKit `#FFF38B` 1.44M, gris `#F2F2F2` 1.35M. El acento con más área del sitio es de un proyecto, no del estudio: la tesis del sistema, medida.
- **Forma**: 0 sombras; radios solo 5px (12 nodos) y derivados de escala (4.63px).
- **(no detectado)**: GSAP global, THREE global como variable (va empaquetado), tipografía monoespaciada, modo oscuro global (los oscuros son fondos de sección/proyecto), sistema de estados semánticos, duraciones tokenizadas.