Manual de Marca
Guía completa de identidad visual de Transforma Tech. Todo lo que necesitas para usar correctamente nuestra marca.
Logotipo
Versión Light
Usar sobre fondos claros
Versión Dark
Usar sobre fondos oscuros
Icono (Briefcase con Gradiente)
64px
48px
40px
32px
24px
El icono de briefcase usa un gradiente característico de teal a purple. Puede usarse solo en espacios reducidos como favicons, avatares o botones.
Reglas de Uso
- ✓Mantener siempre el espacio mínimo de aire alrededor del logo (equivalente a la altura del icono)
- ✓Usar versiones proporcionadas, nunca recrear el logo manualmente
- ✓El icono debe mantener siempre el gradiente de teal a purple
- ✗No distorsionar, rotar o modificar las proporciones del logo o icono
- ✗No cambiar el gradiente del icono ni usar colores sólidos
- ✗No usar el logo completo en espacios menores a 120px de ancho, usar solo el icono
Paleta de Colores
Colores Primarios
Teal
#008080
RGB: 0, 128, 128
oklch(0.52 0.12 195)
Principal / Inicio del gradiente
Purple
#9333EA
RGB: 147, 51, 234
oklch(0.55 0.24 300)
Accent / Final del gradiente
Gradiente Característico
linear-gradient(90deg, #008080, #9333EA)
Usado en icono y elementos destacados
Colores Neutrales
White
#FFFFFF
Light Gray
#F8F9FA
Gray
#6B7280
Dark
#1F2937
Uso de Colores
Hacer
- • Usar Teal (#008080) como color principal para elementos de UI y navegación
- • Aplicar Purple (#9333EA) para acentos, CTAs secundarios y elementos interactivos
- • Usar el gradiente teal-to-purple exclusivamente en el icono del logo y elementos destacados
- • Mantener fondos blancos o neutrales claros para contenido principal
- • Usar texto oscuro sobre fondos claros y viceversa para contraste óptimo
Evitar
- • No usar el gradiente en áreas extensas de fondo
- • No modificar los valores HEX exactos de los colores de marca
- • No invertir la dirección del gradiente (siempre teal→purple)
- • No usar purple como color principal, solo como accent
- • No crear variaciones del gradiente con otros colores
Tipografía
Títulos y Encabezados
Aa
Fraunces
Serif editorial elegante para títulos impactantes
Texto de Cuerpo
Aa
Inter
Sans-serif moderna y legible para contenido
Jerarquía Tipográfica
text-4xl md:text-5xl lg:text-6xl font-bold
text-2xl md:text-3xl font-bold
text-xl md:text-2xl font-semibold
text-base md:text-lg leading-relaxed
text-sm text-muted-foreground
Espaciado y Layout
Sistema de Grid
Grid de 12 columnas con gap de 16px (md) y 24px (lg)
Escala de Espaciado
Border Radius
Small
8px (rounded-sm)
Medium
10px (rounded-md)
Large
12px (rounded-lg)
Extra Large
16px (rounded-2xl)
Efectos y Componentes
Glassmorphism
Efecto Glass
Fondo semi-transparente con blur para crear profundidad y jerarquía visual moderna.
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);Botones
Reglas de uso:
- • Primary: CTAs principales (máximo 1 por sección)
- • Secondary: Acciones secundarias
- • Outline: Acciones alternativas
- • Ghost: Acciones terciarias o navegación
Sombras
Small
shadow-sm
Medium
shadow-md
Large
shadow-lg
¿Necesitas el manual completo?
Contáctanos para obtener el kit completo con assets, logos vectoriales y recursos adicionales.