A volunteer landing-page build for AIGA Portland’s three-week October festival, on Squarespace 7.1 with a brand system that fights every platform default. A team of four shipped it: a project manager who owned the final calls, a peer designer, the artist who authored the brand system in Figma, and me on the Squarespace build and custom code.
The PM held the final say on the work. Claude and I paired on the CSS and JS that got the artist’s system past the template.
“The brand had opinions. Squarespace had defaults. The work was making them talk to each other.”
From the build log
The brand artist delivered a full system in Figma. IntraNet as the display type. Sofia Sans as body. Hot pink #FF0099 on ink black. Sharp corners. Floral ornaments that bleed out of their frames. Squarespace 7.1 defaults toward rounded buttons, a nav that ships in its own type stack, a teal accent baked into the header component, and image blocks that clip everything at the cell boundary. None of the brand fit any of the defaults.
2025 · Then
The page inherited AIGA’s default look.
Same nav, same type stack, same button treatments as the rest of aigapdx.org. Read as a chapter page, not a festival.
2026 · Now
The artist’s brand runs the page end-to-end.
IntraNet display type, hot pink on ink, sharp corners, floral ornaments. Reads as its own festival with a distinct visual voice.
Four volunteers shipped the page. The project manager set direction and held the final call on every decision that reached the site. A peer designer built the events map. The artist delivered the full brand system in Figma, source of truth for type, color, and ornament. I owned the Squarespace build and the custom code that translated the brand past the template’s defaults.
The artist’s brand guide
A full Figma working styleguide from the brand artist: display type, body face, color, ornaments, poster system. The source of truth for everything visual on the page.
Not much invention needed on structure. Last year’s page had the sections. The ask was to keep the shape and lift the fidelity. Time went into how each section rendered, not what sections to include.
Every default component fought the brand somewhere. Fluid Engine locks blocks to a fixed grid and rounds their corners. The site header ships with its own type stack and a teal accent baked into the component. The events calendar is a YUI3 plugin with no theming primitives. Image blocks default to Fill, which crops ornaments at the cell boundary. Sponsor galleries have no continuous-scroll option, and iOS Safari drops any animation that isn’t hardware-accelerated. I picked custom CSS plus one page-scoped JS injection as the primary construction mode and used Squarespace’s editor only for content structure: blocks, sections, event data. Every visual override lived in a single Custom CSS pane scoped by the page collection ID, so the rest of AIGA’s site kept its default look.
Six sections that carry the page. Each one names what shipped and what the platform tried to do instead.
Three event photos from PDM 2025 in a mosaic on the right side of the purple hero. Each one tilted a few degrees for a snapshot feel.
Platform: Fluid Engine defaults to a strict grid and rounded corners. Per-block Transform in the editor panel handled the tilts one image at a time. A global sharp-corner rule kept the frames clean.
Hot pink cells on black. IntraNet weekday headers. Event days get a transparent ink overlay with the date pinned top-right in white. A short JS routine auto-advances the calendar to October 2026 on page load.
Platform: The calendar plugin runs on YUI3 with no theming primitives exposed. Every custom style meant tracing DOM classes and pinning them with important.
Leaflet-based venue map with every event pinned across Portland. Click a pin to see the venue detail on the right. Built by the other designer on the team, not me. I tuned only the venue-detail typography so it read against the map tiles.
Platform: Squarespace has no native venue-map block. The Leaflet embed brought its own tile layer, popover styling, and click-to-detail behavior, all overriding Squarespace's default z-index stack and font cascade.
Six white sponsor logos scrolling horizontally on an infinite loop. Pause on hover. Edge-fade masks so the strip breathes.
Platform: Fluid Engine has no Gallery block that does continuous scroll. iOS Safari also breaks lazy animations without hardware-accelerated transforms. Both got solved in one Code Block.
The brand rose and lily placed as decorative marginalia across the Volunteer and Donate blocks. Sized down cleanly across breakpoints.
Platform: Squarespace image blocks default to Fill (crop to cell). Switching each to Fit let the flowers stay whole regardless of the cell aspect ratio.
