GRAXcore
Manual de Marca
Versión 1.0 - Mayo 2026

Índice

1. Identidad de Marca
2. Paleta de Colores
3. Tipografía
4. Logo y Versiones
5. Componentes UI
6. Espaciado y Grid
7. Guías de Uso

Identidad de Marca

Visión

Grax Core es una agencia AI-Tech especializada en Performance Marketing, Generación de Contenido y Automatización de Procesos, impulsada por inteligencia artificial.

Valores

Innovación: Utilizamos la IA más avanzada para resolver problemas complejos.

Transparencia: Resultados medibles, sin compromisos, con datos reales.

Automatización: Los agentes IA (IAN, AUTI, CAI, IATI) hacen el trabajo pesado.

Resultados: Enfoque 100% en ROI y crecimiento del negocio.

Tone of Voice

Profesional pero accesible. Técnico pero comprensible. Confiado pero sin arrogancia.

Paleta de Colores

Colores Primarios

Primary Verde Oscuro
#1E3D2F
Fondos principales, headings, CTA primarios
Accent Lime
#C8F135
Highlights, accents, badges, CTAs destacadas

Colores Secundarios

Surface Low
#F4F6F0
Fondos claros, cards, superficies
Surface
#FFFFFF
Fondo principal, cards destacadas
Text Muted
#5C6A5C
Descripciones, texto secundario
Border
#D6DBD0
Borders, dividers, líneas

Sistema Tipográfico

Font Family

Primaria: Inter, Google Sans, -apple-system, BlinkMacSystemFont, Segoe UI

Fallback: Sistema estándar de cada navegador/OS

Escalas Tipográficas

H1 - Heading 1
Maximiza tu ROI con IA
56px • Bold (700) • Line-height 1.15
H2 - Heading 2
Funcionalidades de Performance Marketing
48px • Bold (700) • Line-height 1.2
H3 - Heading 3
Análisis y Segmentación
36px • Bold (700) • Line-height 1.25
H4 - Heading 4
Información Importante
20px • Bold (700) • Line-height 1.3
Body - Párrafos
Este es el texto estándar para cuerpo de contenido. Utiliza font weight 400 con line-height de 1.8 para óptima legibilidad.
16px • Regular (400) • Line-height 1.8
Small - Texto Pequeño
Descripción de componente o dato secundario
14px • Medium (500) • Line-height 1.6

Logo y Versiones

Logo Principal

GRAXcore

Variantes

Positiva (sobre blanco): Verde oscuro + Accent lime

Negativa (sobre verde): Blanco + Accent lime

Monocromática: Solo verde oscuro

Uso Correcto

✓ CORRECTO
• Logo con suficiente espacio blanco
• Mantener proporción texto-color
• Usar en fondos claros y oscuros
✗ INCORRECTO
• Logo estirado o comprimido
• Cambiar colores sin autorización
• Usar sobre patrones complejos

Espacio Mínimo

Mantener un mínimo de 20px de espacio blanco alrededor del logo en todas las direcciones.

Componentes UI

Botones

Botón Primario

Background #1E3D2F, texto blanco, padding 12-14px

Botón Secundario

Border 2px #1E3D2F, fondo transparente

Badges

⚡ Powered by AUTI 🚀 Lo que AUTI puede hacer ⭐ Casos de Éxito

Cards

Título de Card
Esta es una card estándar con background claro y borde sutil.
Card Destacada
Borde izquierdo accent para destacar información importante.

Espaciado y Grid

Sistema de Espaciado

Utilizamos un sistema de espaciado basado en múltiplos de 8px para mantener coherencia.

8px
12px
16px
24px

Padding Estándar

Elemento Padding Ejemplo
Botón pequeño 10px 16px CTAs en cards
Botón estándar 14px 36px CTAs principales
Card pequeña 20px Testimonios, badges
Card grande 32-40px Planes, features

Gap entre elementos

Situación Gap Recomendado
Elementos dentro de card 16-24px
Cards en grid 24-32px
Secciones 80-120px

Guías de Uso

Paleta de Colores - Casos de Uso

Verde Oscuro (#1E3D2F)

✓ Fondos de secciones principales
✓ Headings y títulos importantes
✓ Botones primarios
✓ Fondos de footer
✓ Iconos y elementos destacados

Lime Accent (#C8F135)

✓ Highlights en headings
✓ Badges y etiquetas
✓ Iconos de checkmark
✓ Botones secundarios (CTA)
✓ Borders en elementos destacados
✗ NO usar como fondo extenso sin verde

Material Design 3 - Principios

Elevación: Usar sombras sutiles (0 4px 12px) para crear profundidad.

Redondeado: Border-radius 8-12px para componentes, 24px para badges/pills.

Transiciones: 0.3s ease para hovers y cambios de estado.

Responsividad: Mobile first, luego tablet, luego desktop.

Tipografía - Casos de Uso

H1: Títulos de página principal, hero sections

H2: Títulos de secciones principales

H3: Subtítulos, títulos de subsecciones

Body: Párrafos descriptivos y contenido principal

Small: Descripciones de componentes, labels, metadata

Ejemplos: Qué Hacer y Qué No

Uso del Color Accent

✓ CORRECTO
Lime como highlight en textos, pequeños accents, badges. Proporciona balance.
✗ INCORRECTO
Lime como fondo extenso de secciones. Causa fatiga visual y poca legibilidad.

Tipografía

✓ CORRECTO
Usar Inter/Google Sans. Mantener line-height 1.6+. Bold solo para headlines.
✗ INCORRECTO
Fuentes sans-serif diferentes. Line-height < 1.4. Todo bold o itálico.

Spacing

✓ CORRECTO
Usar múltiplos de 8px. Mantener consistencia. Dar aire a los elementos.
✗ INCORRECTO
Espaciado aleatorio. Elementos aglomerados. Inconsistencia entre secciones.

Resumen Técnico CSS

Variables CSS Root

--primary: #1E3D2F;
--accent: #C8F135;
--on-accent: #1A2A0A;
--surface: #FFFFFF;
--surface-low: #F4F6F0;
--text: #1A1A1A;
--text-muted: #5C6A5C;
--border: #D6DBD0;

Breakpoints Responsive

Dispositivo Ancho Máximo Media Query
Desktop 1400px+ Defecto
Tablet 1024px @media (max-width: 1024px)
Mobile 768px @media (max-width: 768px)
Mobile Small 600px @media (max-width: 600px)

Shadow System

Pequeña: 0 4px 12px rgba(0, 0, 0, 0.05)

Mediana: 0 8px 16px rgba(0, 0, 0, 0.1)

Grande: 0 20px 40px rgba(0, 0, 0, 0.15)

Preguntas

Para más información sobre la marca, contacta al equipo de marketing.

brand@graxcore.com