---
version: "1.0"
name: "APECHAIN"
description: "Sistema visual web3 de alto contraste: shell dark-navy, azul electrico dominante, superficies hielo para spotlight y titulares comprimidos que convierten la landing en cartel de gaming onchain."
colors:
  primary: "#0054FA"
  primary-hover: "#4785FC"
  primary-active: "#002787"
  secondary: "#96BBFF"
  accent: "#E2F0FF"
  accent-soft: "#CAD2E5"
  neutral: "#FFFFFF"
  background: "#020315"
  surface: "#011B5A"
  surface-elevated: "#1A3570"
  text-primary: "#E2F0FF"
  text-secondary: "#B8C9DB"
  text-muted: "#7D89B8"
  text-on-primary: "#FFFFFF"
  text-on-secondary: "#020315"
  border: "#46558F"
  border-subtle: "#1A3570"
  success: "#5BDB92"
  success-bg: "#102D24"
  warning: "#F4C251"
  warning-bg: "#33260A"
  error: "#FF6F7D"
  error-bg: "#3A131A"
  info: "#96BBFF"
  info-bg: "#132A56"
typography:
  display-lg:
    fontFamily: "manuka"
    fontSize: "120px"
    fontWeight: 400
    lineHeight: "0.785"
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.75"
  label-md:
    fontFamily: "DM Mono"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: "0.10em"
rounded:
  sm: "8px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "15px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "15px 24px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    rounded: "{rounded.sm}"
    padding: "24px"
---

# DESIGN.md - APECHAIN

> Sistema visual generado desde `https://apechain.com/`.
> Los valores observados salen del HTML y CSS publico del sitio vivo. Todo lo que completa el sistema sin aparecer explicito en la fuente queda marcado como `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmosfera

APECHAIN se comporta como una landing de cultura onchain que mezcla gesto de cartel, tono gaming y estructura de portal. La identidad nace del choque entre un shell muy oscuro, casi negro-azul, y superficies de hielo luminoso que entran como golpes teatrales dentro de los bloques spotlight y de apps. El azul `#0054FA` es la firma que conecta branding, iconografia, fondos y llamadas de atencion.

La voz visual no es minimalista en el sentido silencioso. Es directa, comprimida y escenica. La display `manuka` se usa como un martillo tipografico en mayusculas, con line-height `0.785` observado en multiples headings, mientras `DM Sans` resuelve el cuerpo con legibilidad y `DM Mono` da la capa de metadata, labels y tono operativo. Esa mezcla hace que el sitio se sienta entre portal de ecosystem y poster de evento.

La traduccion digital fiel debe preservar ese contraste: contenedores anchos, headline comprimido, blancos frios muy puntuales, azul electrico como eje y cards que parecen assets de showcase, no paneles enterprise. Cuando ApeChain funciona visualmente, parece una red viva donde cada DApp es una pieza de campaña.

**Palabras clave de personalidad**: onchain, gaming, comprimido, teatral, frio, electrico

**Densidad del layout**: media, con heroes y franjas muy abiertas

**Modo preferido**: dark

**Nivel de ornamentacion**: medio-alto, con fotografia, gradientes, glows y piezas flotantes

**Audiencia visual objetivo**: builders, gamers, collectors y publico crypto que busca energia de ecosystem mas que sobriedad SaaS

---

## 2. Paleta de Colores y Roles Semanticos

La paleta observable se apoya en un azul electrico dominante y una familia de azules frios que se escalonan desde navy profundo hasta hielo casi blanco. El negro puro aparece en cabeceras, overlays y contraste tipografico. En secciones spotlight el sistema rompe el shell oscuro con paneles `#E2F0FF`, generando una tension muy propia entre noche y flash.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul Ape | `--color-primary` | `#0054FA` | acento principal, titulares de timeline, focus de marca | `#FFFFFF` |
| Azul hover | `--color-primary-hover` | `#4785FC` | hover y glow cromatico `(derivado para completar el sistema)` | `#020315` |
| Azul active | `--color-primary-active` | `#002787` | pressed state `(derivado para completar el sistema)` | `#FFFFFF` |
| Azul cielo | `--color-secondary` | `#96BBFF` | supporting text, iconos, degradados frios | `#020315` |
| Hielo | `--color-accent` | `#E2F0FF` | paneles spotlight, texto sobre shell oscuro, fondos frios | `#020315` |
| Hielo suave | `--color-accent-soft` | `#CAD2E5` | soporte de cards y tints frios | `#020315` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Canvas | `--color-bg` | `#020315` | shell principal, hero, header |
| Surface | `--color-surface` | `#011B5A` | bloques azules profundos, fondos internos |
| Surface elevated | `--color-surface-elevated` | `#1A3570` | cards, overlays, contenedores destacados |
| Borde | `--color-border` | `#46558F` | outline visible sobre azules |
| Borde sutil | `--color-border-subtle` | `#1A3570` | separacion suave en shells oscuros |

### Colores de texto

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#E2F0FF` | body y headings sobre dark shell |
| Texto secundario | `--color-text-secondary` | `#B8C9DB` | descripciones y supporting copy |
| Texto muted | `--color-text-muted` | `#7D89B8` | labels secundarios y metadata |
| Texto sobre primario | `--color-text-on-primary` | `#FFFFFF` | sobre azul electrico |
| Texto sobre secundario | `--color-text-on-secondary` | `#020315` | sobre hielo y blanco |

### Colores de estado

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Success | `--color-success` | `#5BDB92` | exito `(derivado para completar el sistema)` | `#020315` |
| Success bg | `--color-success-bg` | `#102D24` | fondo de exito `(derivado para completar el sistema)` | `#E2F0FF` |
| Warning | `--color-warning` | `#F4C251` | warning `(derivado para completar el sistema)` | `#020315` |
| Warning bg | `--color-warning-bg` | `#33260A` | fondo warning `(derivado para completar el sistema)` | `#E2F0FF` |
| Error | `--color-error` | `#FF6F7D` | error `(derivado para completar el sistema)` | `#020315` |
| Error bg | `--color-error-bg` | `#3A131A` | fondo error `(derivado para completar el sistema)` | `#E2F0FF` |
| Info | `--color-info` | `#96BBFF` | info y badges de apoyo | `#020315` |
| Info bg | `--color-info-bg` | `#132A56` | fondo info `(derivado para completar el sistema)` | `#E2F0FF` |

---

## 3. Reglas de Tipografia

```css
--font-heading: 'manuka', 'Teko', sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'DM Mono', monospace;
```

**Google Fonts operativo**
```html
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota de sustitucion**: `manuka` es la fuente real observada en el CSS del sitio, cargada como asset local. Para HTML portable la sustitucion recomendada es `Teko`, porque conserva verticalidad, compresion y ritmo de cartel sin caer en una grotesca neutra.

### Escala tipografica

| Token | rem | px | line-height | uso |
|-------|-----|----|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | metadata, pills, labels mono |
| `--text-sm` | 0.875rem | 14px | 1.45 | body corto, supporting copy |
| `--text-base` | 1rem | 16px | 1.75 | cuerpo principal |
| `--text-lg` | 1.25rem | 20px | 1.5 | intro paragraphs |
| `--text-xl` | 1.625rem | 26px | 1.2 | subtitulos y nombres destacados |
| `--text-display-sm` | 3rem | 48px | 0.8 | titulares de modulo |
| `--text-display-md` | 7.5rem | 120px | 0.785 | category labels observadas |
| `--text-display-lg` | 12.5rem | 200px | 0.9 | timeline headline observada |

### Pesos tipograficos

```css
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
```

### Letter-spacing

```css
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.05em;
--tracking-wider: 0.10em;
--tracking-display: 0.01em;
```

**Regla clave**: la display nunca debe parecer elegante ni redondeada. Debe sonar industrial, comprimida y brutal. El cuerpo en `DM Sans` limpia la lectura, pero no debe ganar mas presencia que la headline.

---

## 4. Estilos de Componentes

### Boton primario, observado por patron visual

```css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 15px 24px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #020315;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.btn-primary:hover {
  background: #E2F0FF;
  box-shadow: 0 0 24px rgba(150, 187, 255, 0.70);
  transform: translateY(-1px);
}

.btn-primary:active {
  background: #CAD2E5;
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: 2px solid #0054FA;
  outline-offset: 3px;
}
```

### Boton secundario, observado por patron visual

```css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.20);
  background: transparent;
  color: #E2F0FF;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.btn-secondary:hover {
  border-color: #96BBFF;
  color: #96BBFF;
}
```

### Inputs, derivado desde sistema observable

```css
.field {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #46558F;
  border-radius: 8px;
  background: #011B5A;
  color: #E2F0FF;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
}

.field::placeholder {
  color: #7D89B8;
}

.field:focus {
  outline: none;
  border-color: #96BBFF;
  box-shadow: 0 0 0 3px rgba(0, 84, 250, 0.24);
}
```

### Cards, observadas en features y app tiles

```css
.card {
  overflow: hidden;
  border-radius: 8px;
  background: #1A3570;
  border: 1px solid #46558F;
  padding: 24px;
  box-shadow: 0 20px 42px rgba(2, 3, 21, 0.28);
}

.card-title {
  font-family: 'manuka', 'Teko', sans-serif;
  font-size: 48px;
  line-height: 0.82;
  text-transform: uppercase;
  color: #FFFFFF;
}

.card-copy {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #B8C9DB;
}
```

### Badges y categorias

```css
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.30);
  color: #FFFFFF;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
```

### Alertas y toasts, derivado para completar el sistema

```css
.toast {
  border-radius: 16px;
  border: 1px solid #46558F;
  padding: 16px 18px;
  background: #011B5A;
  color: #E2F0FF;
}

.toast--success { border-color: #5BDB92; }
.toast--warning { border-color: #F4C251; }
.toast--error { border-color: #FF6F7D; }
```

### Navegacion / Header

```css
.header-shell {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 100%);
}

.header-shell a {
  color: #FFFFFF;
  font-family: 'manuka', 'Teko', sans-serif;
  font-size: 26px;
  line-height: 0.785;
  text-transform: uppercase;
}
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
```

### Contenedores

| Token | Valor | Uso |
|------|-------|-----|
| `--container-max` | `1440px` | shell general observado |
| `--container-cols` | `12` | grid desktop observable |
| `--container-pad-mobile` | `24px` | padding lateral small |
| `--container-pad-desktop` | `32px` | padding lateral desktop |

### Grid

```css
.grid-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
```

### Filosofia de espaciado

La pagina no vive de una sola columna editorial. Vive de contraste entre piezas inmensas y modulos muy contenidos. Por eso el espacio no busca elegancia silenciosa sino escenario: titulares enormes, separaciones largas, cards respiradas y bloques spotlight con margen suficiente para que el cartel tipografico golpee.

### Anchuras recomendadas

| Modulo | Max width |
|--------|-----------|
| Hero headline | `14ch` observado |
| Intro body | `50ch` observado |
| App tile | `326px` observado en slider |
| Feature card | `350px` observado |
| Spotlight copy | `42ch` aprox |

---

## 6. Profundidad y Elevacion

APECHAIN usa profundidad por capas, gradientes y blur, no por skeuomorfismo. El header flota con un degradado oscuro, las CTAs pueden emitir glow blanco o azul, y las cards se ven como superficies recortadas dentro de un shell profundo.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-card: 0 20px 42px rgba(2, 3, 21, 0.28);
--shadow-glow-white: 0 0 24px rgba(255, 255, 255, 0.70);
--shadow-glow-blue: 0 0 24px rgba(150, 187, 255, 0.70);
--shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.32);
```

### Niveles de elevacion

| Nivel | Uso | Tratamiento |
|------|-----|-------------|
| 0 | shell y fondos | sin sombra, depende del degradado |
| 1 | pills y tags | borde o fill translucido |
| 2 | cards de apps | sombra card + radius 8px |
| 3 | CTA y spotlight media | glow o overlay controlado |
| 4 | hero y scenes | blur ambiental y fondos con perspectiva |

### Radios de borde

```css
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
```

**Regla de profundidad**: si algo necesita mas presencia, primero dale contraste de color y escala. El glow se usa como acento raro, no como mascara sobre todo.

---

## 7. Lo que Si y lo que No

### Si hacer

1. **Si usar `#0054FA` como eje narrativo**, porque el sitio entero se organiza desde ese azul y no desde varios acentos rivales.
2. **Si sostener el pairing `manuka` + `DM Sans` + `DM Mono`**, porque la mezcla de cartel, lectura y label es la firma visual principal.
3. **Si alternar shell oscuro con paneles hielo**, porque ese quiebre genera el dramatismo propio del spotlight.
4. **Si dejar titulares realmente grandes**, porque la pagina necesita sonar a ecosystem vivo y no a micrositio discreto.
5. **Si usar cards con imagen y copy comprimido**, porque la sensacion es de showcase mas que de dashboard.
6. **Si reservar el glow para CTA o momentos premium**, porque cuando todo brilla la identidad pierde filo.

### No hacer

1. **No convertir todo en un azul medio uniforme**, porque APECHAIN vive del contraste entre negro, navy, hielo y azul electrico.
2. **No reemplazar la display por una sans neutra**, porque la compresion de `manuka` es una decision de marca, no solo una fuente.
3. **No volver los bloques demasiado redondeados o blandos**, porque la pagina necesita dureza de poster y tech/gaming.
4. **No usar demasiados acentos extra**, porque la marca ya tiene suficiente energia con su familia de azules.
5. **No comprimir verticalmente las secciones**, porque la escala del titular y de las escenas necesita aire.
6. **No construir componentes con lenguaje enterprise gris**, porque eso rompe el tono de ecosystem y aventura onchain.

---

## 8. Comportamiento Responsive

### Breakpoints observados o coherentes

```css
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1440px;
```

### Cambios por breakpoint

| Breakpoint | Cambio |
|-----------|--------|
| `< 640px` | menu hamburguesa, headlines grandes pero apiladas, cards a una columna |
| `>= 768px` | sliders y grids con mayor respiracion, labels mas visibles |
| `>= 1024px` | grid de 12 columnas completo y category labels gigantes |
| `>= 1440px` | maxima amplitud del shell, sin estirar mas el contenido central |

### Touch targets

```css
--touch-target-min: 44px;
--pill-height: 54px;
--icon-hitbox: 44px;
```

### Filosofia responsive

En mobile se puede sacrificar parte del catalogo visible, pero no la sensacion de cartel. La promesa tiene que seguir sonando grande, aunque el slider se simplifique y el hero se vuelva una sola columna.

---

## 9. Guia de Prompts para Agentes

### Inicializacion de sesion

```text
Trabaja dentro del sistema visual de APECHAIN.
Usa shell oscuro #020315, acento #0054FA, hielo #E2F0FF, display comprimida tipo manuka y soporte DM Sans + DM Mono.
La interfaz debe sentirse onchain, gaming y de alto contraste. No conviertas la marca en un SaaS neutro.
```

### Crear una nueva pantalla

```text
Crea una pantalla para APECHAIN manteniendo su tono de ecosystem gaming onchain.
Usa headline comprimida, shell dark-navy, cards con imagen y acento azul electrico.
Introduce superficies hielo solo cuando la composicion necesite un gesto spotlight fuerte.
```

### Anadir componente al UI kit

```text
Anade un componente nuevo al sistema de APECHAIN.
Debe usar el azul #0054FA con moderacion, labels en DM Mono, y una estructura mas de showcase que de backoffice.
Si algo no existe en la fuente observable, marcalo como derivado para completar el sistema.
```

### Revision de consistencia

```text
Revisa esta interfaz como si fuera de APECHAIN.
Verifica si la display sigue siendo comprimida, si el contraste entre shell dark y spotlight hielo se mantiene, y si el azul electrico se usa como foco real.
```

### Variante de campana

```text
Genera una variante de campana para APECHAIN sin perder el sistema base.
Puedes ampliar glow, fotografia o dramatismo del azul, pero no debes cambiar la familia cromatica central ni rebajar la escala del titular.
```

---

## 10. Movimiento (Motion)

El sitio observable usa carruseles, marquee y transiciones cortas. La sensacion general es rapida y en loop, mas propia de un portal vivo que de una landing quieta.

### Nivel de motion

Medio, con energia constante y loops horizontales.

### Duraciones y easings

```css
--motion-fast: 150ms;
--motion-base: 300ms;
--motion-slow: 400ms;
--motion-marquee: 10s;
--ease-standard: cubic-bezier(.4, 0, .2, 1);
```

### Propiedades animadas

| Elemento | Propiedad |
|---------|-----------|
| CTA | color, box-shadow, translateY |
| marquee de apps | translateX |
| header | transform, opacity |
| links | color |
| backgrounds | blur y desplazamiento leve |

### Patrones recomendados

1. Hover de CTA con glow blanco o azul.
2. Marquee continuo en sliders de apps `(observado)`.
3. Header que desaparece y reaparece con scroll `(observado por clases header_scrollUp)`.
4. Reels o backgrounds con blur suave en secciones spotlight.

### Prefers reduced motion

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

**Regla de motion**: el movimiento debe empujar energia, no confundir jerarquia. Si no mejora la sensacion de ecosystem vivo, sobra.

---

## Anexo: Stack tecnico detectado

| Area | Deteccion | Nota |
|------|-----------|------|
| Framework | Next.js | observado por `_next/static/` y estructura App Router |
| CMS / contenido | Sanity | assets e imagenes servidos desde `cdn.sanity.io` |
| Tipografia | fuentes locales + Google-style fallbacks | `manuka`, `dmSans`, `DM Mono` observadas en CSS |
| Carousel | Embla | observado por clases `embla_*` |
| Analytics | Plausible + GTM | scripts preloaded visibles en el HTML |
| Motion | CSS transitions + marquees | observado en clases y keyframes |
| 3D / WebGL | no detectado | no verificable desde la capa publica analizada |

### Resumen ejecutivo para implementacion

1. Shell oscuro `#020315`.
2. Azul electrico `#0054FA` como eje.
3. Hielo `#E2F0FF` para spotlight y contraste.
4. Display comprimida tipo `manuka`.
5. Cuerpo en `DM Sans`, labels en `DM Mono`.
6. Cards con imagen y tone of ecosystem.
7. Movimiento corto, loops horizontales y glow puntual.

### Valores no detectados con certeza

- Sistema completo de semanticos de producto: `(no detectado)`.
- Grid interno de experiencias post-click: `(no detectado)`.
- Cualquier logica 3D o canvas especial fuera del marketing visible: `no verificable`.

### Cierre

APECHAIN no vende sobriedad. Vende actividad. Su interfaz debe sentirse como una ciudad crypto encendida: negra en la base, azul en el impulso, hielo en el spotlight y comprimida en la voz.