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, colour 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 una línea de 0.4rem de altura y un colour de fondo rgba(0,0,0,.2) en el tema claro, que cambia 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, 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 junto a las opciones de autenticación del usuario (shell-nav__user-auth), que se ocultan cuando el usuario ha iniciado sesión.
Los botones de “Iniciar Sesión” y “Registrarse” (shell-nav__user-auth-button--login y shell-nav__user-auth-button--singup respectivamente) tienen un ancho específico (5.2rem y 6.1rem) y un efecto visual de subrayado similar al de los enlaces de navegación.
Se incluye un cargador (shell-loader) que inicialmente está oculto (opacidad 0) y utiliza una animación para mostrarse gradualmente. El cargador contiene un spinner (shell-loader__spinner) que gira continuamente.
La apariencia de la barra de navegación y el cargador se adaptan a diferentes tamaños de pantalla, ocultando la lista de enlaces en pantallas con un ancho máximo de 767px y la barra de búsqueda en pantallas con un ancho máximo de 1023px.
