La interfaz presenta una barra de navegación superior (shell-nav) con un fondo blanco que cambia a #18181b en el tema oscuro. Esta barra se oculta en dispositivos de inicio de sesión de escritorio (desktop-login).
El logotipo, identificado como shell-nav__logo, utiliza un relleno superior e inicial de 1.3rem y muestra un SVG con relleno #9147ff, color que se mantiene en el tema oscuro.
La barra de navegación incluye enlaces (shell-nav__link) con un espaciado interno de 2rem y un efecto visual de subrayado con un fondo rgba(0,0,0,.2) en el tema claro, que se invierte a rgba(255,255,255,.2) en el tema oscuro. Los enlaces “Descubrir”, “Navegar” y “Seguir” tienen subrayados de diferentes anchos (6.9rem, 5.9rem y 7.6rem respectivamente). El enlace “Seguir” está oculto por defecto y se muestra solo cuando el usuario ha iniciado sesión (logged-in).
Un elemento de elipsis (shell-nav__ellipsis) está presente pero oculto por defecto. Contiene un SVG con relleno rgba(255,255,255,0.4) y una altura de 2rem.
La barra de navegación también incluye un contenedor de búsqueda (shell-nav__search-container) que, aunque presente, está oculto por defecto y solo se muestra en pantallas con un ancho máximo de 1023px. Cuando visible, tiene un ancho máximo de 40rem y un fondo rgba(255,255,255,.4).
En el extremo derecho, se encuentra la tarjeta de usuario (shell-nav__user-card) que contiene el avatar del usuario (shell-nav__user-card-avatar) con un tamaño de 3rem y un fondo rgba(0,0,0,.05) que cambia a rgba(255,255,255,.05) en el tema oscuro. Si el usuario no ha iniciado sesión, se muestran botones de “Iniciar Sesión” y “Registrarse” (shell-nav__user-auth-button--login y shell-nav__user-auth-button--singup respectivamente), cada uno con un ancho específico (5.2rem y 6.1rem). Ambos botones tienen un efecto visual de subrayado con un fondo rgba(255,255,255,.2).
Finalmente, se incluye un cargador (shell-loader) que inicialmente está oculto y utiliza una animación para mostrarse gradualmente. Este cargador contiene un spinner (shell-loader__spinner) que gira continuamente.
La disposición de los enlaces de la barra de navegación se simplifica en pantallas con un ancho máximo de 767px, ocultando la lista de enlaces (shell-nav__link-list).
