AETHERIA

Área de seguridad

Margen mínimo igual a X = ¼ de la altura del isotipo en todos los lados.

X X

Tamaño mínimo

Por debajo de estos límites usar sólo el logomark para preservar legibilidad.

AETHERIA

≥ 120px · digital

≥ 24px · icono

• Mantén el squircle con el gradiente original.
• Respeta el área de seguridad.
• Usa blanco sobre fondos oscuros saturados.

• No deformes, rotes ni cambies el gradiente.
• No apliques sombras duras ni contornos.
• No coloques el isotipo sobre fondos sin contraste.

Pesos · Space Grotesk

Reglas

• Titulares en Space Grotesk con tracking negativo (-2 a -3%).
• Interlineado de cuerpo 1.6 para máxima legibilidad.
• Labels siempre en mayúsculas con +18% de tracking.
• Nunca más de dos pesos por bloque de texto.

Espaciado · Sistema 8 px

Todo se alinea a múltiplos de 8 (con 4 como medio paso).

Grid · 12 columnas

Contenedor máx. 1200 px · gutter 24 px · márgenes 40 px.

Elevaciones · Sombras

Glow neón

Glassmorphism

Bordes

Patrones & elementos decorativos

Animaciones sugeridas

Blobs & planetas flotantes

Formas de fondo

Personalidad

Valores

Neón sobre índigo, energía controlada. Mucho espacio negativo oscuro, acentos de glow puntuales, geometría suave y movimiento sutil.

Cercano y optimista, pero experto. Hablamos de tecnología compleja con claridad y un toque de ambición visionaria.

Frases cortas y activas. Beneficio antes que característica. Cero jerga innecesaria; energía sin exageración.

• Dejar respirar los fondos oscuros.
• Usar el glow con intención, como acento.
• Mantener la jerarquía tipográfica clara.
• Combinar máximo 2-3 neones por composición.
• Priorizar el beneficio en cada mensaje.

• Saturar todo de neón sin contraste.
• Usar fondos blancos como base principal.
• Mezclar más de tres familias tipográficas.
• Aplicar glow a textos largos de lectura.
• Escribir párrafos densos y técnicos.

Directo y sin rodeos. Una idea por frase.

Mira al futuro. Habla de posibilidades.

Demuestra dominio sin presumir.

Cálido y cercano, nunca robótico.

Fotografía

Escasa y siempre tratada con overlay índigo y glow neón. Tecnología, naturaleza y ciudades nocturnas. Nunca stock plano sin tratamiento.

Ilustración

Vector plano con degradados saturados. Coherente con cohetes, planetas y ciudades de la landing. Trazos limpios, sin contornos negros.

Iconografía

Lineal, trazo 1.8, esquinas redondeadas, grid 24px. Un único peso. Color heredado del contexto (currentColor).

Animación

Sutil y orgánica: float, glow y drift. Easing ease-in-out, 4-12s. El movimiento acompaña, nunca distrae.

Jerarquía

Un solo foco por pantalla. Contraste de tamaño marcado entre titular y cuerpo. El color guía la atención.

Consistencia

Mismos tokens en todo el ecosistema. Reutiliza componentes; no inventes variantes nuevas sin necesidad.

Responsive · Breakpoints

Hit targets mínimos de 44×44px. La retícula colapsa de 12 a 4 columnas en móvil.

Accesibilidad · Contraste

Foco visible con anillo cian de 2px. No depender solo del color para transmitir estado.

Letterhead

AETHERIA

aetheria.io · hola@aetheria.io · +34 600 000 000

Firma de email

Login screen

Bienvenido

Email

Contraseña

Entrar

Dashboard header

AETHERIA

PanelRecursosFacturación

UPTIME

99.9%

NODOS

248

CO₂ AHORRADO

1.2t

Organización del archivo

:root {
  --color-primary:   #F92C97;
  --color-secondary: #3B82F6;
  --color-accent:    #22D3EE;
  --color-bg:        #190F45;
  --color-surface:   #281A60;
  --color-text:      #F3F0FF;

  --font-display: 'Poppins', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono';

  --space-1: 8px;   --space-2: 16px;
  --space-3: 24px;  --space-4: 32px;

  --radius-md: 12px;  --radius-lg: 16px;
  --radius-xl: 24px;  --radius-pill: 999px;

  --grad-brand: linear-gradient(135deg,
     #8B5CF6, #7C3AED 52%, #3B82F6);
}

Naming consistente

Auto Layout en todo, Color & Text Styles publicados, Variables por modo claro/oscuro, Components con Variants. Sin elementos sueltos.

Formatos de exportación

Tokens exportables a CSS, JSON y Tailwind config para handoff directo a desarrollo.