Building a dual-view Shopify lookbook from the Born Agency case

The Born Agency case demonstrates how to create a unique Shopify lookbook by merging a viewfinder style with mixed typography and saturated gradients. The design starts with a monochrome base of carbon black, #1C1C1C, enhanced with gradients in electric lime and magenta accents. These colours guide the user experience, with lime highlighting primary actions and magenta used for the fullscreen menu, collection navigation, and active filters.

White #FFFFFF provides strong contrast for the main text, ensuring readability against the dark canvas.

In terms of imagery, the Born Agency approach involves using viewfinders to frame key details, such as the subject of the image or a product feature. Each hotspot is marked with a small uppercase label that describes its significance, such as "TAILOR MADE TO YOUR REQUEST" or "ATTENTION TO DETAIL." This design element encourages users to engage with the content more deeply, similar to how they might interact with a curated gallery.

Typography plays a crucial role in conveying the project's brand statement, which utilizes a combination of geometric sans-serif and italic serif fonts. These typefaces change within sentences to emphasize different points, with small image capsules placed within lines to provide visual interest and context. Additionally, a rotating badge in the corner of the page adds a dynamic element to the typography.

Shopify implementation for the Born Agency design system involves translating these elements into a theme with specific CSS classes and assets. The project sets up core palettes, gradients, and typography in a base CSS file. For example, the carbon black and gradient colors are defined using custom properties in the root of the stylesheet. The theme can then use these classes to style product grids, carousels, and individual product pages, ensuring a cohesive design that mirrors the Born Agency lookbook.