Sistema de Diseno
El sistema compartido de tokens de diseno, biblioteca de componentes y patrones de interfaz que utilizan MavelPoint y MavelCam. Solo dark-mode, compatible con WCAG AA, construido sobre Astro 5 SSR con islands de React 18.
Tokens de Color
Definiciones de color de marca, semanticos y utilitarios. Todas las interfaces usan solo dark-mode con base #161616.
Colores de Marca
Los colores primario y secundario que definen la identidad visual de MavelPoint.
Lime
#B9F23A
Accion primaria, CTAs
Indigo
#7B91FF
Secundario, focus rings
Black (Base)
#161616
Fondo de pagina
White
#FFFFFF
Texto principal
Colores Semanticos
Indicadores de estado para retroalimentacion, validacion y alertas.
Danger
#FF5858
Errores, acciones destructivas
Success
#34E09B
Confirmaciones, feedback positivo
Warning
#F9E24C
Precaucion, estados pendientes
Escala de Opacidad Lime
Se usa para estados hover, fondos y tintes sutiles.
5%
10%
15%
20%
30%
40%
50%
100%
Escala de Opacidad Indigo
Se usa para badges, estados focus y acentos secundarios.
5%
10%
15%
20%
30%
100%
Escala de Opacidad White
La columna vertebral de la jerarquia de superficies en dark-mode. Cada borde, divisor y etiqueta atenuada usa esta escala.
5%
Relleno
10%
Borde
15%
Hover
20%
Activo
30%
Atenuado
40%
Atenuado
50%
Secundario
60%
Cuerpo
70%
80%
90%
100%
Encabezado
Jerarquia de Superficies
Las superficies oscuras en capas generan profundidad sin color. Usa base-fill (white-5) para fondos de tarjetas sobre black.
Black (Base)
#161616 -- bg-black -- Fondo de pagina, capa mas baja
Base Fill
rgba(255,255,255,0.05) -- bg-white-5 -- Tarjetas, paneles, fondos de inputs
Surface Secondary
rgba(255,255,255,0.10) -- bg-white-10 -- Estados hover, color de borde
Surface Tertiary
rgba(255,255,255,0.15) -- bg-white-15 -- Estados activos, elementos elevados
Tipografia
Matter es la familia tipografica principal en todos los productos de MavelPoint — encabezados, cuerpo, botones e interfaz. Inter es el fallback. Todos los tamanos son en rem con escalado responsivo.
Familias Tipograficas
Matter es la tipografia principal. Inter es el fallback cuando Matter no esta disponible.
Matter — Principal
Clase Tailwind: font-matter
Autoalojada en woff2. Pesos Light–Bold. Se usa para texto de cuerpo, encabezados, botones y todos los elementos de interfaz. Fallback a Inter, luego sans-serif.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Inter — Fallback
Clase Tailwind: font-inter
Google Fonts. Se usa solo cuando Matter no esta disponible.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Escala Tipografica Desktop
Tamanos de encabezados y texto para pantallas ≥ 768px. Encabezados usan 130% de line height; cuerpo usa 150%.
| Token | Tamano | Line Height | Uso |
|---|---|---|---|
| text-heading2xl-desktop | 48px | 130% | Titulares hero |
| text-headingXl-desktop | 40px | 130% | Titulos de pagina (marketing) |
| text-headingLg-desktop | 36px | 130% | Encabezados principales de seccion |
| text-headingMd-desktop | 32px | 130% | Encabezados de seccion |
| text-headingBase-desktop | 28px | 130% | Encabezados de subseccion |
| text-headingSm-desktop | 24px | 130% | Titulos de tarjeta |
| text-headingXs-desktop | 20px | 130% | Encabezados menores |
| Texto de Cuerpo | |||
| text-textLg-desktop | 20px | 150% | Parrafos destacados |
| text-textMd-desktop | 18px | 150% | Texto de cuerpo grande |
| text-textBase-desktop | 16px | 150% | Texto de cuerpo por defecto |
| text-textSm-desktop | 14px | 150% | Texto secundario |
| text-textXs-desktop | 12px | 150% | Leyendas, letra pequena |
Escala Tipografica Movil
Tamanos reducidos para pantallas por debajo de 768px.
| Token | Tamano | Uso |
|---|---|---|
| headingXl | 20px | Titulos de pagina |
| headingLg | 18px | Encabezados de seccion |
| headingMd | 16px | Titulos de tarjeta |
| textLg | 16px | Parrafos destacados |
| textMd | 14px | Texto de cuerpo |
| textBase | 12px | Leyendas, etiquetas |
Escala de Texto en Botones
Tamanos dedicados para las etiquetas de botones interactivos.
Jerarquia de Color de Texto
Tres niveles de prominencia de texto para establecer la jerarquia visual.
Texto primario -- encabezados, contenido clave
text-white / #FFFFFFTexto secundario -- cuerpo, descripciones
text-white-60Texto atenuado -- leyendas, marcas de tiempo, metadatos
text-white-40Texto deshabilitado -- etiquetas inactivas, placeholders
text-white-30Reglas de Tipografia
Directrices de renderizado, espaciado y capitalizacion.
Line Heights
Todos los encabezados: 130%
Todo el texto de cuerpo: 150%
Font Smoothing
Antialiased en pantallas retina. Renderizado subpixel en no-retina (Windows ClearType).
Windows ClearType
letter-spacing: 0.01em aplicado para legibilidad ClearType en Windows.
Zoom de Inputs en iOS
Inputs forzados a 14px minimo para prevenir auto-zoom al enfocar en iOS Safari.
Capitalizacion
Sentence case en todo. NUNCA todo mayusculas para mas de 2–3 palabras. Monospace solo para contextos de codigo/tecnico.
Titulares
Directos, 6 palabras o menos cuando sea posible. Texto de cuerpo con line height generoso (1.5–1.7).
Espaciado y Layout
Sistema de grid responsivo con 7 breakpoints. La cantidad de columnas, gaps y margenes se escalan con el viewport.
Sistema de Breakpoints
Siete breakpoints con nombre, desde movil hasta ultra-wide. Las screens de Tailwind sobreescriben los valores por defecto.
| Nombre | Ancho Minimo | Columnas | Dispositivos Tipicos |
|---|---|---|---|
| xs | 360px | 4 | Telefonos pequenos |
| sm | 768px | 8 | Tablets, telefonos grandes en horizontal |
| md | 1024px | 12 | Portatiles, tablets en horizontal |
| mdMiddle | 1200px | 12 | Escritorios pequenos |
| lg | 1440px | 12 | Escritorios estandar |
| xl | 1536px | 16 | Escritorios grandes |
| 2xl | 1720px | 16 | Monitores ultra-wide |
Border Radius
Tokens de redondeo consistentes, de sutil a grande.
4px
Badges
8px
Inputs
12px
Tarjetas (xl)
16px
Modales (2xl)
24px
Contenedores
32px
Pills
Full
Avatares
Sombras
Cinco niveles de elevacion usando box-shadows basados en negro. Todos usan rgba(0,0,0,0.3) para mantener consistencia en superficies oscuras.
XS
0 1px 2px
Botones
S
0 2px 4px
Tarjetas
MD
0 4px 8px
Desplegables
LG
0 8px 16px
Modales
XL
0 16px 32px
Drawers
Glass Morphism
Se usa en la navegacion del header y paneles de overlay. Combina fondo semi-transparente con backdrop blur.
glass-effect
background: rgba(22, 22, 22, 0.8)
backdrop-filter: blur(20px)
Aplica mediante la clase utilitaria .glass-effect.
Componentes
Componentes de interfaz reutilizables con variantes tipadas, tamanos y estados. Construidos en Astro 5 SSR con islands de React 18 para interactividad.
Botones
4 tipos de variante, 3 esquemas de color, 3 tamanos. Todos los botones incluyen un area tactil minima de 44px en movil para accesibilidad.
Primario -- bg-lime text-black
Secundario -- estilo con borde
Ghost -- fondo transparente
Danger -- acciones destructivas
Estado focus: ring-2 ring-indigo ring-offset-2 ring-offset-black. Estado deshabilitado: opacity-50 cursor-not-allowed.
Badges
4 esquemas de color (lime, indigo, danger, default), 3 tipos (filled, soft, outline), 3 tamanos.
Soft (estilo por defecto)
Filled
Outline
Tarjetas
Cuatro tipos de tarjeta para distintos patrones de contenido. Todas usan fondo de superficie con bordes border-white-10.
Card (Base)
Tarjeta de contenido estandar con titulo, descripcion y slot para contenido hijo. Rounded-xl, border-white-10, bg-white-5.
CardArrow
Tarjeta de navegacion con animacion de flecha en hover. Se usa para paginas de funcionalidades y listas de navegacion.
→DateCard
Tarjeta con badge de fecha. Se usa para eventos, articulos del blog y contenido con vigencia temporal.
CardBackgroundColorImage
Tarjeta con fondo degradado o imagen. Se usa para contenido destacado y secciones hero.
Inputs
3 tamanos (sm, md, lg) con 3 estados cada uno (default, error, success). Todos incluyen focus ring-2 ring-indigo.
Estado por Defecto
Variantes de Estado
Los mensajes de error se muestran debajo usando el componente TextError en rojo danger (#FF5858).
Tabs
Tabs genericos y tipados con indicador animado. Construido con Headless UI para accesibilidad y Framer Motion para el subrayado deslizante.
Tab activo: text-lime con barra inferior animada. Inactivo: text-white-50 con transicion hover:text-white. El indicador se desliza entre tabs mediante Framer Motion layoutId.
Componentes de Texto
Componentes Heading y Paragraph tipados con salida de HTML semantico.
<Heading level=1 size="2xl">
Renderiza etiquetas semanticas h1-h6
Props: level (1-6), size (xs-2xl), class. Genera el elemento HTML heading correspondiente.
<Paragraph size="md">
Texto de cuerpo con line-height y color consistentes.
Props: size (sm, md, lg), class. Siempre se renderiza como un elemento p.
<TextError>
Este campo es obligatorio.
Muestra mensajes de error debajo de los campos del formulario. Color fijo: text-danger (#FF5858).
Iconos
Phosphor Icons como set de iconos principal, ampliado con iconos personalizados para plataformas sociales y servicios de streaming.
Phosphor Icons
Set de iconos principal. Se usa para acciones de interfaz, navegacion y feedback del sistema. Disponible en pesos regular, bold, fill y duotone. Tamano por defecto: 20px para interfaz, 24px para navegacion.
Iconos Personalizados de Plataforma
Iconos de marca y plataforma no disponibles en Phosphor: SoundCloud, Beatport, Bandcamp, Resident Advisor, Mixcloud y otras plataformas de musica electronica.
Animaciones y Efectos
Diseno de movimiento con Framer Motion para islands de React y CSS keyframes para contenido estatico. Todas las animaciones respetan prefers-reduced-motion.
Animaciones Keyframe
Animaciones CSS definidas en la configuracion de Tailwind y en la hoja de estilos global.
| Nombre | Comportamiento | Uso |
|---|---|---|
| fadeIn | Opacidad de 0 a 1, translateY de 10px a 0 | Entradas de seccion, revelado de tarjetas |
| caret-blink | Opacidad alterna 0/1 en bucle de 1s | Cursor de input de texto |
| loader-bounce | Scale y translateY con rebote | Indicador de puntos de carga |
| loader-orbit | Rotacion de 360 grados en bucle | Spinner de estado de carga |
| loader-dash | Animacion SVG de stroke-dasharray | Indicador de anillo de progreso |
Patrones de Framer Motion
Animaciones de islands de React para componentes interactivos.
Entrada Escalonada
Los elementos hijos se animan en secuencia con un delay staggerChildren de 0.05-0.1s. Cada hijo aparece con fade in y se desliza hacia arriba. Se usa en grids de tarjetas, listas de funcionalidades y resultados de busqueda.
Indicador de Tab (layoutId)
Animacion de layout compartido que desliza suavemente el indicador activo entre las posiciones de los tabs. Usa Framer Motion layoutId para interpolacion automatica.
Marquee / Scroll Infinito
Scroll horizontal infinito impulsado por CSS para logos de socios y prueba social. Duplica los elementos hijos para crear un bucle continuo. Se pausa en hover.
Movimiento Reducido
Todas las animaciones se desactivan cuando el usuario tiene prefers-reduced-motion: reduce habilitado.
La hoja de estilos global fuerza animation-duration y transition-duration a 0.01ms cuando se prefiere movimiento reducido. Esto se aplica mediante una unica regla media query sobre *, *::before, *::after.
Arquitectura y Estado
Fundamento tecnico: Astro 5 SSR con islands de React 18 para componentes interactivos.
Modelo de Renderizado
Astro 5 SSR -- Todas las paginas se renderizan en servidor, cero JS por defecto
Islands de React 18 -- Los componentes interactivos se hidratan via client:load o client:visible
Headless UI -- Primitivas accesibles para dialogos, menus y tabs
Gestion de Estado
Nanostores -- Estado compartido entre Astro y las islands de React
Estado en URL -- Search params para filtros, paginacion e idioma
React Context -- Estado con alcance limitado dentro de cada island
Internacionalizacion
5 idiomas soportados mediante las utilidades getLangFromUrl() y useTranslations().
Deteccion de idioma por prefijo de ruta en la URL. Las claves de traduccion se colocan junto a los componentes.
Sistema de Iconos
Phosphor Icons -- Iconos de interfaz y sistema, 4 variantes de peso
SVGs Personalizados -- Iconos de plataforma (SoundCloud, Beatport, Bandcamp, RA)
Tamanos -- 16px inline, 20px interfaz, 24px navegacion, 32px hero
Accesibilidad
Cumplimiento WCAG AA en todo el sistema. Cada elemento interactivo cumple con los requisitos minimos de contraste, visibilidad de focus y area tactil.
Ratios de Contraste
White sobre Black
Lime sobre Black
Indigo sobre Black
Todas las combinaciones de texto principal superan el minimo WCAG AA de 4.5:1. El texto grande (18px+) supera el minimo AA de 3:1.
Focus y Tactil
Focus Ring
ring-2 ring-indigo ring-offset-2 ring-offset-black en todos los elementos interactivos via :focus-visible
Areas Tactiles
Minimo 44x44px en todos los botones, enlaces y elementos interactivos segun WCAG 2.1 AAA
HTML Semantico
Jerarquia de encabezados correcta, regiones landmark y etiquetas ARIA en todos los widgets personalizados
Navegacion por Teclado
Orden de tabulacion completo, navegacion con flechas para tabs y menus, Escape para cerrar modales