Superlocal

A conference site has a concrete job: make clear who is speaking, when, where, and what it costs. This one does not dodge those four things, it builds them at the scale of a poster.

A flower opens the site, five cream petals around an orange starburst and a dark brown centre, laid across a field of cobalt. Nothing else but the superlocal wordmark at top left and a line of small type at bottom left reading the international design conference of Uruguay, with a white-framed button at bottom right offering to book activities.

Below that come four enormous letter S's in dark brown, each on a different ground: orange, blue, grey, cream. The same letter four times over, distinguished by what is behind it rather than by anything about the letterform.

The schedule is the densest part of the site and the part that genuinely gets used. On dark brown, dates run down the left from 13-10 through 19-10, with four columns beside them for activity, time, speaker and venue. A brand strategy session at 16:00 by Proyectario at Magma Futura, a colour laboratory at 10:00 by Floralla at La Hoguera. Seven days and dozens of sessions, roughly a screen per day.

What is worth learning from that table is what it leaves out. There is no filter, no tab strip, no calendar view, just a long table read top to bottom. For a conference running seven days with under a hundred entries, any interaction would be surplus, because what a reader wants is to see it all at once rather than first learning how to narrow it.

The sponsor section works the same way. Twenty-odd logos sit in an even grid, every one converted to a single dark brown on cream. Flattened to one colour, the section reads as one thing rather than twenty brands each doing their own.

The visual system rests on two colours and one typeface.

The face is RST Reactor, a Uruguayan typeface by Fernando Díaz of ResetType, with the visual identity by Gabriela Nisizaki of Redondo, both stated in the team's write-up. Regular carries 5,724 characters ranging from 10px up to 172px. Medium carries only 149 characters and every one of them sits at exactly 64px, so it does one job. Inter writes 62 characters, all at 16px, filling gaps.

The colour hierarchy is clear. Dark brown #3D2800 against cream #FFF7E3 is the main contrast, cobalt #1673FF holds the opening screen and a few emphasis blocks, and black covers 1,045 text elements.

A second group of colours is more interesting. The background list also contains orange #FFAE45, magenta #E045FF, pale cyan #99EEFF, rose #D92BD9, blue #2266FF, lime #D3FF21, pink #FF219B and bright orange #FF7B02, each used on only one or two elements. Beyond the core palette sits a set of one-off saturated colours, each earmarked for a specific block.

That approach suits event work particularly well. The core palette makes the whole thing read as one project while the one-off colours give each section its own face, and the two never fight because a one-off colour only ever covers a small area.

Of 1,667 elements, 14 carry a border radius. The press names in the footer are dark brown pill shapes, and that is where most of those rounded corners live.

There is no canvas anywhere on the page. Every one of those huge letters, colour blocks and starbursts is SVG and DOM, and 19 of the 110 images are data URIs written straight into the HTML.

Motion on this site is sparse enough to count off item by item, and that is precisely why it is worth writing up.

The stylesheet contains zero CSS animations. Across the whole page, not one element is in an animated state. All the movement comes from Framer's motion layer driving transforms, with scrolling handed to Lenis at a measured lerp of 0.1.

The result is 15,553 pixels and 16.5 screens at 60 fps throughout, a p95 frame cost of 18ms, 0% janky frames and all twelve measured segments reading 60. A page with no canvas, no CSS animation and nothing but transforms gives the browser almost nothing to relayout.

Two offset lines of scrolling text at the top, superlocal and sprlcl, are the only things moving continuously. They run the same direction at different speeds, and that difference in speed is the whole depth effect.

If one thing transfers from here it is this. The cost of motion lies in its type, not its quantity. A site that keeps every movement inside transform and opacity will not drop frames across sixteen screens, while a site that animates a width or a margin can start stuttering inside three.

Reduced motion is empty, with no prefers-reduced-motion rule in the stylesheet. Because the CSS animation count was zero to begin with, though, turning the preference on changes little of what a visitor sees, since the only things genuinely moving are those two scrolling lines and Lenis's easing.

The site's own domain serves nothing but that 60 KB HTML document, and the remaining 6.76 MB all comes from framerusercontent.com. That is the standard shape of a Framer site, where images get srcset and scaling parameters generated automatically, and 91 external images here all carry srcset with 25 marked lazy.

Loaded cold, the page pulls 6.83 MB across 105 files. Video accounts for 4.64 MB, images 1.65 MB, script 340 KB, fonts 138 KB, the document 60 KB.

Half of that 4.64 MB of video is thrown away. Two video elements on the page point at the same file, 21McwOzw74HKdNY8giMyq3mRj8U.mp4, both carrying autoplay and preload="auto", so the 2.3 MB file downloads in full twice. The network log shows two separate requests at 2,321 KB and 2,289 KB.

This one is broadly useful and easy to walk into. A browser does not share a video buffer between two elements pointing at the same URL the way it shares an image. Two video elements are two streams. When the same footage has to appear in two places, the fix is to keep one element and position it with CSS, or at minimum give the second preload="none" so it only fetches once it enters the viewport.

The clip itself is worth a look too. The source is 1920 by 1080 and 4 seconds long, while one instance renders at 649 by 652 and the other at 1921 by 1081. The smaller one squeezes 1080p footage into a box a third the size, and every extra pixel downloaded is scaled away.

The speed numbers are good: 268ms to first byte, 536ms to first contentful paint, 720ms to largest contentful paint on the H1, 877ms to load, cumulative layout shift 0, zero long tasks, and 62 requests on first load.

Those figures sit in the top tier of this library, and they come out of a visual tool's default output. Static HTML, images sliced to resolution automatically, scripts delivered as ES modules, no third-party analytics. These are things Framer handles rather than things an engineer implemented one by one.

Accessibility is the other story entirely, and what is missing is precisely what the tool never nags you about.

The html element carries no lang attribute at all. This is an entirely Spanish page, so a screen reader gets no language and reads Spanish with whatever default voice the browser has, which comes out close to unusable. It is a single field in Framer's site settings.

The document contains no landmark elements, not header, nav, main or footer, and only 2 section elements. Region-to-region jumping is dead on this page, leaving 16.5 screens to be read linearly.

The stylesheet has zero focus rules, so a keyboard user moving between the 13 focusable elements cannot see where they are.

Then the footer column headed PRENSA: Magazine Uy, La Diaria, Cuchara x Revista Materia, Rompe Paga, El Living and SPRLCL, six names all drawn as pill-shaped links, and all six with an empty href. An anchor without an href is neither a link nor focusable, so the keyboard skips straight past and a mouse click does nothing.

What is done right deserves recording too. All 110 images carry an alt attribute, 94 of them an empty string, and checking those 94 shows every one is a purely decorative shape, one of the giant S's or a colour block or a starburst, which is exactly what an empty alt is for. The heading structure is complete as well, H1 followed by H2 with the dates as H3, with no level skipped.

Eighty-one points, taken on day 13, and both numbers are the lowest tier of anything in this library's FWA column. Among a field of full-screen WebGL winners, that makes sense. There is nothing technically new here, and what it wins on is a complete and solid piece of graphic design carried faithfully onto the web.

The team's statement is unusually frank. It says the visual identity comes from Gabriela Nisizaki of Redondo and the typography from Fernando Díaz of ResetType, and that their own part was turning that identity into its final digital form. Naming somebody else's contribution first and their own second is rare in an award write-up.

One credit only. The identity designer and the type designer are named in the statement but not in the credits column, which is a consequence of how The FWA credits work, since the submitting party can only be whoever executed the site.

Awwwards has nothing listed for this site.