Manual de Marca

Guía completa de identidad visual y comunicación de Skywalking.dev

Paleta de Colores

Base Foundation

Negro Absoluto

Fondo principal

#000000

RGB: 0, 0, 0

Negro Azulado Oscuro

Gradiente hero (inicio)

#0A0E27

RGB: 10, 14, 39

Negro Azulado Medio

Gradiente hero (final)

#1a1f3a

RGB: 26, 31, 58

Beige Claro

Tarjetas y superficies

#EFEEE9

RGB: 239, 238, 233

Beige Cálido

Acentos y hover

#E8E2CF

RGB: 232, 226, 207

Extended Base

Azul-Gris

Color marca profesional

#5F7382

RGB: 95, 115, 130

Azul Claro

Fondos sutiles

#B4C3CD

RGB: 180, 195, 205

Tierra

Contraste cálido, texto secundario

#918778

RGB: 145, 135, 120

Action Accents

Dorado

Premium, CTAs primarios

#D4AF37

RGB: 212, 175, 55

Naranja

Energía, urgencia, hovers

#E8833A

RGB: 232, 131, 58

Rojo

Alertas, acciones críticas

#CA2230

RGB: 202, 34, 48

Functional

Verde WhatsApp

Botón de contacto

#25D366

RGB: 37, 211, 102

Sistema de Texto Dual

Fondos oscuros: Texto blanco (#FFFFFF) con opacidades variables (100%, 80%, 60%)

Fondos claros: Texto negro (#000000) con opacidades variables (100%, 80%, 60%)

Jerarquía de CTAs

CTA Primario (máximo 1 por sección)

border-2 border-[#D4AF37] text-black hover:bg-[#D4AF37]

Borde dorado para acciones principales, hover rellena con dorado

CTA Secundario

bg-[#5F7382] text-white hover:bg-[#E8833A]

Azul-gris para elementos de marca

CTA Terciario / Ghost

border-2 border-[#B4C3CD] text-[#B4C3CD] hover:border-[#E8833A]

Estilo outline para acciones secundarias

Contraste WCAG AA

✓ Pasan AA (4.5:1 mínimo):

• Negro (#000000) sobre Beige Claro (#EFEEE9) - 11.2:1
• Azul-Gris (#5F7382) sobre Beige Claro (#EFEEE9) - 5.8:1
• Beige Claro (#EFEEE9) sobre Negro (#000000) - 18.5:1
• Dorado (#D4AF37) sobre Negro (#000000) - 6.1:1

⚠️ No usar:

• Azul Claro (#B4C3CD) sobre Beige Claro (#EFEEE9) - bajo contraste
• Tierra (#918778) sobre Dorado (#D4AF37) - bajo contraste

Variables CSS

--sky-black: #000000
--sky-white: #EFEEE9
--sky-beige-warm: #E8E2CF
--sky-blue: #5F7382
--sky-light: #B4C3CD
--sky-warm: #918778
--sky-gold: #D4AF37
--sky-orange: #E8833A
--sky-red: #CA2230
--sky-green: #25D366

Todas las variables están disponibles en globals.css

Tipografía

Geist Sans

Tipografía principal para títulos y cuerpo de texto

Aa Bb Cc

Bold - Títulos principales

Aa Bb Cc

Semibold - Subtítulos

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm

Regular - Cuerpo de texto

Jerarquía Tipográfica

H1: 3.75rem (60px) - Bold - Títulos hero

H2: 1.875rem (30px) - Bold - Títulos de sección

H3: 1.5rem (24px) - Semibold - Subtítulos

Body: 1rem (16px) - Regular - Texto principal

Small: 0.875rem (14px) - Regular - Texto secundario

Estilo Visual

Minimalismo

• Espacios generosos entre elementos
• Diseño limpio sin saturación visual
• Enfoque en contenido y funcionalidad
• Uso estratégico del espacio en blanco

Elementos Artísticos

• Orbes con gradientes suaves
• Animaciones sutiles y fluidas
• Transiciones suaves (300-500ms)
• Efectos de hover minimalistas

Bordes y Radios

• Bordes redondeados: 16px (1rem)
• Botones: 8px (0.5rem)
• Bordes sutiles: 1px con opacidad 10%
• Sin sombras duras

Iconografía

• Estilo: Lucide Icons (outline)
• Tamaño estándar: 24px
• Stroke width: 2px
• Consistencia en todo el sitio

Tono de Comunicación

Profesional pero Cercano

Comunicamos con autoridad técnica sin perder la calidez humana. Somos expertos accesibles, no gurús inalcanzables.

Enfocado en Valor

Cada mensaje destaca beneficios concretos: ahorro de tiempo, reducción de errores, escalabilidad. Hablamos de resultados, no solo de tecnología.

Claro y Directo

Evitamos jerga innecesaria. Explicamos conceptos complejos de forma simple. Nuestros CTAs son claros y accionables.

Palabras Clave

AutomatizaciónEficienciaInnovaciónTransformaciónInteligenteEscalableConfiableResultados

Componentes

Botones

CTAs Premium

Usar borde dorado (#D4AF37) para acciones principales | Hover rellena con dorado

Secundarios

Azul-gris (#5F7382) para elementos de marca

Padding: 12px 24px | Border radius: 8px | Transición: 300ms

Tarjetas

Título de Tarjeta

Contenido de ejemplo con padding generoso y bordes redondeados.

Background: #EFEEE9 | Border radius: 16px | Padding: 32px

Formularios

Background: blanco | Border: 1px negro/10% | Focus: ring negro/20%

Guías de Uso

✓ Hacer

• Mantener espacios generosos entre elementos
• Usar la paleta de colores establecida
• Priorizar la legibilidad y claridad
• Aplicar animaciones sutiles y con propósito
• Mantener consistencia en toda la experiencia
• Usar máximo 1 CTA dorado por sección
• Verificar contraste WCAG AA antes de usar combinaciones

✗ No Hacer

• Saturar el diseño con demasiados elementos
• Usar colores fuera de la paleta establecida
• Aplicar sombras duras o efectos excesivos
• Mezclar múltiples estilos tipográficos
• Crear animaciones distractoras o lentas
• Usar múltiples CTAs dorados en la misma sección
• Combinar colores con bajo contraste (Azul Claro sobre Beige Claro)

Casos de Uso por Componente

Componente	Primario	Secundario	Acento	Fondo
Hero	Beige Claro	Azul Claro	Dorado (CTA)	Negro
Navbar	Beige Claro	Azul-Gris	Naranja (hover)	Negro
Cards	Negro	Tierra	Azul-Gris (icon)	Beige Claro
Footer	Azul Claro	Tierra	Azul-Gris (links)	Negro
Forms	Negro	Tierra	Dorado (submit)	Beige Claro
Alerts Success	Negro	-	Dorado	Dorado/10

Referencias de Inspiración

Cursor

Minimalismo técnico y claridad

Starlink

Elegancia espacial y modernidad

Linear

Diseño limpio y funcional

Aerolab

Creatividad y profesionalismo