ArenaPro Identity System Brand Style Guide
← Color Fonts

ArenaPro

Sistema light de tipo editorial: lavanda #6E42B7 como ancla, grafito #2F2446 como contraste, una cubierta de capitulo muy limpia y paneles geometricos para specimen, pattern y aplicaciones del logotipo.

Fuente: screenshot estatico. Colores medidos desde imagen. Tipografias, pesos exactos, radios exactos y CSS variables fuente: no detectado o aproximado cuando se indica.

FUENTE: ARENAPRO-Brand-Identity-Brand-Guidelines-2026-06-21-12_19_59.png

Typography

Aproximada · geometrica
Aa
Heading system
Original observado: Covila Regular (no detectado con certeza)
HTML substitute: Space Grotesk · 72px aprox · 400 aprox
Brand Colors
Typography
Aa
Body system
Original observado: metrisch / geometric sans (aproximado)
HTML substitute: Manrope · 16px / 1.65
ArenaPro organiza la informacion como una guia premium: titulares muy limpios, mucho respiro y descripciones sobrias.
Support system · Lufga (aproximado) y un specimen arabe URW Geometric Arabic observado como soporte multilingue.
Headings · Body · Support · Multilingual

Colors

Light · violeta dominante
Primary #6E42B7
Secondary #A37AD9
Tertiary #5C63F2
Neutral #2F2446

Background #F3F1F6 · Surface #FFFFFF · Text #6B43B2 / #8E79AE · Border #DDD5E8 · Accent #5C63F2 / #DAB64C

El violeta manda en titulares y branding. El grafito resuelve inversos. El periwinkle y el gold aparecen como apoyo, no como nuevo centro visual.

Overview

Editorial grid
LayoutChapter-based grid
Content widthFull Bleed
FramingClean editorial cards
SignalPattern + logo governance

Components

Specimen + logo
Arena Violet Soft Lavender Graphite Plum Observed logo rules
ArenaPro
Positive on light
ArenaPro
Reverse on violet

Buttons

Primary + tonal
Primary Secondary Quiet
Primary#6E42B7 · text #FFFFFF · full radius
Supportsoft white field · violet text

Spacing

Wide margins
Chapter spacing
Editorial rhythm
La identidad respira con margenes generosos, paneles separados y una mesa de trabajo donde el blanco hace gran parte de la jerarquia.
Chapter card
Scale
6px12px16px24px40px64px

Elevation & Depth

Subtle

La profundidad observada es ligera. La guia no depende de glass fuerte ni de sombras dramaticas; el volumen se apoya mas en keylines finos, bloques limpios y superposicion ordenada.

Surface#FFFFFF · #F3F1F6
Border1px #DDD5E8
Shadowsoft only · approximated
Exact values(no detectado)

Shapes

Soft geometry

Las tarjetas y paneles usan esquinas suaves, sin agresividad. La familia observada se mueve entre radios contenidos y composicion modular, compatible con pattern y aplicaciones de logo.

8px18px24px32px

Do's and Don'ts

Guardrails

Do

Usa el violeta principal como ancla visual y de reconocimiento.
Mantén fondos claros y margenes generosos como en una guia editorial.
Aplica pattern y logotipos con grid limpio y campos de color controlados.
Deja que el blanco cargue la jerarquia antes que la decoracion.

Don't

No conviertas la marca en una interfaz neon o glassmorphism.
No mezcles demasiados acentos secundarios en una sola vista.
No pongas pattern detras del titular principal si reduce legibilidad.

Motion

Restrained

La guia fuente es estatica, pero la identidad pide transiciones sobrias: fades suaves, lifts minimos y revelados de capitulo. Nada de coreografias ruidosas ni efectos dramatizados.

Motion levelRestrained
Durations180ms · 320ms
Easingcubic-bezier(.22,1,.36,1)
Behaviorsoft fades · slight lifts

Pattern Observed

Identity asset

El pattern observado deriva del gesto del isotipo y funciona como tile modular para chapter panels, stationery y superficies de apoyo. Debe mantenerse limpio, repetible y fuera de la zona principal de copy.

pattern: source: observed from image construction: repeated monoline brand gesture usage: chapter panel, stationery, support tile caution: keep away from headline safe area
ArenaPro · color-fonts item · image-derived reconstruction
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
}
@theme {
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-xxl: 64px;
}
{
  "colors": {},
  "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"
  }
}
---
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.