Manual de Marca Rurak
Sistema de diseño moderno con brand tokens, accesibilidad WCAG AA y enfoque digital-first. "El que ejecuta" representado a través de elementos visuales consistentes y escalables.
Cómo usar este manual
Objetivo
Asegurar consistencia visual y verbal en web, app, redes, documentos y ventas.
Regla principal
Si algo no está definido aquí, se crea como token/componente antes de diseñar piezas nuevas. Esto evita "parches" y mantiene la coherencia del sistema.
Enfoque
- Digital-first: Pensado para web y aplicaciones
- Design tokens: Variables reutilizables para escalar
- Accesibilidad: WCAG AA como estándar mínimo
- Sistema: No plantillas sueltas, sino componentes
Fundamentos de marca
La base de todo lo que somos
Propósito
Crear software confiable y escalable que simplifique operaciones empresariales, automatizando lo repetitivo para que las empresas se enfoquen en crecer.
Promesa de valor
Velocidad + Calidad + Soporte. Entregamos soluciones que funcionan, con código limpio y acompañamiento continuo.
Origen
Guayaquil, Ecuador. "Rurak" viene del Kichwa y significa "el que ejecuta", "el que hace". Tecnología con raíces locales y alcance global.
Pilares de marca
Ejecución
No solo planeamos, construimos. Código que se despliega y funciona.
Ingeniería
Soluciones técnicas sólidas, arquitectura pensada para escalar.
Claridad
Comunicación directa, sin jerga innecesaria. Lo que decimos, lo cumplimos.
Seguridad
Código seguro por defecto. Protección de datos como prioridad.
Personalidad de marca
Audiencia
Arquitectura de marca y naming
Nombre principal
Del Kichwa: "El que ejecuta"
Servicios
- Automatización de procesos
- Desarrollo de software
- Desarrollo de páginas web
- Integración de sistemas
- Consultoría tecnológica
Convención de productos
- Rurak [Nombre] — Formato estándar
- Nombre en inglés, una palabra
- Evitar siglas o abreviaciones
- Ejemplo: Rurak Forms, Rurak Sync
Reglas de co-branding
- Logo Rurak siempre a la izquierda o arriba
- Separación mínima: 2× el ancho del isotipo
- No modificar colores del logo Rurak
- En fondos claros usar versión "light"
Sistema de logotipo
Digital-first: versiones optimizadas para cada contexto
3.1 Versiones oficiales
Fondos claros (Light)
Horizontal
Uso general en fondos claros.
Vertical
Espacios estrechos en fondos claros.
Isotipo
Favicon, app icon en fondos claros.
Monocromo
Impresión 1 tinta en fondos claros.
Fondos oscuros (Dark)
Horizontal
Uso general: headers, navegación, presentaciones.
Vertical
Espacios estrechos, redes sociales, avatares.
Isotipo
Favicon, app icon, espacios reducidos.
Monocromo
Fondos complejos, impresión 1 tinta.
Rurak Technologies
Horizontal
Uso general en fondos claros con descriptor.
Vertical
Espacios estrechos en fondos claros con descriptor.
Horizontal
Uso general en fondos oscuros con descriptor.
Vertical
Espacios estrechos en fondos oscuros con descriptor.
Firma de marca
Firma Dark
Uso en comunicaciones corporativas y firmas de correo (fondo oscuro).
Firma Light
Uso en comunicaciones corporativas y firmas de correo (fondo claro).
3.2 Área de seguridad (Clear Space)
Unidad X = 25% del ancho del isotipo
Mantener este margen mínimo alrededor del logo en todos los usos.
Si isotipo = 64px → X = 16px de margen 3.3 Tamaño mínimo
Impresión: Mínimo 10mm de ancho para el isotipo.
3.4 Usos correctos e incorrectos
Sí hacer
- Mantener proporciones originales
- Usar en fondos con contraste ≥4.5:1
- Respetar área de seguridad
- Usar gradiente Terracotta → Oro
- Desactivar animaciones para impresión
- Usar isotipo en tamaños <40px
No hacer
- No distorsionar ni estirar
- No cambiar colores del gradiente
- No usar en fondos sin contraste
- No rotar en ángulos no estándar
- No añadir sombras o efectos externos
- No superponer elementos sobre el logo
Sistema de color
Paleta oficial y combinaciones aprobadas
Brand / Primario
Color principal para CTAs, links y acentos de marca
#D4613B --terracotta #E8845F --terracotta-light #B84A28 --terracotta-dark Secundario / Océano
Elementos secundarios, navegación, estados hover alternativos
#1A535C --oceano #2D7A87 --oceano-light #0F3239 --oceano-dark Acentos
Badges, highlights, categorías y elementos tecnológicos
#F7B32B --oro-inca #4ECDC4 --selva #88D4AB --menta Neutrales
Colores base para texto y elementos UI
#0D1B2A --noche-andina #1A1A2E --obsidiana #161B22 --carbon #6B7280 --ceniza #9CA3AF --ceniza-light #D1D5DB --humo #E8E4E0 --piedra #FAFAF9 --blanco Superficies (Fondos)
Variables semánticas para fondos y capas
#0D1117 --bg-base #161B22 --bg-surface #21262D --bg-elevated #1C2128 --bg-card Variables de Texto
Tokens semánticos para jerarquía de texto
#F5F5F5 --text-primary #A1A1AA --text-secondary #71717A --text-muted #E8845F --text-accent Bordes
Variables para separadores y contornos
rgba(255,255,255,0.08) --border-subtle rgba(255,255,255,0.12) --border-default rgba(255,255,255,0.2) --border-strong #D4613B --border-accent Gradientes
Gradientes oficiales para fondos, botones y efectos
--gradient-primary CTAs, botones principales --gradient-oceano Botones secundarios --gradient-sunset Hero sections, fondos destacados --gradient-dark Fondos de sección --gradient-glow Efectos de luz, overlays --gradient-blob-1 Elementos decorativos --gradient-blob-2 Elementos decorativos Variables CSS (para desarrolladores)
/* Colores principales */
--terracotta: #D4613B;
--oro-inca: #F7B32B;
--selva: #4ECDC4;
/* Fondos */
--bg-base: #0D1117;
--bg-surface: #161B22;
/* Gradiente principal */
--gradient-primary: linear-gradient(
135deg, #D4613B, #F7B32B
);Sistema tipográfico
Tipografías oficiales y escala de tamaños
Space Grotesk
Display / HeadlinesTipografía geométrica con carácter. Para títulos, navegación y elementos destacados.
--font-display Outfit
Body / UISans-serif humanista con excelente legibilidad. Para párrafos, formularios y UI.
--font-body JetBrains Mono
Code / DataMonoespaciada optimizada para código. Clara distinción de caracteres similares.
--font-mono Escala tipográfica
--text-hero --text-heading-1 --text-heading-2 --text-heading-3 --text-body-lg --text-body --text-small Iconografía
Librería
Lucide Icons — Conjunto oficial de iconos
Estilo
Outline — Lineales, nunca filled
Tamaño
24px — ViewBox estándar
Stroke
2px — Grosor consistente
Navegación y acciones
Servicios y tecnología
Comunicación y contacto
Estados y feedback
Archivos y documentos
Seguridad y usuario
Prohibido
- Mezclar iconos de estilos distintos (filled + outline)
- Cambiar el grosor del stroke por icono individual
- Usar iconos con esquinas cuadradas junto a redondeadas
- Escalar iconos fuera de proporciones (mantener aspecto 1:1)
- Usar iconos de otras librerías mezclados con Lucide
Todos los iconos provienen de Lucide Icons — lucide.dev
Sistema de sombras
Elevación y profundidad visual
--shadow-sm Elementos sutiles, inputs --shadow-md Cards, dropdowns --shadow-lg Modales, popovers --shadow-xl Elementos flotantes --shadow-2xl Hero cards, destacados Sombras con glow
--shadow-glow Hover en CTAs --shadow-glow-lg Hero elements --shadow-selva Elementos secundarios Layout y composición
Sistema de espaciado (4px base)
--space-1 4px --space-2 8px --space-3 12px --space-4 16px --space-5 20px --space-6 24px --space-8 32px --space-10 40px --space-12 48px --space-16 64px --space-20 80px --space-24 96px --space-32 128px Border radius
--radius-sm 4px --radius-md 8px --radius-lg 12px --radius-xl 16px --radius-2xl 24px --radius-3xl 32px --radius-full 9999px Contenedores
--container-sm 640px --container-md 768px --container-lg 1024px --container-xl 1200px --container-2xl 1400px Z-Index
Escala de capas para gestionar la profundidad de elementos
--z-base 0 --z-elevated 10 --z-dropdown 100 --z-sticky 200 --z-overlay 300 --z-modal 400 --z-toast 500 Componentes
Elementos UI reutilizables
Botones
Cards
Primary
Desplazamiento hacia arriba.
.card-primary Secondary
Desplazamiento hacia arriba.
.card-secondary Tertiary
Desplazamiento hacia arriba.
.card-tertiary Quaternary
Desplazamiento hacia arriba.
.card-quaternary Quinary
Desplazamiento hacia arriba.
.card-quinary Primary
Borde superior Terracotta.
.value-primary Secondary
Borde superior Selva.
.value-secondary Tertiary
Borde superior Oro.
.value-tertiary Quaternary
Borde superior Océano.
.value-quaternary Quinary
Borde superior Menta.
.value-quinary Badges
.badge .badge-primary .badge-secondary .badge-tertiary .badge-quaternary .badge-quinary Efectos especiales
.glass .gradient-text .glow .line-accent Animación
Directrices de animación y transiciones
Duraciones
--duration-instant 100ms Toggles, feedback inmediato --duration-fast 150ms Hovers, micro-interacciones --duration-normal 300ms Transiciones estándar --duration-slow 500ms Modales, revelaciones Curvas (Easing)
--ease-out cubic-bezier(0.33, 1, 0.68, 1) Entradas, apariciones --ease-in-out cubic-bezier(0.65, 0, 0.35, 1) Movimientos continuos --ease-bounce cubic-bezier(0.34, 1.56, 0.64, 1) Feedback positivo prefers-reduced-motion para usuarios
con sensibilidad al movimiento.
Accesibilidad
Estándares de accesibilidad para todos los usuarios
Contraste de color
- Texto normal: ≥ 4.5:1 (AA)
- Texto grande (≥18px bold): ≥ 3:1
- Componentes UI/bordes: ≥ 3:1
Estados de foco
Todos los elementos interactivos deben tener un estado :focus-visible claramente
visible para navegación por teclado.
No depender solo del color
Usar íconos, texto o patrones además del color para indicar estados (error, éxito, advertencia).
Reduced motion
Respetar prefers-reduced-motion desactivando animaciones para usuarios con
sensibilidad.
Voz y tono
Copywriting de marca
Tono base
"Claro, directo, experto, sin humo"
Palabras que sí
- implementamos
- construimos
- automatizamos
- optimizamos
- ejecutamos
- escalable
- robusto
Palabras que no
- revolucionamos
- disruptivo
- sinergia
- paradigma
- next-gen
- game-changer
- leverage
Ejemplos On-brand vs Off-brand
"Automatizamos tu proceso de facturación. Menos errores, más tiempo para crecer."
"Revolucionamos paradigmas de facturación con soluciones disruptivas next-gen."
Gobernanza
Mantener la consistencia de la marca
Fuente oficial de assets
Siempre descargar los archivos desde el Brand Kit oficial. No usar versiones modificadas o de terceros.
Actualizaciones
Este manual se actualiza periódicamente. Verificar que estás usando la versión más reciente antes de producir materiales.
Antes de publicar, verificar
- Logo en formato y tamaño correcto
- Colores de la paleta oficial
- Tipografías autorizadas
- Contraste suficiente para legibilidad
- Área de seguridad respetada