Tenebrae
Crypto Web Wallet

UI/UX Design

Duration

3 Weeks

Project Type

Client Project

Team

2

Duration

3 Weeks

Project Type

Client Project

Team

2

Duration

3 Weeks

Project Type

Client Project

Team

2

Tenebrae is a crypto protocol that enables privacy and compliance in blockchain transactions through a zero-knowledge proof system. It allows users to experience true financial privacy without compromising on decentralization or regulatory readiness.

Tenebrae is a crypto protocol that enables privacy and compliance in blockchain transactions through a zero-knowledge proof system. It allows users to experience true financial privacy without compromising on decentralization or regulatory readiness.

Tenebrae is a crypto protocol that enables privacy and compliance in blockchain transactions through a zero-knowledge proof system. It allows users to experience true financial privacy without compromising on decentralization or regulatory readiness.

Overview

Overview

Overview

As the brand and product designer, I created Tenebrae’s visual and interface foundation from the logo and color system to the end-to-end user experience.

As the brand and product designer, I created Tenebrae’s visual and interface foundation from the logo and color system to the end-to-end user experience.

As the brand and product designer, I created Tenebrae’s visual and interface foundation from the logo and color system to the end-to-end user experience.

Goal

Goal

Goal

The goal was to design an interface that lets users send, receive, and swap assets effortlessly, while zk-proof processes and Plasma-based infrastructure handle complexity in the background. By abstracting gas fees and enabling faster transactions, Tenebrae removes key UX bottlenecks making privacy-preserving crypto interactions feel simple and fluid.

The goal was to design an interface that lets users send, receive, and swap assets effortlessly, while zk-proof processes and Plasma-based infrastructure handle complexity in the background. By abstracting gas fees and enabling faster transactions, Tenebrae removes key UX bottlenecks making privacy-preserving crypto interactions feel simple and fluid.

The goal was to design an interface that lets users send, receive, and swap assets effortlessly, while zk-proof processes and Plasma-based infrastructure handle complexity in the background. By abstracting gas fees and enabling faster transactions, Tenebrae removes key UX bottlenecks making privacy-preserving crypto interactions feel simple and fluid.

Target Audience

Target Audience

Target Audience

Tenebrae is built for pro crypto users and institutions who prioritize transactional privacy and proof-backed stability, as well as developers integrating its SDKs and APIs into wallets, dApps, and payment layers. The interface and brand system were crafted to convey confidence and stability while reflecting a modern, forward-looking crypto aesthetic.”

Tenebrae is built for pro crypto users and institutions who prioritize transactional privacy and proof-backed stability, as well as developers integrating its SDKs and APIs into wallets, dApps, and payment layers. The interface and brand system were crafted to convey confidence and stability while reflecting a modern, forward-looking crypto aesthetic.”

Tenebrae is built for pro crypto users and institutions who prioritize transactional privacy and proof-backed stability, as well as developers integrating its SDKs and APIs into wallets, dApps, and payment layers. The interface and brand system were crafted to convey confidence and stability while reflecting a modern, forward-looking crypto aesthetic.”

Brand Identity

Brand Identity

Brand Identity

The visual identity symbolizes light emerging from obscurity, mirroring how zero-knowledge systems reveal truth without exposure. Circular motifs in the logo and interface echo this idea of clarity within concealment.

The visual identity symbolizes light emerging from obscurity, mirroring how zero-knowledge systems reveal truth without exposure. Circular motifs in the logo and interface echo this idea of clarity within concealment.

Typography

Typography

Typography

The system pairs a custom pixel-based typeface for the logo with a modern geometric sans-serif for the product UI.



The system pairs a custom pixel-based typeface for the logo with a modern geometric sans-serif for the product UI.



The system pairs a custom pixel-based typeface for the logo with a modern geometric sans-serif for the product UI.



Logo

Logo

Logo

The pixel-grid wordmark builds on the circle motif. Each dot representing verified data, forming a network of trust. The white-to-amber gradient reflects information emerging from obscurity into clarity.

The pixel-grid wordmark builds on the circle motif. Each dot representing verified data, forming a network of trust. The white-to-amber gradient reflects information emerging from obscurity into clarity.

The pixel-grid wordmark builds on the circle motif. Each dot representing verified data, forming a network of trust. The white-to-amber gradient reflects information emerging from obscurity into clarity.

Colour Palette

Colour Palette

Colour Palette

The Tenebrae palette transitions from off-white (#FFFCF3) to deep gold and near-black (#191301).

 The gold (#F7BA09) serves as a trust accent.

The Tenebrae palette transitions from off-white (#FFFCF3) to deep gold and near-black (#191301).

 The gold (#F7BA09) serves as a trust accent.

The Tenebrae palette transitions from off-white (#FFFCF3) to deep gold and near-black (#191301).

 The gold (#F7BA09) serves as a trust accent.

Design Intent

Tenebrae’s interface embodies clarity through depth. Using subtle motion, light transitions, and calm contrasts to communicate proof states like pending or verified. The design maintains a sense of flow and assurance, revealing complexity only when needed

Homepage

The Home screen offers a clear portfolio overview, showing total and per-asset balances with fiat equivalents to keep users informed at a glance. Persistent navigation ensures seamless access to core actions like Deposit, Withdraw, and Swap.

Deposit

With a centered card layout, the deposit screen keeps attention on the action, minimizing distractions and guiding users through amount entry, token selection, and confirmation in one clear flow.

Withdraw

The Withdraw screen mirrors the same focused layout, designed for clarity and confidence during transfers. s. By centralizing all key inputs such as amount, token, recipient address, and network fee, the interface keeps the process transparent and intuitive.

Swap

The Swap screen emphasizes key details like conversion rate while keeping secondary information such as recipient address and network fee visible but subtly placed. This balance maintains transparency without clutter, allowing users to complete swaps confidently and with minimal effort.