---
name: ArenaPro
description: Sistema de identidad visual para ArenaPro basado en una guía observada por imagen, con una paleta lavanda dominante, contraste grafito y un lenguaje editorial limpio orientado a branding, capítulos y aplicaciones de logotipo.
mode: light
source: "C:\\Users\\USER\\claude-skill-library-v2\\utilidades\\DESIGN Style guides 2\\screens 2\\ARENAPRO-Brand-Identity-Brand-Guidelines-2026-06-21-12_19_59.png"
sourceType: image
sourceAccuracy: "Valores cromáticos medidos desde la imagen. Tipografías y algunos pesos detectados de forma aproximada desde el screenshot."
atmosphere:
  - editorial
  - premium
  - geometric
  - luminous
  - disciplined
colors:
  primary:
    name: Arena Violet
    hex: "#6E42B7"
    usage: Titulares, keylines, bloques de identidad y protagonismo visual
  secondary:
    name: Soft Lavender
    hex: "#A37AD9"
    usage: Apoyo tonal, degradados, estados medios y módulos tipográficos
  tertiary:
    name: Electric Periwinkle
    hex: "#5C63F2"
    usage: Acento de contraste en paleta secundaria observada
  quaternary:
    name: Sand Gold
    hex: "#DAB64C"
    usage: Contrapeso cálido dentro de supporting palette
  neutral:
    name: Graphite Plum
    hex: "#2F2446"
    usage: Fondos oscuros, logos invertidos y contraste premium
  background:
    name: Cloud White
    hex: "#F3F1F6"
    usage: Canvas general de la guía
  surface:
    name: Pure White
    hex: "#FFFFFF"
    usage: Tarjetas, mesas de trabajo y planos de contenido
  ink:
    name: Violet Ink
    hex: "#6B43B2"
    usage: Texto principal y navegación
  inkSoft:
    name: Dusty Lilac
    hex: "#8E79AE"
    usage: Texto secundario, metadata y apoyos editoriales
  border:
    name: Mist Line
    hex: "#DDD5E8"
    usage: Bordes finos, separadores y retículas
typography:
  display:
    family: "Covila Regular (no detectado con certeza)"
    role: Headings, chapter covers, hero titles
    weight: "400 aprox"
    size: "72px aprox"
    lineHeight: 0.92
    letterSpacing: "-0.05em"
    htmlFamily: "Space Grotesk"
    htmlNote: "Aproximado desde imagen. Sustituto HTML de espíritu geométrico y editorial."
  body:
    family: "metrisch / geometric sans (aproximado)"
    role: Body copy, explanatory notes, specification text
    weight: "400 aprox"
    size: "16px"
    lineHeight: 1.65
    letterSpacing: "-0.01em"
    htmlFamily: "Manrope"
    htmlNote: "Aproximado desde imagen. Sustituto HTML para texto limpio y contemporáneo."
  support:
    family: "Lufga (aproximado)"
    role: Secondary headings, family labels, specimen callouts
    weight: "500 aprox"
    size: "18px aprox"
    lineHeight: 1.3
    letterSpacing: "-0.02em"
    htmlFamily: "Plus Jakarta Sans"
    htmlNote: "Detectado por nombre en la guía; usado aquí como apoyo conceptual."
  multilingual:
    family: "URW Geometric Arabic (aproximado)"
    role: Multilingual specimen support
    weight: "400 aprox"
    htmlFamily: "(no detectado)"
    htmlNote: "La guía muestra un specimen árabe, pero no se detectó un equivalente HTML seguro en esta conversión."
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
spacing:
  xs: 6px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
components:
  chapterCover:
    background: "linear-gradient(135deg, #FFFFFF 0%, #EAE4F2 55%, #BCA7DA 100%)"
    text: "#6E42B7"
    border: "1px solid rgba(110, 66, 183, 0.12)"
    radius: "32px"
    padding: "40px"
  specimenCard:
    background: "#FFFFFF"
    text: "#6B43B2"
    border: "1px solid #DDD5E8"
    radius: "20px"
    padding: "24px"
    shadow: "0 18px 50px -34px rgba(84, 53, 145, 0.22)"
  logoPanel:
    background: "#2F2446"
    text: "#FFFFFF"
    border: "1px solid rgba(255,255,255,0.12)"
    radius: "20px"
    padding: "18px"
  swatchCard:
    background: "#FFFFFF"
    border: "1px solid #DDD5E8"
    radius: "18px"
    padding: "18px"
motion:
  level: restrained
  durations: "180ms, 320ms"
  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
  pattern: Soft fades, slight lifts and chapter-like reveal pacing
imagery:
  direction: Clean chapter dividers, print-like page composition, geometric pattern tiles and controlled logo applications
  rule: Mantener mucho espacio en blanco y jerarquía editorial; evitar ruido 3D, sombras dramáticas o fondos recargados
---

# 1. Brand summary

ArenaPro se presenta como una identidad limpia, geométrica y muy controlada. La guía observada trabaja por capítulos, con cubiertas suaves, una paleta violeta muy reconocible y aplicaciones de logotipo mostradas con disciplina casi editorial.

La marca se siente corporativa pero no rígida. Tiene una cualidad premium por el uso del blanco, el lavanda y el grafito profundo, y por la manera en que la información se organiza en mesas amplias, tarjetas rectas y paneles tipográficos muy claros.

# 2. Source reliability

- Fuente usada: screenshot estático de la guía.
- Colores: extraídos y aproximados desde muestreo visual de la imagen.
- Tipografías: detectadas de forma parcial por lectura visual.
- Datos no detectados con certeza: CSS variables originales, radios exactos, sombras exactas, pesos exactos y archivo fuente tipográfico real.

Cuando un dato no se pudo confirmar de forma segura se deja como aproximado o no detectado.

# 3. Color system

## Core palette

- `Arena Violet` `#6E42B7`: color de identidad dominante.
- `Soft Lavender` `#A37AD9`: transición tonal y soporte.
- `Graphite Plum` `#2F2446`: contraste oscuro para versiones inversas.
- `Cloud White` `#F3F1F6`: fondo principal percibido.
- `Pure White` `#FFFFFF`: superficie de tarjetas y specimen sheets.

## Supporting palette

- `Electric Periwinkle` `#5C63F2`
- `Sand Gold` `#DAB64C`
- `Dusty Lilac` `#8E79AE`
- `Mist Line` `#DDD5E8`

## Usage

- El violeta principal gobierna títulos, reglas, logotipo y paneles destacados.
- El grafito aparece como base para logos invertidos o variantes de alta autoridad.
- El periwinkle y el gold se usan como acentos de apoyo, no como nuevo centro visual.
- Las superficies deben mantenerse muy claras para que la identidad conserve su aire de manual premium.

# 4. Typography

## Heading system

- Original observado: `Covila Regular (no detectado con certeza)`
- HTML substitute: `Space Grotesk`
- Rol: portadas, chapter titles, grandes titulares
- Peso observado: `400 aprox`
- Escala observada: `72px aprox`
- Tracking: `-0.05em`

La cubierta y los grandes titulares usan una sans geométrica de mucha presencia. En esta conversión, `Space Grotesk` reproduce esa energía limpia y con tensión editorial.

## Body system

- Original observado: `metrisch / geometric sans (aproximado)`
- HTML substitute: `Manrope`
- Rol: párrafos, notas, descripciones y especificaciones
- Peso base: `400 aprox`
- Escala: `16px`
- Interlineado: `1.65`

El cuerpo es neutro y altamente legible. Debe servir a la estructura de manual sin competir con las cubiertas o con las planchas tipográficas.

## Secondary / support system

- Original observado: `Lufga (aproximado)`
- Uso: subheads y nombres de familia en panels tipográficos
- Observación: aparece como una voz complementaria dentro del capítulo de typography

## Multilingual support

- Original observado: `URW Geometric Arabic (aproximado)`
- Uso: specimen multilingüe
- HTML fallback: `(no detectado)`

# 5. Composition cues

- Composición basada en capítulos amplios.
- Mucho blanco y márgenes generosos.
- Jerarquía con títulos violeta muy grandes.
- Tarjetas rectas para palette, specimen y aplicaciones de logo.
- Uso de gradients muy suaves en cubiertas, no en todos los módulos.

# 6. Components

## Chapter cover

- Fondo claro con degradado lavanda.
- Título violeta grande.
- Espacio negativo abundante.

## Swatch cards

- Fondo blanco.
- Borde lila muy suave.
- Información breve con rol del color.

## Specimen cards

- Fondo blanco.
- Letras de gran escala a la izquierda.
- Datos de familia y uso a la derecha.
- Tratamiento tipo ficha.

## Logo application panel

- Módulos de logo sobre blanco, violeta y grafito.
- Grid ordenada.
- No se observan sombras expresivas; prima el contraste de campo.

# 7. Pattern and symbols

La guía incluye al menos un pattern repetitivo derivado del gesto del isotipo. Se usa como tile sobre fondo claro y funciona como un activo de identidad, no como ornamento suelto.

Debe mantenerse geométrico, repetible y bien alineado. No conviene deformarlo ni mezclarlo con efectos fotográficos.

# 8. Motion

- Nivel: `restrained`
- Duraciones sugeridas: `180ms`, `320ms`
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`

Aunque la guía fuente es estática, la identidad sugiere transiciones sobrias, deslizamientos mínimos y fades suaves. El comportamiento debe sentirse de portfolio editorial, no de dashboard agitado.

# 9. Elevation and depth

La profundidad es ligera. La imagen no muestra un sistema de sombras dramático; el volumen se apoya más en contraste de bloques, keylines finos y superposición ordenada de paneles.

- Sombras exactas: `(no detectado)`
- Recomendación de traducción HTML: usar sombras muy suaves y bordes finos.

# 10. Shapes

- Radios observados: suaves a medios, aprox `8px` a `24px`
- Esquinas jamás agresivas
- Tarjetas y paneles con curva contenida
- Marcos rectos y elegantes para specimen y logos

# 11. Do

- Usar el violeta como ancla principal.
- Respetar el aire editorial y el espacio en blanco.
- Mantener los paneles tipográficos muy ordenados.
- Tratar pattern y logos como activos de sistema, no como decoración casual.

# 12. Don't

- No saturar la interfaz con demasiados acentos simultáneos.
- No convertir la marca en una UI glassmorphism o neón.
- No usar sombras pesadas que rompan la limpieza del manual.
- No invadir la columna de copy con pattern o logo tiles.