Preview image. Unlock full-res
Dark split section with a cyan-highlighted process headline, a vertical service list, and six expandable step cards with one active state.
Summary
Dark split section with a cyan-highlighted process headline, a vertical service list, and six expandable step cards with one active state.
Visual description
Black background splits into two zones. Top left shows a white paragraph where design and development process is reversed out on a cyan pill highlight. Top right lists four services separated by hairline dividers: Product Design in white as the active item, ReBranding, Low/No code Development, and Motion Design in muted gray. Below, six vertical cards span the width; card 01 Analysis is expanded with large white title, body copy, and a filled cyan radio dot, while cards 02 through 06 stay narrow with gray titles Teasers and samplings, Validation, UI Design (System), Implementation, and Motion plus empty circle indicators.
Key takeaway
Pairing a service category list with a synchronized multi-step process makes scope and method readable in one glance. Expanding only the active step card while siblings collapse to labels is a clean pattern for six-phase workflows.
Reuse notes
Ideal for agencies or product studios explaining how they work across service lines. Requires interaction or a default expanded state; on static pages show one step open as here. Cyan-on-black accent must stay consistent with the rest of the site.
