pro
Rache De Luna
Founder of Squarestylist
New to Contra
Rache is building their profile!
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. (https://instagram.com/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 (https://x.com/squarestylist/status/2080335339399578095?s=46&t=mxnbd9127X_7iUXnmsfJxA)
🩶 Post on Instagram (https://www.instagram.com/reel/DbJXh3ASsDZ/?igsh=bTc2a2kxMHk1ODZp)
🩶 Post on Youtube
(https://youtu.be/dL4fj6owyOQ)Additional walkthroughs
- Full homepage recording (https://x.com/squarestylist/status/2080379648366792742?s=46&t=mxnbd9127X_7iUXnmsfJxA)
- Process snapshots (https://x.com/squarestylist/status/2080379989812498584?s=46&t=mxnbd9127X_7iUXnmsfJxA)
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 (https://www.deathtothestockphoto.com/) and AI generation.
4
11
307