The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
DS BÜREAU is a digital agency website concept built on minimalist aesthetics, bold black and white contrast and typography that carries the whole design. For this Squarespace challenge I used Finish Layer tools: scroll triggered Animations, hover Transforms, custom fonts and background video effects. The hero section doubles as the site navigation, so exploring it is how you move around.
You can check the live website here:
flute-amphibian-ymj3.squarespace.com
Password: 1234
Social post at X:
https://x.com/hellbent86/status/2080614864075038873?s=20
The hero doubling as the site navigation is such a strong idea it turns exploration into the interaction itself rather than treating navigation as a separate layer. I also like how the black-and-white system lets typography, motion, and structure carry the identity without...
Thank you Faadil! Appreciate your feedback 👍
Kudos 👏
Thanks man! 🙌
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Hey everyone! This is my submission for the @squarespace challenge on @contra 🎨
The goal was to build a website using Squarespace's new Finish Layer tools—and, coincidentally, I was already looking for a no-code platform to build my portfolio when I discovered Squarespace.
Building this website was an amazing experience, and it's officially becoming my new portfolio website!
🔗 Website: https://bronze-helix-bxsr.squarespace.com/
Password: nelo
In the videos below, I show the homepage, the portfolio overview, and one of my branding case study pages, explaining the reasoning behind each animation decision in the website's construction.
And here are the links to my X ( Old Twitter) and LinkedIn posts.
To make the experience more engaging, I used "Block Animations" to gradually reveal content as visitors scroll, helping guide their attention instead of overwhelming them with information all at once.
I also used "Pin Blocks" on the project pages to keep the project description visible while the images scroll beside it, making the storytelling much easier to follow.
One of my favorite effects is the "Zoom" scroll animation, which adds depth and movement to key sections without distracting from the content. Throughout the site, I balanced subtle entrance animations with persistent scroll effects to create a polished browsing experience while keeping the interface clean and intuitive.
The result is a six-page portfolio with four featured projects, designed to showcase my work while creating a smooth, engaging user experience from the first scroll to the final contact section.
Hope you enjoy it as much as I enjoyed building it!
@squarespace @contra
So clean... amazing work
For the Squarespace Challenge, I built DAWN.
DAWN is a conceptual portfolio for photographer Christopher Dawn built around a simple idea: photography should speak for itself.
Website: https://maroon-sepia-dl3n.squarespace.com/
Password: DAWN
Today, many creative portfolios compete for attention through excessive copy, interactions, and visual complexity. DAWN explores the opposite approach: a photography-first experience designed to remove friction between the viewer and the work.
Rather than overwhelming visitors with information, the website focuses on what matters most when choosing a photographer: the images and the creative vision behind them.
As part of the challenge, I joined Squarespace Circle to continue exploring how thoughtful, professional-grade design tools can help bring creative ideas to life.
The project was designed around three principles: restraint, intentionality, and curation.
Photography occupies the majority of the experience, supported by generous whitespace, minimalist typography, and editorial-inspired compositions. Every element was intentionally reduced to allow the work itself to become the primary storytelling medium.
Inspired by contemporary editorial design and luxury fashion websites, DAWN feels closer to visiting a curated gallery than browsing a traditional portfolio.
Using Finish Layer
Finish Layer’s scroll animations became the foundation of the experience. Rather than using animation as decoration, they were used as tools for pacing, storytelling, and curation.
One of the core ideas behind DAWN was that design decisions should always serve a purpose: including the tools used to build it. Finish Layer was never used simply for the sake of using it. Instead of incorporating every available feature, I intentionally chose the ones that best supported the concept and user experience of the project.
Throughout the portfolio, photographs progressively reveal themselves and transition from isolated moments into carefully curated editorial compositions. Images begin small and gradually expand into editorial-inspired layouts as the user scrolls, creating visual rhythm, establishing hierarchy, and encouraging visitors to engage with each image before experiencing the collection as a whole.
At the end of the website, Finish Layer is used to create a playful scroll-driven interaction that acts as Christopher’s introduction. As visitors continue scrolling, a series of hand-drawn elements are progressively revealed: a speech bubble, a camera, a camera flash, and finally a simple “Gotcha!” message. The sequence serves as Christopher’s personal introduction, presented in an unconventional and playful way. What appears to be a simple interaction is, in reality, a carefully choreographed scroll-driven experience designed to reveal personality through restraint.
Animation is deliberately subtle and purposeful. Every transition was designed to support the photography rather than compete with it, demonstrating how Finish Layer can be used to create immersive storytelling through restraint rather than complexity.
Every interaction throughout DAWN was designed to feel effortless. By embracing restraint and using Finish Layer intentionally, the project demonstrates that immersive and memorable digital experiences do not need to rely on complexity. Sometimes, thoughtful pacing, generous whitespace, and meaningful interactions are all that’s needed to let great work speak for itself.
DAWN explores the idea that thoughtful design isn’t always about adding more: it is equally about knowing what to leave out. By combining editorial-inspired layouts, generous whitespace, and purposeful scroll-driven storytelling, the project demonstrates how a photography portfolio can feel immersive, playful, and highly curated while remaining remarkably simple.
Website Link
https://pepper-bird-g92n.squarespace.com
Password
1611
Project Description
This project is a professional medical writing website built on Squarespace, designed specifically for pharmaceutical companies and clinical teams. Drawing on over 20 years of pharmacy experience and 3 years dedicated to medical writing, the site communicates scientific precision and regulatory compliance through clean typography, a calm color palette, and clear service positioning. It includes a homepage, a services page featuring four core offerings — Clinical Study Reports, Regulatory Submission Documents, Patient Education Materials, and Medical & Scientific Content — an about page highlighting relevant certifications in Clinical Pharmacology and Pharmacovigilance, an educational resources section, and a contact page for consultation requests.
How Finish Layer tools were used
I used Squarespace's built-in design tools to customize the layout, typography, and color palette across the site, creating a cohesive, professional look tailored to a pharma and healthcare audience. The design focuses on clarity and trust — key priorities for the target audience of pharmaceutical companies and clinical teams.
Social Media Post
https://www.instagram.com/reel/Da5JHKRuerS/
Video Walkthrough
https://youtube.com/shorts/undnStEf6x0
Client Permission
Not applicable — this is my own personal/professional site, not built for a third-party client.