La interfaz presenta una barra de navegación superior con una altura de 5rem y un ancho que ocupa el 100% del espacio disponible. Esta barra, de fondo blanco en el tema predeterminado, cambia a #18181b en el modo oscuro.
El logotipo, ubicado en la parte superior izquierda, utiliza un color #9147ff tanto en el tema claro como en el oscuro. La barra de navegación incluye enlaces para “Descubrir”, “Explorar” y “Seguir”, cada uno con un indicador visual (una línea de fondo) de diferentes longitudes: 6.9rem para “Descubrir”, 5.9rem para “Explorar” y 7.6rem para “Seguir”. El enlace “Seguir” está oculto por defecto y solo se muestra cuando el usuario ha iniciado sesión.
Un campo de búsqueda, con un ancho máximo de 40rem, está disponible pero inicialmente oculto. En la esquina derecha, se encuentra la información del usuario, que incluye un avatar circular de 3rem de diámetro con un fondo semitransparente (#000 con una opacidad de 0.05 en el tema claro, y #fff con una opacidad de 0.05 en el tema oscuro). Junto al avatar, se muestran botones para “Iniciar Sesión” y “Registrarse”, con un ancho de 5.2rem y 6.1rem respectivamente.
La interfaz también incorpora un indicador de carga (shell-loader) que ocupa el 100% del ancho y alto de la pantalla. Este indicador presenta un spinner circular que gira continuamente, utilizando un borde superior de 2px de color rgba(128,128,128,.3) y un borde izquierdo de 2px sólido #19171c en el tema claro, cambiando el borde izquierdo a #d9d8dd en el tema oscuro.
La disposición de la barra de navegación se adapta a diferentes tamaños de pantalla. El campo de búsqueda se oculta en pantallas con un ancho máximo de 1023px, y la lista de enlaces se oculta en pantallas con un ancho máximo de 767px.
