IntroductionOur team has been hard at work enhancing the user experience on the Artesanos-ar platform. This recent update focuses on delivering a more personalized and intuitive interface, particularly through the introduction of a dynamic dark/light mode and critical UI refinements to improve accessibility and interaction logic.

The ChallengePreviously, the Artesanos-ar platform presented

Building and maintaining a user interface can quickly become a challenge without a structured approach. In the Artesanos-ar project, we faced a common scenario: a UI that had grown organically, leading to inconsistencies and accessibility gaps. This post details our journey to establish a more robust and accessible UI foundation through the implementation of design tokens and adherence to WCAG

In the Artesanos-ar project, we're dedicated to delivering a seamless user experience across all devices. A recent update focused on refining the display of 'detalle de pieza' (piece detail) pages, specifically addressing how content rendered on mobile devices.

The Challenge

Previously, the piece detail view utilized a two-column grid layout, defined by 1fr 1fr CSS grid properties.

Even the most visually appealing applications can fall short if they're not accessible, consistent, and responsive across all devices. In the Artesanos-ar project, our focus shifted to a comprehensive overhaul of core UI components and interactions, aiming to deliver a superior experience for every user, regardless of their device or assistive technologies.

The Situation

In the Artesanos-ar project, our goal is to create a seamless and visually consistent experience for our users. We recently addressed a critical front-end challenge related to font rendering that was causing UI inconsistencies.

The Problem

Our application's CSS was correctly declaring 'Inter' as the preferred typeface. However, the 'Inter' font was never actually being loaded into the