Shell Ivory Studio

Shell Ivory Studio is a marketing and creative studio. Its homepage has seven things to say: who it is, what it believes, what it offers, what it has made, how it works, why that matters, and how to get in touch.

Rather than stacking those as seven blocks, the design treats the page as one piece of choreography. Each scene transforms into the next, so scrolling feels like a single continuous move through the studio rather than a list.

The palette is deliberately small. A muted blue and a warm ivory trade places as the ground from scene to scene, and red is mostly kept for the things you can act on: the primary buttons and the newsletter field.

Type is four faces with one job each. A condensed sans sets the display lines large enough to become part of the composition. A condensed text face carries the body copy, a wide sans handles navigation and labels, and a handwritten script is kept for annotations.

Secondary actions are set in square brackets rather than drawn as buttons, which keeps the red rectangles rare and makes them easy to find.

The page opens on blue: a strip of work and the wordmark, with almost nothing else. As you scroll, the cards shrink away, the ground turns to ivory, and the headline arrives line by line around a portrait: stop explaining your value personally, build a brand system that does it consistently.

Who we are sits on ivory with a framed portrait to one side. Keep scrolling and that frame grows until it fills the screen, and the photograph inside it becomes the background of the services scene. The section change is the image itself, not a cut.

The eight services are a list of rows. The open row grows, shows its number, and reveals the two actions for that service, so the list stays scannable and only one service asks for attention at a time.

Selected works is a loose collage of six pieces at different sizes, set against oversized display type. Three of them open into full project pages as you scroll, each with a main image and a side frame.

The process scene changes direction. Its four steps, research and discovery, strategy and planning, design and direction, analysis and refinement, move horizontally, and each finished step collapses into a small card on a rail so you can see how far through you are.

The closing statement, clarity moves faster than confusion, is spread across the screen with small pieces of work drifting between the words, and it carries the page’s main call to action.

The footer speaks to the visitor who is not ready for that: not ready to apply, not ready to leave either. The newsletter field asks one thing at a time, sliding from email to phone to name, so it never looks like a form.

The prototype is a single page of HTML, CSS and JavaScript. Every position and size in it is lifted from the Figma exports in artboard units, 1440 wide, and the whole stage scales as one, so what moves on screen is the actual design and not an approximation of it.