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

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.

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.

Silhouetted group of people watching a glowing halo around a mountain peak under a starry sky at dusk.

Illustration of a glowing golden spiral galaxy or vortex with a bright center, surrounded by concentric rings of shadowy figures, under a star-filled sky, with text about governance landing on Penumbra.

Graphic with text 'Penumbra Part III Understanding Penumbra's Token Economy' on a warm gradient background with a label saying 'Penumbra's DEX and the UM token'.

Mysterious hooded figure with glowing blue highlights and cryptic symbols in the background, promoting zero-knowledge proofs in Penumbra update.

Digital illustration with glowing locks and data streams converging at a bright center, highlighting faster client-side proving with parallelism in web crypto.

Illustration of connected glowing nodes with text about Shielded Staking on Penumbra, a private proof-of-stake blockchain.

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.

Dark screen with pixelated circular gradient art on the right and shader code snippet in a semi-transparent panel on the left.

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.

Table listing project updates with columns for Name and Status, showing various entries marked as Published or Draft changes.

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:

Screenshot of tweets praising a product for its privacy, clean look, and appeal, with users expressing positive feedback and interest.

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.

The project has had a brilliant design competitions spree:

CSS Design Awards

Best UX Design

CSS Design Awards

Best UI Design

CSS Design Awards

Best Innovation

DesignRush

Finalist & Featured article

CSS Design Awards

Best UX Design

Best UI Design

Best Innovation

DesignRush

Finalist & Featured article

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

Alexander,

Project Manager,

will shape the project scope

Book a call

Let’s talk about your business goals

Sent!

We’ll get back to you soon

Oops! Something went wrong while submitting the form.