Identidad de marca
Branding y
Sistema de Diseño
Guía completa de identidad visual, principios de diseño y componentes para mantener consistencia en cada punto de contacto de la marca Zen.
Identidad
Identidad de marca
Zen es una plataforma de gestión fiscal diseñada para freelancers mexicanos. Nuestra identidad refleja claridad, confianza y simplicidad en un espacio que tradicionalmente es complejo y estresante.
Misión
Hacer que la gestión fiscal sea clara, simple y accesible para cada freelancer en México.
Valores
Transparencia, precisión y confianza. Cada decisión de diseño prioriza la claridad sobre la decoración.
Personalidad
Profesional pero accesible. Confiable sin ser corporativa. Premium sin ser exclusiva.
Nombre de marca
El nombre Zen se escribe siempre con Z mayúscula, seguido de minúsculas. Nunca en mayúsculas completas, nunca en minúsculas completas.
Cuando se menciona junto al producto completo, se usa Zen solo. La referencia a la empresa es Lanzer Labs.
Logotipo
Logotipo
El logotipo de Zen es el elemento más reconocible de nuestra marca. Debe usarse con cuidado y consistencia en todos los medios.
Sobre fondo oscuro (uso principal)
Sobre fondo claro (invertido)
Reglas de uso
Espacio de respeto
Mantener un espacio mínimo de respeto alrededor del logotipo equivalente a la altura de la letra "Z" del logo en todos los lados. Ningún otro elemento debe invadir este espacio.
Tamaño mínimo
El logotipo no debe reproducirse a menos de 80px de ancho en pantalla o 20mm en impresión para garantizar legibilidad.
Prohibido
- No estirar, rotar ni distorsionar el logotipo
- No cambiar los colores del logotipo
- No agregar sombras, bordes o efectos al logotipo
- No colocar sobre fondos con poco contraste
- No recrear el logotipo con otra tipografía
Colores
Paleta de colores
Sistema cromático minimalista basado en oscuros con un acento verde que transmite confianza y crecimiento. Inspirado en las paletas de Stripe y Linear.
Background
#09090B Fondo principal de la aplicación
--color-background Surface
#18181B Tarjetas y elementos elevados
--color-surface Surface Elevated
#1F1F23 Elementos con mayor profundidad
--color-surface-elevated Border
#27272A Bordes y divisores
--color-border Border Subtle
#1F1F23 Bordes sutiles
--color-border-subtle Text Primary
#FAFAFA Texto principal y títulos
--color-text-primary Text Secondary
#A1A1AA Texto secundario y descripciones
--color-text-secondary Text Tertiary
#71717A Etiquetas y texto sutil
--color-text-tertiary Accent
#22C55E CTAs, enlaces activos, estados de éxito
--color-accent Accent Hover
#16A34A Estado hover del acento
--color-accent-hover Accent Subtle
rgba(34, 197, 94, 0.1) Fondos sutiles con acento
--color-accent-subtle Reglas de uso del color
Contraste y accesibilidad
Todo texto debe cumplir con un ratio de contraste mínimo de 4.5:1 (WCAG AA). El texto primario (#FAFAFA) sobre fondo (#09090B) alcanza un ratio de 19.5:1.
Verde como acento, no como base
El color verde (#22C55E) se usa exclusivamente como acento: botones CTA, indicadores de estado, enlaces activos y checkmarks. Nunca como fondo de secciones completas ni para grandes bloques de texto.
Tipografía
Tipografía
Inter Variable es nuestra tipografía única. Diseñada específicamente para interfaces digitales, ofrece excelente legibilidad en todos los tamaños. Activamos las variantes estilísticas cv02, cv03, cv04, cv11 para un aspecto más refinado.
Display
64px / 700
tracking: -0.025em
Tu situación fiscal
Heading 1
40px / 600
tracking: -0.02em
Sección principal
Heading 2
28px / 600
tracking: -0.015em
Subtítulo de sección
Heading 3
22px / 600
tracking: -0.01em
Título de tarjeta
Body Large
18px / 400
Texto descriptivo principal para párrafos y contenido extenso.
Body
16px / 400
Texto regular para contenido general y listas.
Small
14px / 500
Etiquetas, captions y texto auxiliar
Caption
12px / 500
tracking: 0.02em
METADATA Y BADGES
Pesos disponibles
400 Regular — Texto de ejemplo
500 Medium — Texto de ejemplo
600 Semibold — Texto de ejemplo
700 Bold — Texto de ejemplo
Interlineado
1.05 Títulos Display
1.2 Headings
1.5 Body
1.75 Contenido largo
Variantes OpenType
cv02 "a" abierta
cv03 "6, 9" abiertos
cv04 "i" con serif
cv11 "1" con serif
Espaciado
Espaciado y layout
Sistema de espaciado basado en múltiplos de 4px, siguiendo las convenciones de Tailwind CSS. El espacio generoso entre secciones transmite calma y claridad.
Escala de espaciado
1 4px 2 8px 3 12px 4 16px 6 24px 8 32px 10 40px 12 48px 16 64px 20 80px 24 96px 32 128px 40 160px Contenedor
Ancho máximo: 1152px (max-w-6xl)
Padding horizontal: 16px (móvil) / 24px (desktop)
Secciones
Padding vertical: 80px (móvil) / 112px (desktop)
Separación entre secciones con border-t border-border
Grid
Gap estándar: 24px (gap-6)
Columnas: 1 (móvil) / 2-3 (desktop)
Sombras
Sombras y profundidad
Sistema de sombras diseñado para interfaces oscuras. Cada nivel crea una sutil sensación de elevación sin perder el carácter minimalista.
Small
Botones y elementos pequeños
--shadow-sm Medium
Tarjetas elevadas y dropdowns
--shadow-md Large
Modales y elementos prominentes
--shadow-lg Glow
Efecto de resplandor para CTAs
--shadow-glow Botones
Botones
Dos variantes de botón cubren todos los casos de uso. El primario para acciones principales y el secundario para acciones complementarias.
Botón primario
Gradiente: #FFFFFF → #E8E8EC
Radio: 12px | Padding: 12px 24px
Hover: translateY(-1px)
Botón secundario
Fondo: rgba(255,255,255,0.06) glass
Borde: rgba(255,255,255,0.12)
Hover: translateY(-1px) + brillo
Guía de uso
Jerarquía
- Un solo botón primario por sección visible
- Secundarios para acciones complementarias
- Texto como link para acciones terciarias
Texto
- Verbos de acción: "Comenzar", "Ver", "Crear"
- Breves: máximo 3-4 palabras
- Sin puntos finales ni mayúsculas completas
Tarjetas
Tarjetas y contenedores
Las tarjetas son el contenedor principal de contenido. Tres variantes cubren diferentes niveles de interactividad.
Estática
Tarjeta de contenido
Sin interacción, solo presenta información.
Fondo: #18181B
Borde: 1px #27272A
Radio: 16px
Padding: 24-32px
Interactiva
Hover para efecto
Se eleva y muestra sombra al pasar el cursor.
Clase: .card-interactive
Hover: translateY(-2px)
Sombra hover: shadow-md
Destacada
Con borde acento
Para planes destacados o elementos prioritarios.
Borde: accent/30
Glow: shadow-glow
Uso: planes populares, alertas
Movimiento
Movimiento y animación
Animaciones sutiles que refuerzan la jerarquía y guían la atención, sin distraer. Inspiradas en los principios de movimiento de Apple y Material Design.
Fast
150ms Hovers, toggles, feedback inmediato
Normal
250ms Transiciones estándar, acordeones
Slow
400ms Entradas, animaciones complejas
Curvas de easing
cubic-bezier(0.16, 1, 0.3, 1) Entrada rápida, salida suave. Para la mayoría de transiciones.
cubic-bezier(0.65, 0, 0.35, 1) Simétrica. Para movimientos continuos como pulsaciones.
Principios de movimiento
- 1
Intencional
Cada animación tiene un propósito: revelar, guiar o confirmar.
- 2
Sutil
Movimientos pequeños (12-24px). Sin rebotes ni exageraciones.
- 3
Accesible
Respeta
prefers-reduced-motion. - 4
Escalonado
Grupos de elementos se revelan con delay de 80ms entre cada uno.
Patrones de animación
| Patrón | Atributo | Comportamiento |
|---|---|---|
| Revelado en scroll | data-animate | Fade in + slide up (24px) al entrar al viewport |
| Stagger de hijos | data-animate-stagger | Hijos se revelan secuencialmente (80ms delay) |
| Parallax | data-parallax="0.1" | Desplazamiento sutil en scroll (0.03 - 0.15) |
| Entrada inicial | .animate-enter | Fade in + slide up (12px), 0.7s ease-out |
Voz y tono
Voz y tono
La voz de Zen es consistente; el tono se adapta al contexto. Hablamos en español mexicano, con naturalidad y sin tecnicismos innecesarios.
Clara
no confusa
Frases cortas, vocabulario accesible. Si un contador lo entiende y un freelancer también, está bien.
Confiable
no arrogante
Hablamos con autoridad porque conocemos el tema. Sin alarmas falsas ni promesas exageradas.
Accesible
no casual
Profesional pero cercana. Tuteo ("tú"), no ustedeo. Sin slang excesivo ni emojis.
Directa
no fría
Al grano. Cada palabra cuenta. Los usuarios vienen por respuestas, no por prosa.
Lineamientos de escritura
- Español mexicano natural, no castellano ni español neutro
- Tuteo informal: "Conecta tu RFC", no "Conecte su RFC"
- Verbos de acción en CTAs: "Comenzar", "Ver", "Crear"
- Números con formato mexicano: $1,000.00 (coma miles, punto decimales)
- Títulos en "Sentence case", no en "Title Case"
Ejemplos
Título de sección
Descripción
Error / Alerta
Uso correcto
Uso correcto e incorrecto
Referencia rápida de las prácticas que mantienen la consistencia visual de la marca.
Correcto
- Usar siempre el fondo oscuro (#09090B) como base
- Mantener alto contraste para texto (ratio 4.5:1 mínimo)
- Usar Inter Variable como única tipografía
- Verde (#22C55E) solo como acento para CTAs y estados positivos
- Animaciones sutiles que respetan prefers-reduced-motion
- Bordes redondeados de 16px para tarjetas, 12px para botones
- Espaciado generoso entre secciones (80-160px)
- Iconografía con trazo (stroke), no rellena (filled)
Incorrecto
- Usar fondos claros o blancos como base de página
- Usar tipografías alternativas o decorativas
- Múltiples colores de acento (solo verde)
- Animaciones llamativas, rebotes o duraciones largas
- Gradientes de colores o degradados como fondo de secciones
- Bordes redondeados inconsistentes (mezclar radios)
- Texto en mayúsculas completas excepto en labels/badges pequeños
- Emojis en interfaz o comunicación de marca
Referencia técnica
Stack tecnológico y archivos clave para implementar el sistema de diseño.
Stack
Astro 5 Tailwind CSS 4 Inter Variable (self-hosted) Vercel es-MX Archivos clave
global.css Tokens de diseño, animaciones, utilidades Layout.astro Shell HTML, meta tags, fonts Header.astro Navegación, menú mobile Footer.astro Pie de página, enlaces legales