Twins Digital

Overview

Twins Digital is a growth marketing agency based in Düsseldorf, founded in 2018. They partner with brands and agencies on go-to-market strategy, media consulting, creative production, and APAC market expansion.

The site needed to reflect their positioning—clear, efficient, impact-driven. No fluff, no excessive design elements. The visual language is minimal and confident, letting the content do the work.

Client-First methodology

The build follows Finsweet’s Client-First naming convention throughout. This was a deliberate choice to ensure Twins could maintain and extend the site without developer dependency.

Key benefits for the client:

• Predictable class naming — Utility classes like margin-top, text-size-medium, and padding-global make it obvious what each class does
• Component structure — Reusable sections built with _component naming patterns
• Global styles — Typography, colours, and spacing controlled from a central style guide page
• Documentation — Left inline comments in the Designer for common editing tasks

The approach paid off—Twins has been able to add new case studies and update service descriptions without calling me back.

CMS architecture

Three collections power the dynamic content:

Capabilities — Each service (Go-to-Market, Media Consulting, Insights & Analytics, Creative Production, Influencer Partnerships, APAC Markets) is a CMS item with:

• Title and description
• Icon or visual identifier
• Sort order for homepage display

Partners & Clients — The logo slider pulls from this collection, making it simple to add new client logos without touching the build. Fields include:

• Company name
• Logo (SVG preferred)
• Optional link
• Active/inactive toggle

Team — For the about page, with portrait, name, role, and bio fields.

Custom logo slider

The client partner section features an infinitely scrolling logo marquee. Rather than using a third-party library, I built this natively in Webflow using CSS animations:

• Duplicated logo container for seamless looping
• translateX animation with linear timing
• Pause on hover for accessibility
• CMS-powered so new logos appear automatically

The result is smooth, performant, and doesn’t add any JavaScript weight.

Subtle animations

The design called for motion that enhances without distracting. I implemented:

• Scroll-triggered reveals — Sections fade up as they enter viewport, using Webflow’s native interactions with staggered delays
• Hover states — Service cards and CTAs have subtle scale and colour transitions
• Navigation — Smooth underline animations on menu items
• Page transitions — Gentle fade between pages for a polished feel

All animations respect prefers-reduced-motion for users who’ve disabled motion in their system preferences.

Responsive approach

The layout adapts cleanly across breakpoints:

• Desktop — Full-width sections with generous whitespace, multi-column service grid
• Tablet — Adjusted typography scale, single-column where appropriate
• Mobile — Hamburger navigation, stacked content blocks, touch-friendly tap targets

The logo slider switches from a continuous scroll to a static grid on mobile to avoid performance issues on lower-powered devices.

Outcome

The site launched with positive feedback from the Twins team. Key wins:

• Self-sufficiency — Client has updated content multiple times without developer support
• Performance — Sub-2s load times despite image-heavy partner section
• Scalability — CMS structure ready for blog/case studies when they’re ready to add them

The Client-First approach proved its value here—building slightly more methodically upfront saved significant time in handoff and ongoing maintenance.