Imagen de Marca — AP Interactive

01 / LOGOTIPO

Identidad
Visual

El logotipo es el elemento central de la identidad. Existe en tres variantes y debe usarse siempre sobre fondos que garanticen contraste y legibilidad.

Principal · fondo oscuro

Sobre bg-2

Variante oscura · fondo blanco

No estirar

No rotar

No sobre fondos sin contraste

Área de respeto

El logotipo debe tener siempre un margen mínimo de 1× la altura del símbolo respecto a cualquier otro elemento. No colocar texto, iconos ni bordes dentro de esta zona.

Tamaño mínimo

Tamaño mínimo en pantalla: 28 px de alto. Por debajo de este tamaño el logotipo pierde legibilidad. En impresión, el mínimo es 12 mm.

02 / COLOR

Paleta
Cromática

El sistema de color está definido mediante variables CSS. Siempre usar las variables, nunca los valores hexadecimales directamente en código. Haz click en un color para copiar el valor.

Fondos

COPIADO

Background

#0d1121

--bg

COPIADO

Background 2

#131a2a

--bg-2

COPIADO

Background 3

#1a2133

--bg-3

Texto

COPIADO

Text Primary

#eef0f6

--text

COPIADO

Text Secondary

#8892a4

--text-2

COPIADO

Text Muted

#4e566a

--text-3

Acento y semánticos

COPIADO

Accent Blue

#4686dd

--accent

COPIADO

Accent Dim

rgba(70,134,221,0.10)

--accent-dim

COPIADO

Accent Border

rgba(70,134,221,0.22)

--accent-border

COPIADO

Error / Danger

#e05555

--red

COPIADO

Success

#3fb97a

--green

COPIADO

Line / Divider

rgba(255,255,255,0.07)

--line

Jerarquía de fondos

--bg — fondo de página. Nunca usar como fondo de tarjetas.

--bg-2 — tarjetas, paneles, menús. Primera elevación.

--bg-3 — superficies sobre bg-2. Tooltips, dropdowns, modales.

Uso del acento

--accent — CTAs primarios, links activos, iconos de énfasis.

--accent-dim — fondos de tags y badges. Nunca texto.

El color de acento no debe usarse en grandes superficies, solo en elementos de énfasis.

03 / TIPOGRAFÍA

Sistema
Tipográfico

Tres familias con roles estrictamente definidos. No sustituir ni mezclar con otras fuentes fuera del sistema.

Display · Bastardo Grotesk Titulares · Heros · Nombres de sección

AP
Interactive

96px Hero Display

64px Section Title

40px Card Heading

FALLBACK → Barlow Condensed · Google Fonts

Body · IBM Plex Sans Cuerpo de texto · UI · Descripciones

Consultoría tecnológica estratégica con infraestructura propia AS215691. Ciberseguridad, IA, desarrollo y bare metal.

20px Light 300 — Subtítulos y leads

16px Regular 400 — Cuerpo de texto

14px Medium 500 — Etiquetas UI, navegación

14px SemiBold 600 — Énfasis en cuerpo

14px Bold 700 — Datos clave, precios

Mono · IBM Plex Mono Etiquetas técnicas · Código · Metadatos

                AS215691 · RIPE NCC · Madrid · NL · DE · NYC

                // BARE METAL · CIBERSEGURIDAD · IA · DESARROLLO

13px Regular 400 — Bloques de código, valores técnicos

11px UPPERCASE 0.15EM — Etiquetas de sección, metadatos

11px ACCENT · TAGS DE CATEGORÍA · NÚMEROS DE SECCIÓN

04 / COMPONENTES

Sistema de
Componentes

Botones .btn-primary / .btn-outline / .btn-ghost / .btn-danger

Reglas de uso

→ Un solo btn-primary por vista. Es la acción principal.
→ btn-outline para acciones secundarias junto a un primario.
→ btn-ghost para acciones terciarias o en contextos con acento.
→ btn-danger solo para acciones destructivas irreversibles.

Tags y Badges .tag-blue / .tag-red / .tag-green / .tag-muted

Bare Metal AS215691 Ciberseguridad DDoS Crítico Activo Online PHP nginx MariaDB

Tarjetas

Servidores Dedicados

Hardware bare metal en Madrid, Países Bajos, Alemania y Nueva York. Sin hipervisor.

Protección DDoS

Mitigación a nivel de red en nuestra propia infraestructura AS215691, sin depender de terceros.

Campos de formulario

Nombre

Email

Mensaje

Alertas y Avisos

Servicio de mantenimiento programado para el próximo domingo de 02:00 a 04:00 UTC. Sin impacto en tráfico entrante.

Se ha detectado tráfico anómalo en el nodo NL-01. Mitigación activa en curso desde las 14:32 UTC.

Citas y Testimonios

"Necesitábamos una plataforma que funcionara como nuestro negocio funciona, no al revés. AP Interactive fue la única opción que no empezó por enseñarnos una plantilla."

Bloque de Stack Técnico

Backend PHP · sin framework · arquitectura modular · MariaDB
Frontend Tailwind CDN · Alpine.js · sin pasos de build
Pagos Stripe Checkout · Subscriptions · Webhooks idempotentes
IA Function calling · confirmación explícita · tracking de coste
Seguridad AES-256-GCM · sesiones DB-backed · CSRF double-submit · audit log
Infra nginx · PHP-FPM · Cloudflare · CI con tests automáticos

Bloque de Código

// Detección de marca por subdominio
$brand = Brand::fromHost($_SERVER['HTTP_HOST']);
$lang  = Language::detect($_COOKIE, $_SERVER);

if ($brand->isUnknown()) {
    http_response_code(404);
    exit;
}
            

05 / ICONOGRAFÍA

Sistema de
Iconos

Se usa Font Awesome 6 en su variante fas (solid). Tamaños estándar: xs (0.65rem) para detalles, sm (0.8rem) dentro de botones, base (1rem) para iconos standalone.

Infraestructura y Red

server

database

network

cloud

storage

cpu

ethernet

globe

datacenter

Seguridad

shield

lock

key

ddos

monitor

vuln

soc

2fa

alert

Desarrollo y IA

code

terminal

ai

arch

module

bot

chat

file

git

UI y Navegación

arrow

close

check

add

menu

search

ext

Uso correcto

→ Icono + texto en botones (mr-2)
→ Iconos solos siempre con aria-label o tooltip
→ Color por contexto: --accent, --red, --text-3

Prohibido

✗ Usar la variante far (regular) — solo fas
✗ Iconos decorativos sin propósito comunicativo
✗ Tamaños mayores a 1.5rem en contextos inline

06 / ESPACIADO

Escala de
Espaciado

El espaciado usa una escala base de 4 px. Se aplica con Tailwind utilities (p-4, gap-6…) o con valores CSS equivalentes.

space-1

4px Separación entre icono y texto

space-2

8px Padding interno de tags y badges

space-3

12px Padding de botones (vertical)

space-4

16px Padding de botones (horizontal)

space-5

20px Gap entre elementos de formulario

space-6

24px Padding interno de tarjetas (compacto)

space-8

32px Padding interno de tarjetas (estándar)

space-12

48px Separación entre secciones (interna)

space-16

64px Padding de secciones (vertical)

space-20

80px Hero y secciones de portada

07 / VOZ Y TONO

Voz y
Tono

AP Interactive habla como un ingeniero experto que explica sin presumir. Directo, técnico pero accesible. Sin marketing inflado. Sin promesas vacías.

AP Interactive ES

Directo y técnico
Concreto: datos, números, arquitectura real
Primera persona del plural honesta ("construimos", "gestionamos")
Admite limitaciones cuando las hay
Explica el porqué de las decisiones técnicas
Bilingüe coherente: ES principal, EN equivalente

AP Interactive NO ES

Marketing de buzzwords ("synergy", "best-in-class")
Superlativos sin evidencia ("el mejor", "el más seguro")
Exclamaciones o lenguaje de ventas agresivo
Emojis en contextos formales o técnicos
Pasiva impersonal innecesaria
Anglicismos cuando existe un término técnico correcto en ES

Ejemplos de copia

✗ Evitar | ✓ Usar

Somos líderes en soluciones cloud de próxima generación que empoderan a tu negocio.

Infraestructura dedicada en cuatro ubicaciones. Sin hipervisor, sin vecinos ruidosos.

✗ Evitar | ✓ Usar

¡Protección DDoS 100% garantizada con la mejor tecnología del mercado!

Mitigación volumétrica a nivel de red en AS215691. Sin terceros en el camino del paquete.

✗ Evitar | ✓ Usar

Desarrollamos soluciones innovadoras de software a medida con un approach holístico.

Construimos plataformas que se ajustan a cómo trabaja tu equipo, no al revés.

Imagende Marca

IdentidadVisual

PaletaCromática

SistemaTipográfico

Sistema deComponentes

Sistema deIconos

Escala deEspaciado

Voz yTono

Imagen
de Marca

Identidad
Visual

Paleta
Cromática

Sistema
Tipográfico

Sistema de
Componentes

Sistema de
Iconos

Escala de
Espaciado

Voz y
Tono