For the Make It Real challenge, I’m submitting a Squarespace landing page for Design Forward, a four‑week live bootcamp for web designers exploring how AI can streamline the tedious parts of their process. This site is built entirely with Squarespace’s native design tools, with NO custom CSS, JavaScript, or extensions.

The landing page invites interested designers to join our waitlist for the September launch, built on a visual identity I’ve been crafting with my talented friend Edinah of Wildlogic.

My goal for the experience is to guide the user’s attention while reinforcing the brand’s message. Design Forward is catered to multilayered creatives who are ready to push boundaries, so I wanted those unexpected layers to reveal themselves as you scroll. The overall feeling is optimism and artful play; brought to life with Squarespace’s new Finish Layers feature.

How I used Squarespace’s Finish Layers

🩶 Font uploads The Design Forward type system pairs vivacious 1960s letterforms with fashion‑forward contemporary typefaces. Using the Font Upload feature, I applied four custom fonts across the site without any added code. The Scale Text feature helps achieve both visual coherence and proper heading hierarchy, supporting both SEO and accessibility. 🩶 Block Transforms and Animations

I combined block animations, transforms, and the pin block feature not only to introduce movement, but also to transition smoothly from one color theme to another — blurring the boundaries. The animations are carefully sequenced based on scroll progress so the story unfolds one scene at a time.

For the horizontal scroll section and scrolling banners, I layered scale and offset animations to move the composition across the screen and add visual interest. 🩶 Stacks Stacks are the backbone of the layered editorial cards and complex yet responsive layouts. I nested stacks within stacks to achieve the editorial composition and animated each stack. Because stacks can include any element, I used video blocks inside these cards for accessibility and flexibility—perfecting one card and then duplicating it for consistent motion and layout.

🩶 Mobile overrides Independent mobile settings let me adjust transform values, timing, and layout specifically for smaller screens, creating a streamlined mobile flow without compromising the desktop experience.

Live site: https://designforward.live

Social Posts

🩶 Post on X

🩶 Post on Instagram

🩶 Post on Youtube Additional walkthroughs

- Full homepage recording

- Process snapshots

Platform: Squarespace

Approach: 100% no‑code. Purely using Squarespace's native tools. No custom CSS, JavaScript, or third‑party extensions

Image and video assets from DTS and AI generation.

10 seconds of a hero we're designing & building. everything is choreographed; the shell scaling in, the phone settling, and a custom webgl depth reveal. we built it custom for one reason; the same effect lives in the brand's motion videos (That we are also working on). goal is: brand should speak the same language everywhere and look good doing it :)

very good work, nice and clean