WEEKS.SURF is more than just a wall poster shop… it’s a digital studio for the Weeks life grid. The goal was to create a web experience that didn’t just sell the poster, but embodied the same philosophy of time, texture, and permanence.
The Artifact
Everything began with the poster itself. A 550x840 coordinate system representing a 90-year life in weeks. I wanted the website design to feel like walking into a gallery where this piece is the centerpiece.
Designing the Studio
I approached the website design as if I were building a physical space. The constraint was simple… if it doesn’t look like it belongs on the poster, it doesn’t belong on the site.
Materials
We translated the physical qualities of the poster—paper grain, deep ink, and structural whitespace—into digital tokens.
--color-paper
Paper
--color-ink
Ink
--color-ghost
Ghost
--color-signal
Signal
--color-mat
Mat
The color palette is restricted to materials: Paper (background), Ink (content), and Signal Blue (interaction).
Typography as Architecture
Just as the poster uses specific typefaces for specific layers of data, the website uses typography to structure the room.
TYPOGRAPHY
WEEKS
A complete field of time.
Courier Prime metadata sample
- Bebas Neue: The signage. Big, loud, architectural.
- EB Garamond: The voice. Editorial, human, storytelling.
- Courier Prime: The data. Coordinates, prices, specs.
The Entrance
When you enter the site, you aren’t greeted by a standard hero section, but a stark, typographic statement.
This header establishes the tone immediately. We stripped away the typical “commerce” navigation in favor of a clean, gallery-like entrance that puts the philosophy front and center. It sets the stage for the rest of the journey.
Tactile Interactions
In a physical studio, tools are utilitarian and precise. On the web, interface elements should follow suit. We designed a button system that prioritizes hierarchy and state visibility over decoration.
BUTTONS
The system defines five distinct button variants… Primary, Secondary, Danger, Quiet, and Ghost — covering every interaction need from checkout to cancellation, all sharing a consistent structural DNA.
LINKS
Links are more than just blue text; they have distinct variants for navigation, actions, and quiet metadata, each with its own hover physics.
The Checkout
Finally, the commerce flow. It had to feel like a seamless part of the experience, not a jarring jump to a generic payment processor.
CHECKOUT LOADING BUTTONS
Current cart variant
Ready for interaction
Previous pay variant
Legacy payment CTA preview
The loading states don’t just spin; they communicate. “Preparing,” “Processing”… keeping the user informed with the same voice used throughout the site. This attention to detail ensures the user remains immersed in the studio environment until the very end.
Explore the studio art at WEEKS.SURF.