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 la vista 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. Enlaces específicos como “Descubrir” (discovery), “Explorar” (browse) y “Seguir” (follow) 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 menú elíptico (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, una altura de 3rem 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 x 3rem y un fondo rgba(0,0,0,.05). El avatar se muestra a la derecha del bloque de autenticación del usuario (shell-nav__user-auth), que se oculta una vez que el usuario ha iniciado sesión.
Para usuarios no autenticados, se ofrecen botones de “Iniciar Sesión” (login) con un ancho de 5.2rem y “Registrarse” (singup) con un ancho de 6.1rem. Estos botones tienen un efecto visual de subrayado similar al de los enlaces de navegación.
Finalmente, se incluye un cargador (shell-loader) que inicialmente está oculto (opacity:0) y utiliza una animación para mostrarse gradualmente. El cargador contiene un spinner (shell-loader__spinner) que gira continuamente.
La disposición de los enlaces de navegación se simplifica en pantallas más pequeñas (ancho máximo de 767px), ocultando la lista de enlaces (shell-nav__link-list).
