Bitcoin UI Kit

This design system and UI kit provides a design foundation for prototypes, concept explorations and open-source projects to kickstart the design process. So you can focus on what makes your bitcoin product unique. Learn more.

Duplicate on Figma

See what's included

Elements

Colors, text styles and other details make up the smallest parts the UI kit. Customize them and the changes are automatically applied to all the other components. Icons and illustrations via Bitcoin Icons and Bitcoin hardware illustrations.

Colors

In four sizes. Can be used with red or green for incoming/outgoing transactions or to indicate high/low values.

Primary

Pink

Red

Orange

Yellow

Green

Mint

Teal

Cyan

Blue

Indigo

Purple

Brown

Icons

120+ icons are included from the Bitcoin Icons sister project.

Dropdown

You should not be able to read this. It's a placeholder.

Toggle

On or off. Small or big.

Tooltip

Provide additional details and feedback on interactions like copying.

Some very helpful info
Success
There was a problem

Input field

You should not be able to read this. It's a placeholder.

Button

Comes in 4 sizes and 3 styles, with combinations of icon and text.

PIN entry

For entering and verifying PIN codes.

Checkbox

You should not be able to read this. It's a placeholder.

Keypad

For both PIN input and entering numeric amounts.

Icon in circle

Decorative treatment for icons, often used to draw additional attention to an area.

Themes

The kit comes with a flexible theming system that quickly allows you to pick from several color palettes and type styles and then customize them to your needs (via the UI Kit plugin). Try some of the options below to preview.

Light or dark?

Pick a theme

Typography

Scroll down to view changes

Components

The kit includes plenty of building blocks, from general UI components like buttons and inputs, to bitcoin-specific ones like balance display and address input.

Recovery phrase

For manual backup and verification of an onchain wallet mnemonic seed.

Spending category

Based on transcations grouped by tag.

Balance

Local-specific unit formatting for bitcoin, satoshi, and fiat currencies.

0,01076736 

520.487 sats

51,87 

Wallet

Visual cards representing different types of wallets.

Fee graph

You should not be able to read this. It's a placeholder.

Transaction

Visualization of different states using the components above.

Web design work for ACME Inc. Invoice BDC01

Inline notification

Inform users about new information and important actions to take.

Back up your wallet in case you lose access.

Back up your wallet in case you lose access.

Transaction notification

Let users know when transactions succeed or fail.

Received 10,480 sats

Received 652 sats

Recipient selection

Supports various input types across layers and a contact book.

To

To

To

To address

Amount input

Lets users enter bitcoin or satoshi amounts and shows the balance.

Amount

Balance: 0,00 520 000

Amount

Balance: 520.000

sats

Wallet type

Visual indicators of wallet network that users can personalize.

Screens

250+ screen mock-ups are included based on best practices in the Bitcoin Design Guide. Home, settings, transactions, security center, and a lot more.

22:03

Bitcoin wallet

A simple bitcoin wallet for your enjoyment.

Your wallet, your coins
100% open-source & open-design

22:03

You received

+5,651,816 sats

From address

3LaQ ... NfkY

Fee

+2,987 sats

When

Aug 12, 2021 at 4:35pm

22:03

Your balance

0,00512000 

12,80 

Web design work for ACME Inc. Invoice BDC01

22:03

Share payment request

250,000 sats
2 Hawaii pizzas

22:03

Settings

Convenient backups with cloud storage

Your recovery phrase will be encrypted and backed up to your cloud provider, only you will be able to access it.

22:03

Your wallet is backed up

If you lose this device, you can recover your encrypted wallet backup from iCloud.

User flows

Onboarding, wallet creation, sending, receiving and other common user flows are laid out with explanations and can be easily customized.

22:03

0 sats

0,00 

22:03

Adjust the fee

22:03

Choose the device for signing this transaction

22:03

How this works

There are three steps to finalize this transaction before you can send it.

  1. Copy the unsigned transaction to your device.
  2. Sign the transaction on your device.
  3. Copy the signed transaction back to this phone.