[

Go Back

]

Pera Design System

Unifying the visual identity of the Pera ecosystem

Cross-platform design foundation unifying Pera’s mobile, web, and embedded products under a consistent visual language.

Results

✧ Design Foundation
Established shared components and interaction standards across mobile and web.
↓ Product Fragmentation
Created visual and behavioral consistency across expanding sub-products.
↑ Accessibility System
Integrated scalable tokens supporting light and dark modes.
↑ Delivery Velocity
Enabled faster development of new web-based tools within a unified framework.

Pera began as a mobile wallet for the Algorand ecosystem. As the product expanded into web and developer-facing tools, the need for a shared design foundation became critical. The Pera Design System was created to unify visual language, interaction patterns, and layout standards across an expanding suite of products. This included web-based wallet experiences, embedded widgets, and developer tools. I contributed by defining reusable components, interaction logic, and responsive layout structures that worked consistently across mobile and web environments.

Pera began as a mobile wallet for the Algorand ecosystem. As the product expanded into web and developer-facing tools, the need for a shared design foundation became critical. The Pera Design System was created to unify visual language, interaction patterns, and layout standards across an expanding suite of products. This included web-based wallet experiences, embedded widgets, and developer tools. I contributed by defining reusable components, interaction logic, and responsive layout structures that worked consistently across mobile and web environments.

Design Rationale

The core challenge was expansion without fragmentation. Moving from a single mobile product to a multi-surface ecosystem can quickly create visual drift and interaction inconsistencies. The system was structured around modular components that could scale from full-page web layouts to embedded modal widgets. Predictable spacing, typography hierarchies, and interaction feedback patterns ensured that users experienced continuity across products. Accessibility and clarity were prioritized. Supporting both light and dark modes was not treated as a visual toggle but as a systemic constraint that informed color tokens, contrast rules, and component behavior from the start. The result was a flexible foundation that supported rapid product development while maintaining coherence and trust.

The core challenge was expansion without fragmentation. Moving from a single mobile product to a multi-surface ecosystem can quickly create visual drift and interaction inconsistencies. The system was structured around modular components that could scale from full-page web layouts to embedded modal widgets. Predictable spacing, typography hierarchies, and interaction feedback patterns ensured that users experienced continuity across products. Accessibility and clarity were prioritized. Supporting both light and dark modes was not treated as a visual toggle but as a systemic constraint that informed color tokens, contrast rules, and component behavior from the start. The result was a flexible foundation that supported rapid product development while maintaining coherence and trust.

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

  • More Works

Glitch

Unifying on-chain and social signals into a single, execution-focused interface.

Glitch

Unifying on-chain and social signals into a single, execution-focused interface.

Glitch

Unifying on-chain and social signals into a single, execution-focused interface.

Pera Onramp

Aggregating multiple providers into one streamlined, low-friction purchase experience.

Pera Onramp

Aggregating multiple providers into one streamlined, low-friction purchase experience.

Pera Onramp

Aggregating multiple providers into one streamlined, low-friction purchase experience.

DappRadar

Turning complex on-chain data into structured, actionable insights for 1M+ monthly users.

DappRadar

Turning complex on-chain data into structured, actionable insights for 1M+ monthly users.

DappRadar

Turning complex on-chain data into structured, actionable insights for 1M+ monthly users.

Pera Connect

Connection layer between Algorand dApps and users with seamless on-chain interactions.

Pera Connect

Connection layer between Algorand dApps and users with seamless on-chain interactions.

Pera Connect

Connection layer between Algorand dApps and users with seamless on-chain interactions.

Algorand Metrics Dashboard

Official chain analytics dashboard presenting Algorand’s performance through clear, structured, and time-based data exploration.

Algorand Metrics Dashboard

Official chain analytics dashboard presenting Algorand’s performance through clear, structured, and time-based data exploration.

Algorand Metrics Dashboard

Official chain analytics dashboard presenting Algorand’s performance through clear, structured, and time-based data exploration.

Algorand Developer Portal

Official developer hub of Algorand, bringing together documentation, tutorials, learning paths, and ecosystem resources.

Algorand Developer Portal

Official developer hub of Algorand, bringing together documentation, tutorials, learning paths, and ecosystem resources.

Algorand Developer Portal

Official developer hub of Algorand, bringing together documentation, tutorials, learning paths, and ecosystem resources.

DevPortal Challenges

Interactive learning layer within Algorand ecosystem, turning documentation into on-chain coding challenges w/ NFT rewards.

DevPortal Challenges

Interactive learning layer within Algorand ecosystem, turning documentation into on-chain coding challenges w/ NFT rewards.

DevPortal Challenges

Interactive learning layer within Algorand ecosystem, turning documentation into on-chain coding challenges w/ NFT rewards.

Pera Design System

Cross-platform design foundation unifying Pera’s mobile, web, and embedded products under a consistent visual language.

Pera Design System

Cross-platform design foundation unifying Pera’s mobile, web, and embedded products under a consistent visual language.

Pera Design System

Cross-platform design foundation unifying Pera’s mobile, web, and embedded products under a consistent visual language.

WANT TO SAY HI?

LET'S CHAT

Get in Touch

WANT TO SAY HI?

LET'S CHAT

Get in Touch

WANT TO SAY HI?

LET'S CHAT

Get in Touch