Designing Hacktoberfest 2025 for Hyperswitch by Juspay
Visual identity and landing page for Hyperswitch's Hacktoberfest 2025 contributor campaign.
Role: Visual Designer
Scope: Web Design, Identity, Visual Design
CONTEXT
Hyperswitch is an open-source payments orchestrator by Juspay.
Every October, Hacktoberfest brings a wave of new contributors to open-source projects. Hyperswitch needed a landing page that could onboard these contributors: explain what the project is, show them how to participate, and make the whole thing feel worth their time. The ask was a visual identity and a single-page microsite that feels technical enough for devs but not intimidating for someone making their first PR.
THE CENTRAL METAPHOR
Open source is a constellation, not a monolith.
Ground the whole visual system in one idea.
Open source isn't one big thing built by one team. It's many small, separate efforts that connect through shared work, and only start to look like a larger structure when you zoom out. A monolith is designed top-down. A constellation emerges because people keep showing up independently. That image drove the visuals: dots, lines, nodes forming a system. Raw, blueprint-like, structural. The entire page builds on it.
Dots: Contributors, maintainers, devs.
Lines: PRs, reviews, shared projects.
Galaxy: What builds up. Shared infrastructure bigger than one team.
THE IDENTITY
Translate the visual system into type.
HACKTOBERFEST in a pixel grid.
The dot-and-line visual translated directly into the wordmark. Each letter built on a pixel grid, monospaced, like terminal output. But the pixels are rounded, not square. That was a deliberate choice to soften it, make it feel more approachable and less cold. Purely square pixels looked too rigid, too brutalist. The rounded version kept the technical read but added a bit of warmth.
WIREFRAMING & IA
Decide what goes where before anything visual.
Wireframed the page flow before any visual design. The order follows the user's headspace as they scroll: "what is this?" then "what do I get out of it?" then "how do I start?" then proof, rewards, community. Each section answers one question. Rough structure locked first, visuals came after.
01 Hero: What this is. Primary CTA.
02 Choose your path: Four entry points.
03 How to contribute: Four steps, shown.
04 Featured Issues: Real issues, clickable.
05 Swag Pack: What you get.
06 Hall of Fame: Who already did it.
07 Community & Support: Where to get help.
08 Footer: Back to Juspay.
ILLUSTRATIONS
Extend the visual language into content.
Abstract representations, not literal ones.
The dot-line-network visual from the identity carried into the illustrations. All built with the same language: thin strokes for structure, no solid fills. They're abstract versions of what the content is about, not literal depictions. The goal was to make sections more visually interesting, help things make sense at a glance, and keep the page from being a wall of text and buttons.
DARK MODE OR LIGHT?
Why light mode was shipped?
Dark looked cooler. Light made more sense.
Started with dark mode. It fit the constellation metaphor better visually, dots glowing on a dark canvas, the whole network-in-space thing. But Hyperswitch's main site is light, and the Hacktoberfest page needed to feel like part of that product, not a separate microsite. Switching to light also helped readability, especially for the text-heavy middle sections. The dark hero stays as one moment at the top, a nod to the original direction, then the page goes white below.
THE WEBPAGE
How it all comes together
The page opens dark (hero with the starfield and pixel wordmark), then drops into a clean white layout for the rest. Each section uses the same toolkit: two-tone headings, blue-stroke illustrations, the dot grid where "community" needs to be felt. The contributor journey drives the order. Content sections alternate between white (#FFFFFF) and near-white (#FAFAFA) backgrounds to create subtle separation without borders or heavy dividers. CTAs use filled dark buttons for primary actions, outlined for secondary. The swag section is the one visual break, product photos instead of schematics, because the reward needs to feel real. Hall of Fame brings back the dot network from the hero to close the loop. Footer is standard Hyperswitch, no campaign styling. The page is temporary, the brand isn't.
View the live website here :
Other Projects
View more
