Penumbra.zone Website Refresh | UX/UI Design & Development by JetStyle

Client

Penumbra is a cross-chain network that enables secure transactions. We’ve been collaborating with the team for a year as Penumbra’s design partners.

Our first project together was the design & development of a marketing landing page. The campaign was dedicated to the launch of their first airdrop.

Challenge

Update the look and functionality

Penumbra’s team wanted to update the look and functionality of their marketing website. The site had to become the primary hub for everything related to the Penumbra ecosystem.

Easy navigation

Visitors should be able to easily navigate through the content and learn more about Penumbra’s protocol and the privacy the network provides. Ideally, the website would ignite users’ curiosity and motivate them to explore Penumbra’s services.

Universal learning hub

It also had to serve as a universal learning hub for all Penumbra audience groups — from active to potential users, from those seeking support to developers who want to use Penumbra’s technology.

Refresh the blog section

Another sub-task was to refresh the blog section and make it more convenient for the company’s content team to use.

Solution

In tight collaboration with the Penumbra team, we found a way to meet all technical requirements while putting visual excellence first.

Our job was to refine and shape the client's ideas — and also rethink the blog structure to create a better content management flow.

C

r

e

a

t

i

v

e

Hover-activated blur

Privacy is Penumbra’s core value. The team was looking for a visual metaphor that would reflect this, and glitch was the answer.

The concept of privacy is conveyed through a combination of sharp focus and blur. Important elements remain clear, while the unimportant fade away, symbolizing the protection of sensitive information.

Celestial theme across the website

Penumbra’s brand style revolves around space. It’s dark and mysterious, and the website needed to reflect that atmosphere.

The web design references telescope imagery: sharp in the center and blurred around the edges. The visual effect also rhymes with the natural phenomenon of a penumbra.

A scalable visual language

Together with the client’s team we created the main visual language for the homepage. Penumbra’s content team successfully scaled it to the rest of the website.

Technical

We had full creative and technical freedom, which allowed us to select cutting-edge technologies without sacrificing performance.

WebGL shader was used for the hero screen animation.

Rive animations created lightweight, dynamic, and non-linear interactive animations.

Lottie animations were used where looped interactions were more suitable (as in previous Penumbra projects).

We are big fans of Lottie, but Rive helped us go beyond its limitations for this case.

Webflow is our go-to tool for blog management and flexible content editing.
It allowed us to implement the creative ideas while making the CMS accessible for the content team.

Custom glitch development

We usually adopt ready-made solutions from CodePen, but nothing matched our creative vision — so I built the glitch effect from scratch using ChatGPT.

Kostya Ostro

Digital art director

Neural networks help JetStyle’s designers save time and execute nearly any creative concept.

Our collaboration with AI

Impact

The real users’ feedback says it all:

We worked in weekly sprints with the client’s team including Park (Penumbra's CEO) and Sam (Lead Designer). Their openness and clarity made the collaboration smooth and productive.

Team

Penumbra

Park Feierbach

CEO

Sam Hardman

Lead Designer

JetStyle

Konstantin Ostroukhov

Art Direction & Design

Max Karmatskih

CTO

Katya Voronina

Project Manager

Yulia Bozhko

Backend Developer

You’ve got ideas, we know how to turn them into a coherent, well-executed product.

You’ll have your vision structured, and a solution that works. At every step of the journey you get regular updates on the progress. If you have a website task in mind, let’s talk.

Let's talk