Negro petrolero, arquitectura de lineas y cian de alta energia construyen una marca corporativa que se siente precisa, moderna y claramente tecnologica.
:root {
--color-primary: #1FE2D1;
--color-secondary: #A6FFF7;
--color-accent: #5AE8DC;
--color-neutral: #F2FFFC;
--color-background: #071417;
--color-surface: #0B1E22;
--color-text-primary: #F2FFFC;
--color-text-secondary: #9BC3C0;
--color-border: #18383A;
--font-display: "Outfit";
--font-body: "Outfit";
--radius-md: 14px;
--radius-lg: 22px;
--radius-full: 9999px;
--space-base: 4px;
--space-sm: 12px;
--space-md: 20px;
--space-lg: 32px;
--space-xl: 48px;
--space-gap: 24px;
--space-section-padding: 96px;
}@theme {
--color-primary: #1FE2D1;
--color-secondary: #A6FFF7;
--color-accent: #5AE8DC;
--color-neutral: #F2FFFC;
--color-background: #071417;
--color-surface: #0B1E22;
--color-text-primary: #F2FFFC;
--color-text-secondary: #9BC3C0;
--color-border: #18383A;
--font-display: "Outfit";
--font-body: "Outfit";
--radius-md: 14px;
--radius-lg: 22px;
--radius-full: 9999px;
--spacing-base: 4px;
--spacing-sm: 12px;
--spacing-md: 20px;
--spacing-lg: 32px;
--spacing-xl: 48px;
--spacing-gap: 24px;
--spacing-section-padding: 96px;
}{
"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"
}
}---
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.