Apple light,
but louder.

:root {
  --neo-bg: #F5F5F7;
  --neo-surface: #FFFFFF;
  --neo-surface-soft: #EDEDF2;
  --neo-ink: #1D1D1F;
  --neo-ink-soft: #6E6E73;
  --neo-muted: #86868B;
  --neo-blue: #0071E3;
  --neo-blue-600: #0066CC;
  --neo-citrus: #DFE74F;
  --neo-citrus-strong: #5E9C2A;
  --neo-citrus-bright: #E1DC05;
  --neo-indigo: #545C70;
  --neo-indigo-deep: #31384A;
  --neo-blush: #CBB2B0;
  --neo-silver: #B9BCC2;
  --neo-border: #E8E8ED;
  --neo-nav-glass: rgba(250, 250, 252, 0.8);
  --neo-nav-blur: saturate(180%) blur(20px);
  --neo-radius-card: 24px;
  --neo-radius-pill: 999px;
  --neo-shadow-card: 0 24px 60px -34px rgba(29, 29, 31, 0.18);
}

export const macbookNeoTheme = {
  colors: {
    bg: "#F5F5F7",
    surface: "#FFFFFF",
    ink: "#1D1D1F",
    inkSoft: "#6E6E73",
    blue: "#0071E3",
    citrus: "#DFE74F",
    citrusDeep: "#5E9C2A",
    blush: "#CBB2B0",
    indigo: "#545C70",
    silver: "#B9BCC2"
  },
  radius: {
    pill: "999px",
    card: "24px",
    frame: "28px"
  },
  shadow: {
    card: "0 24px 60px -34px rgba(29,29,31,.18)",
    frame: "0 32px 80px -42px rgba(29,29,31,.22)"
  }
}

// Example usage
// class="bg-[#F5F5F7] text-[#1D1D1F]"
// class="rounded-full bg-[#1D1D1F] px-[22px] py-3 text-[#F5F5F7]"
// class="rounded-[24px] border border-[#E8E8ED] bg-white shadow-[0_24px_60px_-34px_rgba(29,29,31,.18)]"

{
  "name": "macbook-neo",
  "source": "https://www.apple.com/macbook-neo/",
  "theme": "light",
  "colorFamily": "yellow",
  "sections": ["Colores Vibrantes", "Dirección de Arte", "Moderno"],
  "colors": {
    "background": "#F5F5F7",
    "surface": "#FFFFFF",
    "text": "#1D1D1F",
    "textSecondary": "#6E6E73",
    "retailBlue": "#0071E3",
    "citrus": "#DFE74F",
    "citrusDeep": "#5E9C2A",
    "blush": "#CBB2B0",
    "indigo": "#545C70",
    "silver": "#B9BCC2"
  },
  "typography": {
    "display": "SF Pro Display (original) -> Familjen Grotesk (render HTML)",
    "body": "SF Pro Text (original) -> Instrument Sans (render HTML)",
    "mono": "IBM Plex Mono"
  },
  "componentFacts": {
    "ctaPaddingHorizontal": "22px",
    "ctaPaddingVertical": "12px",
    "navBlur": "saturate(180%) blur(20px)",
    "heroBackground": "#F5F5F7"
  }
}

---
version: "1.0"
name: "MacBook Neo"
description: "Sistema visual claro, juvenil y altamente pulido: tipografia SF Pro, fondo Apple Light, liston azul de retail, headline con gradiente lima y una narrativa cromatica centrada en Silver, Blush, Citrus e Indigo."
source_url: "https://www.apple.com/macbook-neo/"
captured_at: "2026-06-22"
analysis_mode: "homepage publica + CSS compilado + captura real con Puppeteer"
colors:
  primary: "#DFE74F"
  primary-hover: "#C6D948"
  primary-active: "#5E9C2A"
  secondary: "#0071E3"
  secondary-hover: "#0066CC"
  accent: "#545C70"
  accent-soft: "#CBB2B0"
  neutral: "#F5F5F7"
  background: "#F5F5F7"
  background-alt: "#FFFFFF"
  surface: "#FFFFFF"
  surface-soft: "#EDEDF2"
  text-primary: "#1D1D1F"
  text-secondary: "#6E6E73"
  text-muted: "#86868B"
  text-on-primary: "#1D1D1F"
  text-on-secondary: "#F5F5F7"
  border: "rgba(0, 0, 0, 0.16)"
  border-soft: "#E8E8ED"
  success: "#2F7A3E (derivado para completar el sistema)"
  success-bg: "#EAF6EC (derivado para completar el sistema)"
  warning: "#8D6B12 (derivado para completar el sistema)"
  warning-bg: "#FFF6D7 (derivado para completar el sistema)"
  error: "#B44545 (derivado para completar el sistema)"
  error-bg: "#FBEAEA (derivado para completar el sistema)"
typography:
  display-xl: { fontFamily: "SF Pro Display (original) -> Familjen Grotesk (render HTML)", fontSize: "52px-138px", fontWeight: "600-700", lineHeight: "0.9-0.95", letterSpacing: "-0.03em" }
  display-md: { fontFamily: "SF Pro Display (original) -> Familjen Grotesk (render HTML)", fontSize: "28px-48px", fontWeight: 600, lineHeight: 1.02, letterSpacing: "-0.02em" }
  body-lg: { fontFamily: "SF Pro Text (original) -> Instrument Sans (render HTML)", fontSize: "18px-21px", fontWeight: 400, lineHeight: 1.55, letterSpacing: "-0.012em" }
  body-md: { fontFamily: "SF Pro Text (original) -> Instrument Sans (render HTML)", fontSize: "15px-17px", fontWeight: 400, lineHeight: 1.5, letterSpacing: "-0.01em" }
  label-md: { fontFamily: "SF Pro Text (original) -> Instrument Sans (render HTML)", fontSize: "12px-14px", fontWeight: 500, lineHeight: 1.2, letterSpacing: "0.08em" }
  mono-sm: { fontFamily: "SF Pro Text / SF Mono (original no detectado) -> IBM Plex Mono (render HTML)", fontSize: "11px-12px", fontWeight: 400, lineHeight: 1.5, letterSpacing: "0.08em" }
rounded:
  xs: "8px"
  sm: "10px"
  md: "12px"
  lg: "20px"
  xl: "24px"
  xxl: "32px (derivado para modulos grandes)"
  full: "999px"
spacing:
  base: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "44px"
  section-padding: "72px-96px (derivado desde la pagina de inspiracion)"
components:
  cta-pill: { backgroundColor: "#1D1D1F", textColor: "#F5F5F7", typography: "SF Pro Text 17px / 400", rounded: "999px", padding: "12px 22px" }
  retail-ribbon: { backgroundColor: "#0071E3", textColor: "#F5F5F7", linkColor: "#F5F5F7", rounded: "0px / 10px en inset ribbons" }
  frosted-nav: { backgroundColor: "rgba(250,250,252,0.8)", textColor: "rgba(0,0,0,0.8)", blur: "saturate(180%) blur(20px)", border: "(no detectado)" }
  product-card: { backgroundColor: "#FFFFFF", textColor: "#1D1D1F", rounded: "24px", border: "1px solid #E8E8ED", shadow: "0 24px 60px -34px rgba(29,29,31,0.18) (derivado)" }
---

# MacBook Neo

Documento de sistema visual extraido desde `https://www.apple.com/macbook-neo/`.

El analisis se apoya en cuatro fuentes observables:
la homepage publica,
la captura real del hero hecha con Puppeteer a `1440x900`,
el CSS compilado de overview/localnav/globalheader,
y los assets raster visibles que Apple sirve en la experiencia.

Cuando un valor no fue visible de forma directa se marca como `(no detectado)`.
Cuando un valor se completo para volver utilizable el sistema se marca como `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmosfera

MacBook Neo se aleja del tono tecnico sobrio que domina muchas paginas de hardware.

Apple construye aqui una atmosfera juguetona,
ligera,
y sorprendentemente juvenil,
pero sin abandonar su precision industrial.

La marca no vende el equipo como una herramienta austera.

Lo vende como un objeto deseable,
ligero,
colorido,
y casi performativo.

El gesto dominante es la palabra "Neo" convertida en experiencia sensorial.

No es un simple nombre de producto.

Es una excusa para mezclar color,
movimiento,
materialidad,
manos humanas,
y una sensibilidad pop refinada.

La pagina mantiene el esqueleto visual clasico de Apple:
fondo claro,
gran aire,
tipografia protagonista,
CTA capsula,
y jerarquia extremadamente limpia.

Pero encima de ese esqueleto aparece un lenguaje cromatico mas emocional.

La headline con gradiente lima,
los cuatro colores del hardware,
y el uso de manos y uñas pintadas empujan la experiencia hacia una direccion mas cultural que puramente tecnica.

Eso la vuelve especialmente interesante para inspiracion:
no rompe la disciplina de Apple,
pero la recalibra hacia expresion,
identidad,
y deseo.

### Palabras clave de personalidad

- moderna
- optimista
- precisa
- juvenil
- cromatica
- refinada
- tactil
- pop-controlada
- art-directed

### Modo preferido

Claro.

El sistema se sostiene sobre `#F5F5F7`,
blancos puros,
y texto casi negro.

### Densidad del layout

Baja en cantidad de elementos,
alta en control.

Hay mucho espacio,
pero cada pieza tiene escala grande y una funcion clara.

### Nivel de ornamentacion

Medio.

La UI sigue siendo minimalista,
pero la direccion de arte del producto introduce color,
piel,
brillo,
y escena.

### Tesis atmosferica

La combinacion correcta para esta marca es:
aire premium
+ color emocional
+ copy breve
+ formas extremadamente pulidas.

Si quitas cualquiera de esas cuatro capas,
el sistema se vuelve o demasiado generico,
o demasiado infantil.

---

## 2. Paleta de Color y Roles Semanticos

El sistema cromatico visible tiene tres niveles:

1. neutros Apple de soporte,
2. azul retail para informacion comercial,
3. familia de color de producto para identidad emocional.

La fuerza del sistema no esta en llenar toda la UI de color.

Esta en reservar el color para donde importa.

El fondo sigue casi neutro.

Los colores brillantes viven en la tipografia hero,
en el producto,
y en algunos acentos.

### 2.1 Colores estructurales observados

| Nombre | Variable sugerida | Valor | Rol |
|---|---|---|---|
| Apple Light | `--neo-bg` | `#F5F5F7` | fondo principal de page sections y hero |
| White | `--neo-surface` | `#FFFFFF` | tarjetas, surfaces y fondos puros |
| Soft Neutral | `--neo-surface-soft` | `#EDEDF2` | rellenos suaves y separacion discreta |
| Hairline | `--neo-border-soft` | `#E8E8ED` | bordes muy sutiles |
| Ink | `--neo-ink` | `#1D1D1F` | texto principal y botones oscuros |
| Secondary Ink | `--neo-ink-soft` | `#6E6E73` | texto de apoyo |
| Muted Ink | `--neo-muted` | `#86868B` | metadata y ayudas secundarias |

### 2.2 Colores de retail y navegacion

| Nombre | Variable sugerida | Valor | Rol |
|---|---|---|---|
| Apple Blue | `--neo-blue` | `#0071E3` | ribbon comercial y CTA de sistema Apple |
| Apple Blue Hover | `--neo-blue-600` | `#0066CC` | estados hover/link |
| Frost Nav | `--neo-frost` | `rgba(250,250,252,0.8)` | barra blur translcida |
| Frost Nav Dense | `--neo-frost-strong` | `rgba(250,250,252,0.92)` | fallback sin blur |
| Nav Line | `--neo-nav-line` | `rgba(0,0,0,0.16)` | borde/sombra minima inferible |

### 2.3 Colores de producto observados

| Nombre | Variable sugerida | Valor | Rol |
|---|---|---|---|
| Citrus Hero | `--neo-citrus` | `#DFE74F` | acento dominante, gradiente hero |
| Citrus Leaf | `--neo-citrus-deep` | `#5E9C2A` | contraste en el gradiente del hero |
| Citrus Glow | `--neo-citrus-bright` | `#E1DC05` | brillo de hardware y highlight |
| Indigo | `--neo-indigo` | `#545C70` | una de las cuatro opciones de producto |
| Indigo Deep | `--neo-indigo-deep` | `#31384A` | sombra para producto indigo |
| Blush | `--neo-blush` | `#CBB2B0` | producto rosado |
| Silver | `--neo-silver` | `#B9BCC2` | producto plata |
| Aqua Spill | `--neo-aqua` | `#5BE7D4` | brillo secundario en la pantalla del hero |

### 2.4 El gradiente headline

El dato cromatico mas distintivo del sitio no es un bloque.

Es el gradiente interno de "Hello, Neo."

Apple define una secuencia larga,
mascara la palabra,
y la hace viajar desde `#1D1D1F` hasta una banda lima muy luminosa,
para luego regresar a olivos y negros suaves.

Colores explicitamente observados dentro del gradiente:

- `#1D1D1F`
- `#666931`
- `#94993D`
- `#BAC046`
- `#CDD44B`
- `#DAE24E`
- `#DEE64F`
- `#DFE74F`
- `#8FB838`
- `#5E9C2A`
- `#406125`

### 2.5 Contraste WCAG util

| Par | Ratio aprox. | Uso recomendado |
|---|---:|---|
| `#1D1D1F` sobre `#F5F5F7` | `16+:1` | texto principal, headings, botones oscuros |
| `#6E6E73` sobre `#F5F5F7` | `4.8+:1` | body secundario y captions |
| `#86868B` sobre `#F5F5F7` | `3.3+:1` | solo metadata grande o detalles no criticos |
| `#F5F5F7` sobre `#0071E3` | `4.3+:1` | ribbon blanco sobre azul |
| `#1D1D1F` sobre `#DFE74F` | `11+:1` | texto oscuro sobre citrus |
| `#FFFFFF` sobre `#545C70` | `6+:1` | inversions sobre indigo |

### 2.6 Estados derivados para sistema

Apple no expone un sistema completo de error/success en esta pagina publica.

Para convertirlo en kit reutilizable conviene derivar:

| Estado | Valor | Fondo |
|---|---|---|
| Success | `#2F7A3E` | `#EAF6EC` |
| Warning | `#8D6B12` | `#FFF6D7` |
| Error | `#B44545` | `#FBEAEA` |
| Info | `#0071E3` | `#E8F2FE` |

Todos estos son `(derivado para completar el sistema)`.

### 2.7 Regla de uso del color

La pagina demuestra una regla muy Apple:

el color fuerte no debe inundar la interfaz.

Debe parecer caro precisamente porque aparece con restriccion.

Si un sistema inspirado en esta marca pinta botones,
cards,
fondos,
badges,
y navs con citrus al mismo tiempo,
pierde refinamiento inmediatamente.

---

## 3. Tipografia y Jerarquia

La familia visible dominante es `SF Pro`.

El CSS confirma usos de `SF Pro Text` y `SF Pro Display`.

La diferencia funcional es clara:

`Display` para navegacion mobile y grandes titulares,
`Text` para labels,
links,
CTA,
y copy operativo.

### 3.1 Familias observadas

| Rol | Familia original observada | Evidencia |
|---|---|---|
| Navegacion desktop | `SF Pro Text` | `#globalnav .globalnav-link` |
| Navegacion mobile | `SF Pro Display` | media query `max-width: 833px` |
| CTA hero | `SF Pro Text` | `.marquee-ctas-link` |
| Titular hero | `SF Pro Display` o mascarado custom sobre base Apple | headline principal mascarada |
| Mono | `(no detectado)` | no se expone una familia mono clara en la home |

### 3.2 Escala tipografica observable

| Token sugerido | Rango | Peso | Tracking | Uso |
|---|---|---|---|---|
| `display-hero` | `52px-138px` | `600-700` | `-0.03em` | pieza principal |
| `display-section` | `30px-56px` | `600` | `-0.02em` | bloques narrativos |
| `body-lg` | `18px-21px` | `400` | negativo suave | textos de apoyo premium |
| `body-md` | `15px-17px` | `400` | `-0.01em a -0.022em` | pricing, CTA, labels |
| `label-sm` | `12px` | `400-500` | mayusculas o minusculas sobrias | metadata |

### 3.3 Rasgos tipograficos

- curvas suaves
- peso medio con mucha limpieza
- tracking negativo leve
- line-height ajustado en display
- densidad optica alta sin parecer pesado

### 3.4 La headline como imagen tipografica

`Hello, Neo.` no es solo texto grande.

Es una mascarilla tipografica con gradiente.

Apple crea una especie de "wordmark temporal" para la campana.

Eso importa mucho:
la identidad no sale solo de la fuente.

Sale del tratamiento.

### 3.5 CTA y textos operativos

La regla funcional mas clara es la del CTA:

- `font-size: 17px`
- `line-height: 1.1764`
- `font-weight: 400`
- `letter-spacing: -0.022em`
- padding horizontal `22px`
- padding vertical `12px`

Es una mezcla muy Apple:
suficiente presencia para sentirse premium,
pero sin gritar.

### 3.6 Recomendacion de sustitucion para HTML portable

Como `SF Pro` no se sirve desde Google Fonts,
la version art-directed HTML usa:

- `Familjen Grotesk` para display
- `Instrument Sans` para body
- `IBM Plex Mono` para metadatos

Esto es `(derivado para render portable)`.

### 3.7 Regla de jerarquia

Si una pieza inspirada en esta pagina no puede leerse en tres golpes de vista,
esta mal jerarquizada.

Golpe 1:
nombre de producto.

Golpe 2:
headline emocional.

Golpe 3:
CTA/precio o mensaje secundario.

Todo lo demas debe quedar por debajo.

---

## 4. Layout, Ritmo y Espacio

La composicion es extremadamente abierta.

Apple consigue impacto no por acumulacion,
sino por aislamiento.

Cada modulo respira mucho.

Cada linea sabe exactamente donde cae.

### 4.1 Observaciones generales

- Hero centrado con stacking vertical muy claro.
- Maximos de alto controlados por viewport.
- Seccion welcome ocupando gran parte de la altura visible.
- Imagen del producto anclada visualmente bajo el texto.
- El ribbon comercial se monta sobre la zona superior sin contaminar el hero.

### 4.2 Escala espacial sugerida

| Token | Valor | Uso |
|---|---|---|
| `space-2` | `8px` | detalles internos |
| `space-3` | `12px` | pills, labels |
| `space-4` | `16px` | gaps medios |
| `space-5` | `20px` | layout estrecho |
| `space-6` | `24px` | bloques internos |
| `space-8` | `32px` | separacion entre grupos |
| `space-11` | `44px` | CTA y hero breathing room |
| `space-18` | `72px` | padding de seccion derivado |
| `space-24` | `96px` | respiracion expandida derivada |

### 4.3 Alturas observadas en hero

La propia CSS del hero define:

- eyebrow height `32px`
- headline height `84px`
- pricing height `21px`
- button height `44px`
- marquee padding top `66px`
- marquee padding bottom `27px`

En tablet y mobile esos valores se reducen,
pero el principio se mantiene:
headline dominante,
boton aislado,
precio como remate.

### 4.4 Ritmo visual

El ritmo esta basado en alternancia:

texto fuerte,
aire,
objeto.

texto fuerte,
aire,
objeto.

Esa repeticion hace que incluso una pagina muy comercial se sienta calmada.

### 4.5 Grid emocional

Aunque no se expone un grid con columnas a simple vista,
la composicion funcional se puede entender como:

- eje central dominante para titulares,
- modulo superior para informacion comercial,
- zona baja para producto,
- cortes limpios entre escenas.

### 4.6 Regla de espaciado

No pegar nunca el color mas intenso al texto mas intenso sin una camara de aire.

Apple siempre deja respiracion.

Ese vacio es parte del lujo visual.

---

## 5. Imagen, Producto y Direccion de Arte

La direccion de arte es la razon principal por la que esta pagina merece entrar en inspiracion.

No se limita a mostrar renders.

Construye escena.

### 5.1 Hero principal

La captura real muestra:

- logotipo Apple y utilidades minimas arriba,
- un ribbon azul de retail,
- `MacBook Neo`,
- la headline `Hello, Neo.`,
- CTA Buy,
- precio mensual,
- y la laptop citrus entrando desde abajo acompañada por manos reales.

Eso convierte el equipo en protagonista fisico,
no en objeto flotante abstracto.

### 5.2 Elementos recurrentes

- manos humanas
- uñas pintadas alineadas al color del hardware
- fondos blancos o neutros muy limpios
- encuadres grandes del producto
- close-ups que celebran color y material

### 5.3 Escena cromatica

Los cuatro colores visibles declarados por Apple son:

- Silver
- Blush
- Citrus
- Indigo

No son colores gritones al estilo juguete barato.

Son tonos suavizados,
ligeramente empolvados,
y calibrados para verse premium.

### 5.4 Imagen como argumento de marca

Apple no necesita explicar mucho en texto.

La imagen ya comunica:

- ligereza
- expresividad
- identidad
- facilidad
- afinidad cultural

### 5.5 Regla de encuadre

El producto casi nunca queda perdido en el canvas.

Siempre se acerca lo suficiente para que el material sea legible.

### 5.6 Regla de fondo

Fondo limpio.

Contraste suave.

Ninguna textura compite con el hardware.

### 5.7 Traduccion para sistemas propios

Si una marca inspirada en esta referencia quiere replicar la energia,
debe fotografiar o renderizar producto con:

- escala generosa
- manos u objetos que den humanidad
- color protagonista
- fondo quieto
- postproduccion casi invisible

No basta con poner un render centrado sobre blanco.

---

## 6. Componentes de Interfaz

Aunque la pagina se siente editorial,
sus componentes siguen siendo muy de producto.

### 6.1 CTA capsula

El boton principal observado es una capsula oscura,
compacta,
centrada,
y con texto blanco suave.

Propiedades clave:

- altura visual `44px`
- padding `12px 22px`
- fondo `#1D1D1F`
- texto `#F5F5F7`
- radio `999px`
- tracking negativo leve

### 6.2 Ribbon comercial

El ribbon azul funciona como aviso y como empuje de retail.

No se siente spam porque:

- es una sola linea,
- usa azul Apple canonico,
- se integra con el resto,
- y se anima hacia blanco en algunas variantes.

### 6.3 Navegacion blur

La capa superior usa:

- `rgba(250,250,252,0.8)`
- `saturate(180%) blur(20px)`
- texto negro al `80%`

Esto le da una sensacion de vidrio muy controlado,
mas realista que una glassmorphism decorativa.

### 6.4 Tarjetas y surfaces

No hay exceso de cards en la home,
pero los contenedores derivados coherentes deberian usar:

- fondo blanco puro
- borde muy suave
- radio `20px-24px`
- sombra baja y amplia

### 6.5 Pills y labels

Apple suele resolver metadata con texto pequeno y casi sin ruido visual.

Si se usan pills,
deben ser delgadas,
limpias,
y sin color estridente.

### 6.6 Links

El azul link visible `#0066CC` aparece como acento funcional.

No como color base de todo.

### 6.7 Estado de componente ideal

El componente Apple correcto parece inerte hasta que lo necesitas.

No busca protagonismo por si solo.

Eso es clave.

---

## 7. Motion y Transicion

La pagina integra motion,
pero lo hace desde continuidad y no desde showreel.

### 7.1 Motion observable

- hero con imagen/video enhanced
- gradiente headline con version activa
- ribbons con transicion de color
- nav blur y comportamiento sticky
- aparicion suave de ciertos bloques

### 7.2 Tono del movimiento

ligero,
silencioso,
fisico,
sin rebote caricaturesco.

### 7.3 Principios de motion deducidos

- easing suave
- duraciones medias
- cambios de estado discretos
- preferencia por revelar materialidad en vez de lanzar efectos

### 7.4 Motion recomendado para sistemas inspirados

| Uso | Duracion | Curva |
|---|---|---|
| Fade/translate de entrada | `500ms-800ms` | `cubic-bezier(.16,1,.3,1)` |
| Hover de card | `180ms-240ms` | ease-out suave |
| Cambio de ribbon color | `800ms` | ease-in-out |
| Ken Burns de hero | `18s-26s` | linear o ease-in-out muy leve |

### 7.5 Regla de motion

Si la animacion se nota mas que el producto,
esta fuera del sistema.

---

## 8. Voz, Copy y Jerarquia Verbal

El copy es brevissimo.

Apple deja que la forma haga mucho trabajo.

### 8.1 Titulares observados

- `MacBook Neo`
- `Hello, Neo.`
- `Silver, Blush, Citrus, and Indigo. Four stunning colors. One durable design.`
- `Love at first Mac.`
- `The muscle for your hustle.`
- `From to-do to ta-da.`

### 8.2 Rasgos verbales

- frases cortas
- remates memorables
- aliteracion ligera
- tono amistoso
- ausencia de jerga tecnica innecesaria
- confianza sin exclamaciones

### 8.3 Estructura verbal

Apple usa una formula simple:

1. nombre,
2. remate emocional,
3. prueba funcional,
4. llamada a accion.

### 8.4 Lo que no hace

No explica demasiado pronto.

No satura con specs en el hero.

No intenta sonar rebelde.

No copia el tono enterprise.

### 8.5 Regla de copy

Si una frase necesita dos comas y una subordinada para funcionar,
ya no suena a esta referencia.

---

## 9. Aplicacion Practica del Sistema

Esta referencia puede inspirar varias clases de marcas.

No solo hardware.

### 9.1 Donde funciona bien

- productos fisicos con identidad de color
- software que quiera verse mas humano
- campañas de lanzamiento con enfoque optimista
- sistemas de marca para educacion creativa
- paginas de coleccion o edicion especial

### 9.2 Donde no conviene copiarlo literal

- fintech sobria de alto riesgo
- legaltech conservadora
- dashboards densos de operaciones
- productos B2B con tono extremadamente serio

### 9.3 Que conviene tomar

- el control del aire
- la disciplina tipografica
- el uso reservado del color
- la mezcla de precision con tactilidad
- la claridad del CTA principal

### 9.4 Que conviene no copiar

- la iconografia Apple
- el azul retail como si fuera universal
- la escala exacta del hero si la marca no puede sostenerla
- el tono juvenil si el producto no tiene legitimidad para usarlo

### 9.5 Traduccion a sistema de marca

Una version adaptada para otra marca deberia preguntarse:

- cual es mi color-producto real,
- cual es mi equivalente de headline memorable,
- que gesto humano vuelve tangible el objeto,
- que tanto aire puedo permitirme sin perder conversion.

---

## 10. Implementacion y Tokens Reutilizables

Para convertir la pagina en sistema de trabajo,
conviene separar tres capas:

### 10.1 Capa base

- `--neo-bg: #F5F5F7`
- `--neo-surface: #FFFFFF`
- `--neo-ink: #1D1D1F`
- `--neo-ink-soft: #6E6E73`
- `--neo-blue: #0071E3`
- `--neo-citrus: #DFE74F`

### 10.2 Capa expresiva

- gradiente hero multilinea
- swatches de producto
- escenas con manos y close-up
- fondos con brillo apenas visible

### 10.3 Capa funcional

- CTA capsula
- ribbon
- nav blur
- cards con radio alto
- links azules

### 10.4 Tailwind/utility mapping sugerido

| Rol | Utility sugerida |
|---|---|
| Fondo base | `bg-[#F5F5F7]` |
| Surface | `bg-white` |
| Texto principal | `text-[#1D1D1F]` |
| Texto secundario | `text-[#6E6E73]` |
| CTA | `rounded-full bg-[#1D1D1F] px-6 py-3 text-[#F5F5F7]` |
| Ribbon | `bg-[#0071E3] text-[#F5F5F7]` |
| Card | `rounded-[24px] border border-[#E8E8ED] bg-white shadow-[0_24px_60px_-34px_rgba(29,29,31,.18)]` |

### 10.5 Riesgo principal al implementarlo

Volverlo demasiado decorativo.

El sitio real no es maximalista.

Es pulido,
limpio,
y economico en interfaz.

### 10.6 Checklist rapido

- hero con mucho aire
- headline grande y memorable
- uno o dos acentos de color maximo por vista
- CTA oscuro simple
- captions sobrios
- motion tranquilo

---

## Anexo. Evidencia Puntual Extraida

### A.1 Strings observados en HTML

- `Hello, Neo.`
- `Silver, Blush, Citrus, and Indigo. Four stunning colors. One durable design.`

### A.2 Tokens observados en CSS

- `backdrop-filter: saturate(180%) blur(20px)`
- `rgba(250, 250, 252, .8)`
- `rgb(0,113,227)`
- `rgb(0,102,204)`
- `background:#f5f5f7`
- `font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- `font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- `--sk-button-padding-horizontal: 22px`
- `--sk-button-padding-vertical: 12px`
- `letter-spacing: -0.022em`

### A.3 Assets observados

- `hero_static__c07b68h6ap2e_xlarge.jpg`
- `design_endframe__ds3qdxgq7zki_xlarge.png`
- `highlights_colors_endframe__c5rr2wp9mp0m_large.jpg`

### A.4 Derivados declarados

- estados success/warning/error
- sombras de card reutilizables
- algunos radios expandidos para modulo editorial
- familia render HTML sustituta

### A.5 Dictamen final

La identidad de `MacBook Neo` demuestra como Apple puede salir de su minimalismo monocromatico sin perder control.

Su fuerza no esta solo en el color.

Esta en como el color convive con precision,
aire,
tipografia rigurosa,
y una direccion de arte que hace del hardware una escena cultural.