---
version: "1.0"
name: "Aurwave Brand Guidelines"
description: "Sistema visual para agencia digital y visual identity con negro carbon, rojo anaranjado electrico, reticula tecnica y una voz de alto rendimiento, precision y estrategia."
colors:
  primary: "#FF4A17"
  secondary: "#FF7B59"
  accent: "#FFB09B"
  neutral: "#F7F5F2"
  background: "#121212"
  surface: "#1A1A1A"
  surface-raised: "#222222"
  text-primary: "#F7F5F2"
  text-secondary: "#C9C2BA"
  text-muted: "#8E8781"
  text-dark: "#171412"
  border: "#35312D"
typography:
  display-lg:
    fontFamily: "Oxanium"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "46px"
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Sora"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "Azeret Mono"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "18px"
rounded:
  sm: "10px"
  md: "16px"
  lg: "24px"
  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: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    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 - Aurwave Brand Guidelines

## 1. Tema Visual y Atmosfera

Aurwave se presenta como una agencia o estudio digital que quiere verse agresivamente contemporaneo, rapido y preciso. La identidad vive en un negro carbon muy controlado, un rojo anaranjado de alta energia y una reticula de puntos o lineas que recuerda paneles tecnicos, visualizacion y performance. El sistema se siente como una mezcla de branding corporativo, producto digital y cultura de alto rendimiento.

La board alterna secciones oscuras con paneles naranjas muy vivos, titulares grandes en italica, fotografia calida con iluminacion roja y un wordmark de caracter futurista. Todo el lenguaje empuja hacia estrategia, precision, vision y autoridad. No es una marca amable o suave; quiere verse decidida, afilada y orientada a resultados.

**Palabras clave de personalidad**: futurista, estrategico, energetico, tecnico, audaz, digital, veloz, performante

**Densidad del layout**: balanced

**Modo preferido**: oscuro

**Nivel de ornamentacion**: controlled

**Audiencia visual objetivo**: agencias digitales, estudios de branding, equipos de producto, consultoria de performance, visual identity y sistemas creativos de alta exigencia

---

## 2. Paleta de Colores y Roles Semanticos

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Signal Ember | `--color-primary` | `#FF4A17` | CTA, highlights, tags, segmentos hero y enfasis estrategico | `#F7F5F2` |
| Ember Lift | `--color-secondary` | `#FF7B59` | Capas calidas, estados activos y apoyo de acento | `#171412` |
| Soft Flame | `--color-accent` | `#FFB09B` | Bordes suaves, glows contenidos y capas de apoyo | `#171412` |
| Paper Light | `--color-neutral` | `#F7F5F2` | Texto de alto contraste y superficies claras ocasionales | `#171412` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Carbon Base | `--color-bg` | `#121212` | Fondo general y hero principal |
| Coal Panel | `--color-surface` | `#1A1A1A` | Cards, modulos e inspector |
| Raised Ash | `--color-surface-raised` | `#222222` | Capas superiores y tarjetas secundarias |
| Burnt Line | `--color-border` | `#35312D` | Bordes visibles y estructura |
| Quiet Ash | `--color-border-subtle` | `#282522` | Divisiones internas y detalles sutiles |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Paper Light | `--color-text` | `#F7F5F2` | Titulares, buttons y body sobre fondo oscuro |
| Warm Mist | `--color-text-secondary` | `#C9C2BA` | Copy secundario y supporting text |
| Ember Dust | `--color-text-muted` | `#8E8781` | Metadata, specs y notas |
| Carbon Ink | `--color-text-dark` | `#171412` | Texto sobre fondos claros o naranjas |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#54D38A` | `#0C2417` |
| Exito (bg) | `--color-success-bg` | `#163223` | - |
| Advertencia | `--color-warning` | `#FFB347` | `#2E1B00` |
| Advertencia (bg) | `--color-warning-bg` | `#38260E` | - |
| Error | `--color-error` | `#FF5F5F` | `#FFF4F4` |
| Error (bg) | `--color-error-bg` | `#321B1B` | - |
| Info | `--color-info` | `#FF7B59` | `#171412` |
| Info (bg) | `--color-info-bg` | `#2D1D18` | - |

Aurwave funciona cuando el naranja parece una fuerza puntual y no una neblina ambiental. El negro sostiene la autoridad, el naranja activa la marca y los grises calidos evitan que todo se vuelva demasiado frio o abstracto.

---

## 3. Reglas de Tipografia

### Familias tipograficas

```css
/* Heading: Oxanium - sustituto Google para la sans futurista y agresiva observada en la board */
--font-heading: 'Oxanium', sans-serif;

/* Body: Sora - sans tecnica, clara y contemporanea para lectura de sistema */
--font-body: 'Sora', sans-serif;

/* Labels: Azeret Mono - apoyo tecnico para specs, tags y microcopy */
--font-label: 'Azeret 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=Azeret+Mono:wght@500&family=Oxanium:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: la board original muestra un wordmark custom y una sans de personalidad tecnica para titulares, apoyada por una sans limpia para lectura. Para headings se compararon `Oxanium`, `Exo 2` y `Saira`; **Oxanium** fue la mejor por su tension futurista y geometria controlada. Para body se compararon `Sora`, `Hanken Grotesk` y `IBM Plex Sans`; **Sora** mantuvo mejor el tono digital premium sin verse generica. Para labels se uso **Azeret Mono** por su claridad tecnica y ritmo de sistema.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Captions, codigos, metadata |
| `--text-sm` | 0.875rem | 14px | 1.5 | Labels, helper text, navegacion |
| `--text-base` | 1rem | 16px | 1.625 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.58 | Intro copy y parrafos destacados |
| `--text-xl` | 1.25rem | 20px | 1.4 | Titulos 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.03em;
--tracking-normal: 0em;
--tracking-wide: 0.08em;
--tracking-wider: 0.16em;
```

La jerarquia de Aurwave debe sentirse firme y con impulso. Los titulares pueden tensarse con italica o inclinacion visual, pero el cuerpo necesita conservar nitidez y control para que la marca no se vuelva puro gesto.

---

## 4. Estilos de Componentes

### Botones

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

Hover:
  Background: var(--color-secondary)
  box-shadow: 0 14px 28px rgba(255, 74, 23, 0.18)

Active:
  Background: #E44313
  transform: translateY(1px)
```

**Secundario**
```
Background: transparent
Color: var(--color-neutral)
Border: 1px solid rgba(247,245,242,0.22)
Padding: 14px 24px
Border-radius: var(--radius-full)

Hover:
  Background: rgba(255, 74, 23, 0.08)
  Border-color: rgba(255, 123, 89, 0.38)
```

### Cards

**Tarjeta base**
```
Background: var(--color-surface)
Border: 1px solid var(--color-border)
Border-radius: 24px
Padding: 24px
Box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28)
```

Las cards deben sentirse como paneles tacticos: oscuras, limpias y con un borde que define estructura. No necesitan una atmosfera brumosa; la presencia sale de contraste, modulo y ritmo.

---

## 5. Principios de Layout y Composicion

Aurwave funciona con composicion editorial tecnica. La mezcla correcta es: un campo oscuro, un golpe fuerte de naranja, una estructura de paneles o tags y una zona hero que deje respirar un mensaje corto pero contundente. Las lineas y reticulas tienen sentido cuando se sienten como instrumento o panel de sistema, no como decoracion gratuita.

Usar:

- campos oscuros limpios
- tags o capsulas cortas en naranja
- modulos fotográficos enmarcados
- reticulas puntuales y controladas
- estructura asimetrica con aire suficiente

Evitar:

- blobs, neblina o gradientes blandos
- ruido futurista sin jerarquia
- demasiados acentos compitiendo con el titular
- fondos con efectos que invadan el area del copy

---

## 6. Movimiento

El motion ideal de Aurwave debe sentirse como activacion de panel o cambio de estado, no como espectaculo espacial. Los mejores gestos son barridos cortos, reveals diagonales, pulsos muy controlados y pequeñas transiciones de modulos.

**Nivel de motion**: moderate

**Duraciones**: 120ms, 220ms, 480ms

**Easings**: `ease`, `cubic-bezier(0.22, 1, 0.36, 1)`

**Patrones**: reveal lateral, clip diagonal, pulse sutil en acento, swap de paneles

---

## 7. Lo que Si y lo que No

### ✅ Hacer

1. **Usa el naranja como impulso de sistema** — debe dirigir, no cubrirlo todo.
2. **Conserva el negro carbon limpio** — la marca necesita una base solida y premium.
3. **Deja que el layout respire** — la fuerza viene del contraste entre campo oscuro y gesto preciso.
4. **Mantén las fotos encapsuladas** — las imagenes deben verse parte del sistema, no collages sueltos.

### ❌ No hacer

1. **No conviertas la marca en un fondo con glow** — eso la abarata y la vuelve generica.
2. **No tapes el texto con adornos** — la comunicacion debe quedar despejada.
3. **No abuses de grids visibles** — solo donde refuercen el lenguaje tecnico.
4. **No hagas la identidad demasiado soft** — Aurwave necesita filo, estrategia y energia controlada.