---
version: "1.0"
name: "AXORA Brand Identity"
description: "Sistema visual corporativo y tecnologico que combina negro petrolero, cian energetico y geometria de precision para branding B2B, soluciones inteligentes y entornos digitales premium."
colors:
  primary: "#1FE2D1"
  secondary: "#A6FFF7"
  accent: "#5AE8DC"
  neutral: "#F2FFFC"
  background: "#071417"
  surface: "#0B1E22"
  text-primary: "#F2FFFC"
  text-secondary: "#9BC3C0"
  border: "#18383A"
typography:
  display-lg:
    fontFamily: "Outfit"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "46px"
    letterSpacing: "-0.035em"
  body-md:
    fontFamily: "Onest"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "18px"
rounded:
  md: "14px"
  lg: "22px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#062224"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - AXORA Brand Identity

## 1. Tema Visual y Atmosfera

AXORA proyecta una tecnologia segura, limpia y corporativa, pero sin perder impulso visual. La marca vive sobre un negro petrolero muy controlado y deja que un cian brillante cargue la energia del sistema. No busca verse experimental ni ruidosa; lo que comunica es precision, infraestructura inteligente y una identidad capaz de habitar tanto software como entornos arquitectonicos y material corporativo.

La board alterna zonas oscuras profundas con golpes de turquesa muy vivos, isotipos basados en la A, composiciones de wireframe y aplicaciones de marca sobre piezas B2B. Todo sugiere una empresa de soluciones avanzadas que necesita verse confiable, contemporanea y claramente tecnica. La forma manda sobre el efecto: cuando hay luz, esta siempre esta contenida por un arco, una grilla o una pieza de marca.

**Palabras clave de personalidad**: corporativo, preciso, tecnologico, limpio, arquitectonico, energizado, premium

**Densidad del layout**: comfortable

**Modo preferido**: oscuro

**Nivel de ornamentacion**: subtle

**Audiencia visual objetivo**: tecnologia B2B, smart solutions, branding corporativo, interfaces institucionales y presentaciones de infraestructura

---

## 2. Paleta de Colores y Roles Semanticos

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Axora Cyan | `--color-primary` | `#1FE2D1` | CTA, indicadores, highlights de logo y pulses de sistema | `#062224` |
| Axora Cyan Hover | `--color-primary-hover` | `#17CABB` | Hover del CTA y estados activos | `#062224` |
| Axora Cyan Active | `--color-primary-active` | `#11AC9F` | Pressed, estados concentrados | `#041A1B` |
| Ice Mint | `--color-secondary` | `#A6FFF7` | Realces secundarios, chips y capas de contraste | `#062224` |
| Signal Teal | `--color-accent` | `#5AE8DC` | Reglas, outlines, detalles de apoyo | `#062224` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Deep Petroleum | `--color-bg` | `#071417` | Fondo general y hero canvas |
| Control Surface | `--color-surface` | `#0B1E22` | Cards, paneles y modulos |
| Raised Module | `--color-surface-raised` | `#10262B` | Contenedores elevados |
| Dense Overlay | `--color-surface-overlay` | `#081115` | Overlays y capas mas oscuras |
| Structural Line | `--color-border` | `#18383A` | Bordes visibles y divisiones |
| Faint Grid | `--color-border-subtle` | `#10282B` | Trazos secundarios y wireframes |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Frost White | `--color-text` | `#F2FFFC` | Titulares, body principal, labels fuertes |
| Mineral Gray | `--color-text-secondary` | `#9BC3C0` | Descripciones y supporting copy |
| Quiet Teal Gray | `--color-text-muted` | `#6C8E8A` | Metadata y microcopy |
| Texto sobre primario | `--color-text-on-primary` | `#062224` | Texto en boton primario |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#6EF7C3` | `#082118` |
| Exito (bg) | `--color-success-bg` | `#0D221D` | - |
| Advertencia | `--color-warning` | `#FFD168` | `#231C08` |
| Advertencia (bg) | `--color-warning-bg` | `#2B220F` | - |
| Error | `--color-error` | `#FF6F7E` | `#FFF4F6` |
| Error (bg) | `--color-error-bg` | `#2A151A` | - |
| Info | `--color-info` | `#76D8FF` | `#071A22` |
| Info (bg) | `--color-info-bg` | `#0E232A` | - |

AXORA depende de un contraste muy cerrado: negro profundo, blanco frio y cian activo. Las variaciones deben sentirse estructurales, no decorativas. Si un color no refuerza esa sensacion de control tecnico, sobra.

---

## 3. Reglas de Tipografia

### Familias tipograficas

```css
/* Heading: Outfit - sustituto Google para la sans geometrica y corporativa observada en la guia */
--font-heading: 'Outfit', sans-serif;

/* Body: Onest - sans clara, institucional y menos repetida para UI y lectura B2B */
--font-body: 'Onest', sans-serif;

/* Labels: IBM Plex Mono - para labels, specs y nomenclatura tecnica */
--font-label: 'IBM Plex Mono', monospace;
```

**Google Fonts (implementacion web):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=Onest:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: la board original parece usar una sans geometrica corporativa con bastante limpieza y una segunda sans de lectura neutra. Para display se compararon `Outfit`, `Plus Jakarta Sans` y `Sora`; `Outfit` fue la mejor por su ritmo limpio y su presencia institucional sin caer en lo demasiado startup. Para body se compararon `Onest`, `Public Sans` e `Instrument Sans`; `Onest` conserva mejor el tono sobrio y menos generico del sistema.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Captions, specs, metadata |
| `--text-sm` | 0.875rem | 14px | 1.5 | Labels, helper text, UI secundaria |
| `--text-base` | 1rem | 16px | 1.625 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.55 | Intro copy y lead paragraphs |
| `--text-xl` | 1.25rem | 20px | 1.4 | Titulo de modulos |
| `--text-2xl` | 1.75rem | 28px | 1.18 | H3 |
| `--text-3xl` | 2.5rem | 40px | 1.05 | H2 |
| `--text-4xl` | 3rem | 48px | 0.96 | Heading system |

### Pesos tipograficos

```css
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Letter spacing

```css
--tracking-tight: -0.035em;
--tracking-normal: 0em;
--tracking-wide: 0.08em;
--tracking-wider: 0.16em;
```

La voz tipografica de AXORA debe sentirse controlada y moderna. Los titulares se benefician de lineas limpias y peso firme; las labels, en cambio, ganan mucho cuando se comportan como sistema tecnico y no como copy publicitaria.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)
Color de texto: var(--color-text-on-primary)
Padding: 14px 24px
Border-radius: var(--radius-full)
Font-weight: var(--font-medium)
Font-size: var(--text-sm)

Hover:
  Background: var(--color-primary-hover)
  box-shadow: 0 12px 30px rgba(31, 226, 209, 0.22)

Active:
  Background: var(--color-primary-active)
  transform: translateY(1px)
```

**Secundario**
```
Background: transparent
Color: var(--color-secondary)
Border: 1px solid rgba(166, 255, 247, 0.24)
Padding: 14px 24px
Border-radius: var(--radius-full)

Hover:
  Background: rgba(31, 226, 209, 0.08)
  Border-color: rgba(166, 255, 247, 0.42)
```

### Cards

**Tarjeta base**
```
Background: var(--color-surface)
Border: 1px solid var(--color-border)
Border-radius: 22px
Padding: 24px
Box-shadow: 0 20px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03)
```

Las cards de AXORA deben sentirse como paneles de control arquitectonicos. Los efectos de luz deben venir de lineas, arcos o superficies cortadas, no de niebla o brillo ambiente.

---

## 5. Principios de Layout y Composicion

AXORA funciona con estructura y respiracion. La composicion debe dejar claro que hay sistema, jerarquia y soporte tecnico detras de la marca. Las mejores piezas combinan una zona hero de alto contraste con una segunda capa de wireframe, arco o modulo corporativo que ordena la energia visual.

Usar:

- campos oscuros limpios
- arcos, semiarcos y contornos de la A
- lineas estructurales o mallas muy sutiles
- bloques corporativos y productizados

Evitar:

- humo, neblina o halos blandos
- fondos dramaticos sin estructura
- exceso de luces compitiendo
- acentos de color fuera del cian y la escala fria

---

## 6. Movimiento

El motion ideal de AXORA debe sentirse como activacion de sistema: preciso, corto y seguro. Los reveals funcionan mejor con barridos horizontales o diagonales muy controlados, encendido de lineas y cambios de intensidad en el cian.

**Nivel de motion**: moderate

**Duraciones**: 140ms, 260ms, 640ms

**Easings**: `ease`, `cubic-bezier(0.16, 1, 0.3, 1)`

**Patrones**: line sweep, reveal por opacity + translate, pulse contenido en CTA, trazos encendidos

---

## 7. Lo que Si y lo que No

### ✅ Hacer

1. **Usa el cian como energia puntual** — debe concentrar interaccion y memorabilidad.
2. **Construye fondos con estructura** — arcos, lineas y paneles funcionan mejor que atmosferas.
3. **Mantén el negro profundo y limpio** — la oscuridad de AXORA es una base tecnica, no un efecto cinematografico.
4. **Reserva la mayor escala tipografica para mensajes cortos** — la marca gana fuerza cuando no se sobre-explica.

### ❌ No hacer

1. **No conviertas el sistema en neon caotico** — demasiados destellos debilitan la credibilidad corporativa.
2. **No uses gradients blandos como relleno** — si el color se expande, debe seguir una forma real.
3. **No mezcles tipografias demasiado expresivas** — AXORA necesita sobriedad, no ruido de branding de festival.
4. **No llenes el layout de decoracion** — la marca funciona mejor cuando cada trazo tiene una razon estructural.