Rocket Marketing

A more editorial approach to a B2B growth website.

Rocket Marketing is a done-for-you growth partner for B2B founders, covering LinkedIn outreach, personal branding and website positioning.

The goal was to create a marketing site that felt more like a high-end editorial publication than a typical growth agency or SaaS website.

It needed to feel confident and professional, but still human.

More importantly, it needed to speak to founders who care about how they present themselves and their businesses.

01. Discovery & Direction

we started by looking at how established editorial brands approach digital design, including HubSpot’s clean and structured visual language.

We then compared that against the typical growth agency website.

The difference was obvious.

A lot of sites in the category rely on the same patterns: a stock image, a large headline, three feature cards, a few testimonials and a call to action.

We wanted Rocket Marketing to avoid that formula.

The direction became more deliberate.

Large images.

Generous whitespace.

Strong typography.

Fewer components, but more intentional ones.

The site needed to feel designed rather than assembled.

The colour palette was kept equally focused.

A primary blue, #086CD9, provides the main visual identity, while a warm amber, #FFC24D, is used sparingly for highlights and calls to action.

The amber is intentionally limited so it remains an accent rather than becoming another dominant colour.

02. Typography

Typography is one of the main visual features of the site.

Rather than relying on a single typeface, we built the system around three families with different roles.

League Spartan handles the larger display headlines.

Montserrat is used for body copy and supporting information.

THICCCBOI adds a more distinctive editorial character to selected elements.

The type scale, weights and line heights were mapped into the Tailwind system so the typography remains consistent throughout the site.

We also made a small copy decision that affected the entire experience.

Em dashes were removed from the site’s copy and replaced with periods, commas and colons.

It sounds minor, but punctuation affects how a page reads. The longer dash introduced a rhythm that felt too loose for the direct, confident tone we wanted.

03. Designing Sections Around Their Purpose

The sections weren’t built from a standard template.

Each one was designed around what it needed to communicate.

The hero uses a full-bleed background image with a dark overlay, creating enough contrast for the headline while keeping the visual energy of the image.

A rotating word element keeps the proposition moving without turning the hero into an animation showcase.

The “What we do” section takes a different approach.

Instead of three standard service cards, the services are presented as a layered interactive stack. Clicking the stack spreads the cards apart and reveals the individual services.

The interaction reflects the idea behind the offer: the services work together rather than existing as completely separate products.

04. Case Studies

The case study section was designed to make the work feel tangible without turning the page into a conventional project grid.

On desktop, the cards sit alongside one another and expand as the visitor interacts with them.

On mobile, the same content becomes a vertical accordion.

This keeps the interaction useful at both sizes without trying to force the desktop interaction onto a touchscreen.

The transition between states uses controlled animation rather than spring physics, keeping the surrounding layout stable as the selected case study expands.

05. Rethinking the “Reasons to Work With Me” Section

The typical approach would have been six small cards with icons.

That didn’t fit the rest of the site.

Instead, the section uses an editorial numbered list with a sticky heading.

Large numbers provide the visual hierarchy, while the corresponding descriptions remain readable alongside them.

Hover states bring attention to individual reasons on desktop.

On mobile, the information remains visible because there is no hover state to rely on.

This was a recurring principle throughout the project:

If the interaction doesn’t work on a phone, it isn’t finished.

06. Motion

Motion was deliberately kept calm.

Early experiments with spring-based animations created too much movement. Elements would stretch, overshoot and occasionally affect the surrounding layout.

That wasn’t appropriate for the visual direction.

The expanding case studies were therefore rebuilt using tween-based easeInOut transitions and fixed container heights.

Content can still move and expand, but the overall page remains stable.

Other interactions use subtle transitions rather than dramatic effects.

The site also respects prefers-reduced-motion, so visitors who request reduced animation get a much calmer version of the experience.

07. Responsive Design

Mobile was treated as its own design problem rather than simply a smaller desktop layout.

The case studies become a vertical accordion.

The platform showcase restacks into a more appropriate mobile composition.

The numbered reasons remain fully readable rather than hiding descriptions behind desktop-only hover interactions.

Spacing, typography and image proportions were also adjusted to maintain the editorial feel on smaller screens.

The goal was to preserve the character of the design without sacrificing usability.

08. Content as Data

The site was built to allow the marketing team to manage recurring content without editing the code.

Case studies, testimonials and lead magnet signups are handled as structured entities rather than being hardcoded into individual sections.

This makes it easier to add new work and update existing content while keeping the visual system consistent.

The lead magnet flow is also handled within the interface.

Visitors submit their first name and email, then move into a clear success state with a Framer Motion transition.

The result is a marketing site that can continue to evolve without needing to be rebuilt every time the content changes.

The Outcome

The final Rocket Marketing website feels deliberately different from the typical growth agency site.

The visual system is restrained.

The typography carries much of the personality.

The sections are built around their actual purpose rather than a predetermined template.

The interactions add depth without taking over the experience.

And the underlying content system makes it possible for the site to grow alongside the business.

The result is a marketing website that feels considered from the first section to the last.

Editorial in its presentation.

Precise in its typography.

Controlled in its motion.

And built around the idea that a founder’s positioning deserves the same level of attention as the business behind it.

Designed and engineered by Evuve.