Negro carbon, acentos ember y estructura tecnica construyen una marca que se siente estrategica, veloz y preparada para performance real.
:root {
--color-primary: #FF4A17;
--color-secondary: #FF7B59;
--color-accent: #FFB09B;
--color-neutral: #F7F5F2;
--color-background: #121212;
--color-surface: #1A1A1A;
--color-surface-raised: #222222;
--color-text-primary: #F7F5F2;
--color-text-secondary: #C9C2BA;
--color-text-muted: #8E8781;
--color-text-dark: #171412;
--color-border: #35312D;
--font-display: "Oxanium";
--font-body: "Oxanium";
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--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: #FF4A17;
--color-secondary: #FF7B59;
--color-accent: #FFB09B;
--color-neutral: #F7F5F2;
--color-background: #121212;
--color-surface: #1A1A1A;
--color-surface-raised: #222222;
--color-text-primary: #F7F5F2;
--color-text-secondary: #C9C2BA;
--color-text-muted: #8E8781;
--color-text-dark: #171412;
--color-border: #35312D;
--font-display: "Oxanium";
--font-body: "Oxanium";
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--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": "#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"
}
}---
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.