Skip to content
DesignMunkDesignMunk Submit a site

Pera Wallet

perawallet.app
Simply the best Algorand wallet
Fintech Technology Bootstrap Homepage Dmsans Favorit
Share Visit site
perawallet.app DESKTOP · 1440
Pera Wallet

AI Breakdown

Design export

---
version: alpha
name: Pera Wallet
description: Simply the best Algorand wallet
colors:
  primary: "#1c1c1c"
  secondary: "#000000"
  tertiary: "#6b46fe"
  neutral: "#f5f5f5"
  brand-heather-field: "#909094"
  brand-limo-scene: "#4c4c50"
  brand-paris-daisy: "#faea53"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: DMSans
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.07em
  headline-md:
    fontFamily: AkkuratMonoRegular
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: DMSans
    fontSize: 35px
    fontWeight: 500
    lineHeight: 1.37
    letterSpacing: -0.033em
  headline-xs:
    fontFamily: AkkuratMonoRegular
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.21
  body-md:
    fontFamily: FavoritProBook
    fontSize: 17px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: -0.01em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 66px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.lg}"
    padding: 14px 24px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 14px 24px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Pera Wallet: Monochrome UI with a Values Marquee

## Overview

Pera Wallet's UI is intentionally monochrome with restrained purple and yellow accents, projecting security, speed and technical polish. It serves a crypto-savvy audience who expect clear hierarchy, readable data and trustworthy CTAs. Layouts are spacious, with large display type and generous white space, punctuated by a high-contrast ticker band for energy. When a token doesn't dictate a choice, prefer clarity, minimal color, and ample breathing room.

## Colors

- **primary (#1c1c1c):** Core ink for headlines, body text, icons and primary button backgrounds.
- **secondary (#000000):** Deepest black for high-contrast bands, footers, and device frames when extra punch is needed.
- **tertiary (#6b46fe):** Accent purple for links, focused states, and subtle brand cues—keep usage sparing.
- **neutral (#f5f5f5):** Light surface for page backgrounds, cards and sections.
- **brand-heather-field (#909094):** Mid gray for secondary text, dividers and subdued controls.
- **brand-limo-scene (#4c4c50):** Dark gray for strong borders, icons, or muted headings on light surfaces.
- **brand-paris-daisy (#faea53):** Pera yellow for highlights, badges and illustration flourishes—avoid large text blocks on it.
- **surface (#f5f5f5):** Default surface color for content areas and cards.
- **on-surface (#1c1c1c):** Default text and icon color placed on surface backgrounds.

## Typography

- Headline LG (DM Sans, 72px/1.2, 500, -0.07em): Primary H1 for heroes and section intros. DM Sans is freely available; if self-hosted isn't accessible, load DM Sans via Google Fonts. Substitutes: Inter, Manrope.
- Headline MD (AkkuratMonoRegular, 50px/1.2, 500): Technical display for secondary hero lines or standout stats. Akkurat Mono is proprietary; substitutes: IBM Plex Mono, JetBrains Mono, Space Mono.
- Headline SM (DM Sans, 35px/1.37, 500, -0.033em): H2/H3 across features and content blocks.
- Headline XS (AkkuratMonoRegular, 24px/1.21, 500): Small mono subheads, labels, or UI-forward callouts. Substitute with IBM Plex Mono, JetBrains Mono, or Space Mono where Akkurat is unavailable.
- Body MD (FavoritProBook, 17px/2, 400, -0.01em): Core paragraph style with generous leading for readability. Favorit Pro is proprietary; substitutes: Inter, Work Sans, Manrope. Keep link and emphasis styles subtle, leaning on the accent purple.

## Layout

The spacing scale is compact-to-generous: 8, 16, 28, 40 and 66px. Use xs–md (8–28px) for element gaps within components; lg (40px) for block spacing; xl (66px) for section padding. Compose sections in simple vertical stacks, introducing contrast with the black ticker band or device mockups. Feature areas work well in responsive grids that switch from single column to multi-column while preserving md (28px) gutters. Card padding is fixed at 16px per tokens.

## Elevation & Depth

Hierarchy is conveyed with subtle shadows and strong tonal contrast. Use sm for small lifts (chips, badges), md for cards and floating navs—the 1px ring helps define edges on light surfaces. Reserve lg for hero mockups or overlays that need clear separation. When shadows are absent (xl/inner are none), rely on borders in #909094 and the neutral/surface contrast.

## Shapes

Corners are understated and consistent: sm 4px for inputs and badges, md 8px for cards and panels, lg 12px for primary buttons and prominent modules. Rounded language signals approachability without feeling playful; keep radii consistent within a component cluster.

## Components

Buttons and cards are the workhorses:
- Button — Primary: #1c1c1c background, #ffffff text, 52px height, 14px×24px padding, 12px radius. Use for the main CTA.
- Button — Secondary: text-only in #1c1c1c, 52px height, 14px×24px padding, 4px radius when contained.
- Button — Link: inline text in #1c1c1c, 0px radius, no background.
- Card: #f5f5f5 surface, #1c1c1c text, 8px radius, 16px padding, md shadow for clear edges.

Distinctive components on this page:
### Global Navigation Bar
- Monochrome links with a single right-aligned Download CTA. Use primary text on surface; apply md shadow only when sticky.
### Hero CTA Block
- Headline LG at 72px DM Sans, supportive body at 17px. One primary button (52px height) centered beneath.
### Device Mockup Frame
- Browser + phone frames over neutral sections; use lg shadow to lift from background; corners at lg for cohesion.
### Values Marquee
- Full-width band in #000000 with uppercase words separated by spacing. Text in #ffffff; consider mono Headline XS for the technical tone.
### Feature Card
- Grid of cards with Headline SM, body MD, and a small visual. Card padding 16px, md shadow, md gap between cards.
### NEW Badge
- Small pill using #faea53 background with on-surface text; sm (4px) radius; place top-left of the feature card.
### Review Score Capsule
- Compact stat group (e.g., 4.9/5, 4,500+ reviews) using mono for the numeral, body MD for label.
### Newsletter Subscribe
- Input with sm radius and #909094 border, primary button at 52px height; stack vertically on narrow screens with md gaps.

## Do's and Don'ts

- Do keep text on surface set in #1c1c1c and avoid using purple for body copy.
- Do reserve #6b46fe for links, focus, and subtle highlights; use #faea53 only for badges or small illustrative notes.
- Do maintain the 52px button height and the 12px radius for primary CTAs across breakpoints.
- Don't add heavy gradients or multicolor backgrounds—use the #000000 ticker band or device mockups to add energy instead.
- Don't round everything equally; follow sm/8px for cards and lg/12px for primary actions to keep hierarchy legible.
- Don't overuse shadows; prefer the md ring or #909094 borders to define layers on light surfaces.

## Agent Prompt Guide

Quick color reference — Text: #1c1c1c, Background: #f5f5f5, Border: #909094, Accent: #6b46fe.

1) Build the hero
- Container background #f5f5f5 with xl (66px) top/bottom padding.
- H1: DM Sans 72px, weight 500, line-height 1.2, letter-spacing -0.07em, color #1c1c1c.
- Body: FavoritProBook 17px (or Inter), line-height 2, color #1c1c1c.
- Primary CTA: 52px height, 14px 24px padding, radius 12px, background #1c1c1c, text #ffffff.

2) Values marquee band
- Full-width section background #000000, vertical padding sm (16px).
- Text: AkkuratMonoRegular (or IBM Plex Mono) 24px, uppercase tracking as needed, color #ffffff; repeat tokens "SECURE • GREEN • FAST • DECENTRALIZED • OPEN-SOURCE • COMMUNITY-DRIVEN".

3) Feature cards grid
- Grid gap md (28px); each card background #f5f5f5, padding 16px, radius 8px, md shadow.
- Headline: DM Sans 35px/1.37, 500, -0.033em, color #1c1c1c.
- Body: FavoritProBook 17px/2, color #1c1c1c.
- NEW badge: background #faea53, text #1c1c1c, radius 4px, padding 4px 8px.

4) Newsletter module
- Stack input and button with md (28px) gap.
- Input: 52px height, border 1px #909094, radius 8px, background #ffffff, text #1c1c1c.
- Button: primary spec (52px, #1c1c1c background, #ffffff text, radius 12px).

## Similar Brands

- Coinbase: similarly restrained with strong black/white contrast; Pera leans more on a ticker motif and uses purple/yellow accents instead of blue.
- MetaMask: monochrome base with bright accent color; Pera's typography is larger-scale and more editorial.
- Phantom: clean wallet marketing with subtle gradients; Pera is flatter and relies on a bold marquee band for energy.
- Ledger: hardware-focused minimalism with heavy black sections; Pera borrows the black band idea but applies more playful yellow highlights.

More like this

Browse Fintech →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 13 hours ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 7 days ago