Devlog

Four passes rebuilt the site, from front door to breadcrumb

A new homepage, a sitewide accessibility pass, named color variables, a mobile-first layout, 25 engraved atlas plates and one shared page header.

  • Design

July brought a full redesign in four passes. On July 8 a new front door arrived: a rotating homepage hero that presents the site's three pillars (the atlas, AI generation and the community), a crossfading faces slider on every country page, and a public preview of the Creator Studio.

On July 12 an accessibility pass touched the whole site: visible focus rings, keyboard navigation for tabbed sections, motion that honors the reduced-motion setting, and stronger text contrast. The same day the palette gained named color variables. On July 16 a mobile-first pass rebuilt the homepage and country pages for phones, and the same day 25 gold-engraving plates arrived, one for each Body Atlas trait category.

On July 24 the index and reference pages moved onto one shared page header and one breadcrumb, and the top menu was reordered geography first: World Atlas, Countries, Traits, Poses, Articles, Community, Creations. From the atlas to the pose catalog to the reference pages, the site now reads as one system.

Under the hood

  • Tabbed sections follow the WAI-ARIA roving tabindex pattern, navigable with the arrows, Home and End. Carousels pause on keyboard focus as well as hover, and a live media-query listener stops auto-advance the moment a reader turns on reduced motion.
  • Touch targets grow to 44 pixels on coarse pointers while mouse layouts keep their density. Muted text sits at about 6:1 contrast on the dark surfaces, and navigation links at 4.53:1 on the brand red.
  • Color lives in two variable layers: semantic app colors (surface, elevated surface, ink) for the site's own chrome, and a primitive layer behind the menu components. Full-screen overlays share one z-index variable.
  • The mobile ethnicity explorer is a snap slider driven by center-coordinate scroll math. Country pages open on faces: the lead portrait loads first, and the composition table stacks a 4:5 portrait above each group name. The 25 atlas plates were generated by an image model as one style set, gold line engraving on charcoal, each compressed to between 42 and 198 KB.
  • One page-hero component and one breadcrumb component serve the index and reference pages, and a single navigation array drives both the desktop and mobile menus.
redesign passes
4
Body Atlas plates
25
touch targets on touch screens
44 px

See it on the site

Sources and open data

Read the full log