Kado

Payments Infrastructure
for Web3
Empowering customers, businesses, and builders to access the world of crypto. Kado makes it easy to convert fiat to crypto using various payment methods. Bypass centralized exchanges and transfer funds directly to your self-custody wallet.
Product Design
Web Design
Design System
Illustration
Key Visual

What is Kado?

Kado is building payments infrastructure for Web3 and the future of digital money, providing solutions for easier access to and utility for stablecoins, for consumers and businesses.
The image depicts a mobile interface for a cryptocurrency wallet or exchange platform, showing a swap transaction between two stablecoins. The user interface is clean and modern, with rounded edges on the buttons and fields. The background is a deep blue, with abstract shapes that don't interfere with the content.

Here’s a breakdown of the key elements:

Swap Functionality: The swap option is selected at the top, indicating the user is exchanging one cryptocurrency for another.
Currency Display: The transaction involves swapping USDC (USD Coin) from one blockchain (Avalanche) to another (Ethereum). The user is paying 300 USDC and receiving approximately 296.27 USDC after a minor fee or slippage.
Address Fields: There are "From" and "To" fields, showing blockchain addresses with partially hidden characters for privacy. These fields indicate the source and destination wallets.
Change Options: There are "Change" buttons beside the wallets and a dropdown icon beside the blockchain names, allowing users to modify these selections.
Transaction Details: A small indicator at the bottom shows additional details like the use of Hyphen (likely a bridging service), a euro equivalent, and an estimated transaction time of 2 minutes.
This interface likely represents part of Kado’s infrastructure, facilitating easy cross-chain swaps for stablecoins, aligning with their goal of improving digital money accessibility.
Swap
The image displays a mobile interface showcasing various cryptocurrency assets and their respective values. The layout is organized in a grid format, with each cryptocurrency represented by a card that includes its logo, name, current price, and percentage change in value. Here’s a breakdown of the key elements:

USDT (Tether): This card shows a slight decrease in value, with a red indicator showing -0.17%.
ETH (Ethereum): Displayed with its price at $1671.60 and a -2.3% decrease in value, represented by a red arrow.
USDC (USD Coin): Priced at $1.04, showing a small positive change of +0.17%, with a green arrow indicating growth.
AVAX (Avalanche): Listed with a price of $23.71 and a decrease, although the exact percentage drop is cut off in the image.
Below these primary cryptocurrencies, additional assets are visible, though no price changes are listed for them:

Dogecoin
Chainlink
Juno
Dai
Solana
Asset
The image displays a user interface designed for facilitating the purchase or conversion of cryptocurrency, specifically showcasing an onramp process. The interface has a clean and minimalistic design, dominated by a blue background. At the top, the user has three options: Buy, Sell, and Swap, with the Buy option currently selected.

The transaction involves the user paying 300.00 USD and receiving 296.52 USDC (USD Coin) on the Ethereum blockchain. Below the amount fields, the recipient wallet is partially hidden for privacy, with an option to change the wallet address. The exchange rate is noted at the bottom, showing 1 USDC ≈ 1.0005 USD, suggesting a slight premium or fee on the conversion. Additionally, there are small icons providing extra details: an estimated transaction time of 2 minutes and a cost of 3.12 USD for the service.

A prominent Continue button at the bottom allows the user to proceed with the transaction. The overall interface appears intuitive and user-friendly, streamlining the process of converting traditional currency into stablecoins. This aligns with Kado’s mission to simplify digital payments and access to stablecoins for users and businesses alike.
Onramp

Web Design

We worked together with the Kado team to build the right communication and presentation of products and values to encourage customers, businesess and builders to enter the Web3 world.
Website
Website
The image shows a series of web subpages from Kado’s website, primarily targeting businesses and developers who want to integrate cryptocurrency payments into their platforms. The layout is clean, with a green and white color palette, emphasizing Kado’s seamless and user-friendly approach. Here's a detailed description of each section:

Left Side:
Enable your dApp to buy crypto directly: This heading stands out, encouraging developers to use Kado’s API to allow their decentralized applications (dApps) to directly offer crypto purchases. A visual representation of the platform's interface is shown, where users can seamlessly buy crypto.

Get started button: A prominent blue button that allows businesses to begin the integration process quickly.

Below this, text highlights that users can buy crypto directly on the developer’s site using Kado's services. This points out that the integration is straightforward, increasing conversion rates and generating revenue for businesses.

Easy to integrate: Kado promotes their API as easy to implement, displaying a snippet of code to represent how developers can integrate it into their websites.

Right Side:
Low Fees: This section emphasizes Kado’s cost-effective structure, noting that businesses and their customers can save money with lower fees.

All major payment methods: It highlights that Kado accepts a variety of payment options, including Visa, Mastercard, Google Pay, Apple Pay, Wire Transfers, and ACH Transfers, providing flexibility for both businesses and customers.

Safe & Secure: This section reassures potential users that Kado meets industry security standards. An image of a “User Verified” badge and a lock icon symbolizes the security checks in place, ensuring users’ and businesses’ peace of mind.

Bottom Right:
Seamless fiat to crypto solutions: Kado offers a simple API that allows users to convert fiat into crypto without leaving a developer's platform. This promotes an uninterrupted user experience, crucial for keeping customers engaged and reducing friction in the buying process.

A link to the API documentation is included, aimed at developers ready to dive into the technical aspects of the integration.
Overall, the image presents Kado’s platform as a comprehensive, secure, and easy-to-use solution for integrating cryptocurrency payments into websites or applications. It appeals to businesses looking to offer crypto purchasing options directly through their platforms, providing them with tools to enhance user experience, conversion rates, and security.
Subpages

Illustrations

We have prepared a dedicated set of illustrations, aligned with all of Kado's branding, to communicate in an abstract, playful and clear way what Kado does, what values it follows, what processes it simplifies for users or what assets can be purchased.

All to be used in daily communication on various marketing channels.
The image contains a set of six stylized illustrations, each representing different aspects of cryptocurrency transactions and digital financial systems. The illustrations use a cohesive color scheme with shades of blue, green, and purple, creating a visually appealing, modern look. Here's a breakdown of each illustration:

Top Left: This illustration features puzzle pieces coming together with a central "K" (likely representing Kado), along with various global currency symbols like the yen, euro, and dollar. This image likely symbolizes Kado's role in bridging traditional currencies and cryptocurrency, acting as the missing piece in the global financial ecosystem.

Top Right: A figure is depicted looking through a magnifying glass, suggesting a focus on user verification or identity checks. This could relate to the security and authentication processes necessary in financial transactions, emphasizing Kado’s commitment to compliance and safe operations.

Middle Left: An open seashell with dollar symbols floating around represents value or wealth being unlocked. The seashell could symbolize the process of unlocking access to stablecoins or digital currencies, aligning with Kado’s mission to provide easier access to these assets.

Middle Right: This illustration shows a physical credit or debit card next to a smartphone with a checkmark on its screen, highlighting the seamless integration of traditional banking methods (like credit cards) with digital finance and cryptocurrency transactions through mobile devices.

Bottom Left: A coin purse releasing various crypto coins, such as stablecoins and other tokens, into the air. This image represents the ability to hold and manage multiple cryptocurrencies, reinforcing Kado's functionality in supporting a variety of digital assets.

Bottom Right: A hand holding an ID card with coins floating around it, suggesting a focus on verification, user identification, or security in financial transactions. This is likely linked to Kado’s emphasis on safe and secure transactions, with necessary identity verification for compliance and user protection.

Overall, the illustrations highlight key features of Kado’s offerings, such as security, integration with traditional finance, ease of access to cryptocurrencies, and a user-friendly platform for managing digital assets. The artwork reinforces the brand's values of seamless interaction between fiat and crypto while ensuring safety and accessibility for users.
Illustrations
Motion
The image contains a collection of social media promotional graphics from Kado, each highlighting different aspects of their services, updates, and offers. The designs maintain a cohesive style, using shades of blue, purple, and green with simple, modern icons and typography. Here’s a detailed breakdown of each section:

Top Left:
SEI Listing Announcement: This graphic announces the listing of SEI on Kado, featuring the text: "New listing on Kado: SEI (Sei)". The message indicates that SEI is now available for onramp, offramp, and swap services on the platform. The design incorporates a large SEI logo in the background, with a purple theme, creating a bold and informative announcement.
Top Right:
Noble USDC on Seven Chains: This section promotes Kado's support for Noble USDC across seven different blockchain networks, including Osmosis, Neutron, dYdX, Kujira, Oraichain, Archway, and Sei. The visual highlights the connection between USDC and these chains, using circular icons representing each network orbiting around the USDC symbol, with a focus on integration across multiple platforms.
Bottom Left:
Kado and Noble Partnership: This graphic highlights the partnership between Kado and Noble, showcasing USDC and Noble logos in the center. The surrounding icons suggest network connections and digital interactions, emphasizing the partnership's role in expanding stablecoin accessibility across blockchains. The design feels futuristic and interconnected, reflecting the technological nature of blockchain systems.
Bottom Right:
Discount Offer for Existing Users: This section offers a promotional deal, stating: "50% off fees for existing users!" The text is large and attention-grabbing, with the message encouraging users who haven't engaged with the platform recently to return, using the tagline "We miss you. Come back soon?" The overall design is simple yet effective, with a blue background and minimal graphics to focus attention on the discount offer.
The image collectively showcases Kado's continuous expansion of supported assets and chains, partnerships, and user engagement efforts, using professional and modern design elements to communicate these updates and promotions effectively.
Social Media

Product Design

For more than two years, we have been supporting the Kado team in building more features on a daily basis, working with the team of developers, product managers and other stakeholders.

We are exploring Web3, while simplifying the UX allowing us to increase the conversion of new users to the entire Web3.
Onramp
The image shows a user interface for a bridge transaction, facilitating the transfer of cryptocurrency assets across different blockchain networks. The design is sleek and organized, using various shades of blue and green to maintain clarity and focus. Below is a breakdown of the key components:

Top Left:
Order Summary: This section provides a detailed breakdown of the transaction, where the user is transferring 0.5 ETH (Ethereum) using the Hyphen Bridge. The transaction fee is displayed as $4.98, and the estimated completion time is -2m. The user is receiving 1267.34 axlUSDC (Axelar USD Coin) on the Osmosis network, with the destination wallet partially hidden for privacy.
Center:
Swap Interface: The central panel shows the Swap option being selected, where the user is swapping 0.5 ETH on the Ethereum network and receiving 1267.34 axlUSDC on Osmosis. The interface displays the relevant blockchain addresses for both the sending and receiving wallets, and the bridge being used (Hyphen Bridge). There's a large blue Continue button for proceeding with the transaction.
Bottom Left:
In Progress: This section shows the ongoing status of the transaction. The interface indicates that the process of receiving 0.5 ETH from the user's wallet is currently in progress, and it displays the expected receipt of 1267.34 axlUSDC on the destination network, Osmosis. A visual loading indicator at the top shows the transaction is active, and the fee is summarized at the bottom, along with the estimated time of 2m.
Bottom Center:
Change Route Options: Here, the user is presented with three alternative bridging routes to complete the transaction, each offering different fees and times. The Hyphen Bridge (currently selected) offers the highest amount received, at 296.27 axlUSDC with a fee of $0.42 and a 2-minute processing time. Other options, like the Multichain Bridge and Stargate Bridge, provide slightly lower amounts and different fees, with the Multichain Bridge being recommended for a balance of time and cost.
Top Right:
Select Wallet: This interface allows the user to choose or enter a wallet address for sending or receiving the assets. A list of recently used addresses is shown, along with the option to connect a Metamask wallet. This enables flexibility in switching between wallets for different transactions.
Bottom Right:
Select Asset: This panel allows the user to choose the specific asset they want to bridge, showing a list of stablecoins like USDC and USDT on various networks (Ethereum, Optimism, etc.). This provides the user with options for selecting the preferred asset for their transaction.
The entire interface is highly functional and user-friendly, streamlining the process of bridging assets across different blockchains. The detailed breakdown of fees, estimated times, and different routing options ensures transparency and flexibility, which is critical in the world of decentralized finance (DeFi).
The transaction involves the user paying 300.00 USD and receiving 296.52 USDC (USD Coin) on the Ethereum blockchain. Below the amount fields, the recipient wallet is partially hidden for privacy, with an option to change the wallet address. The exchange rate is noted at the bottom, showing 1 USDC ≈ 1.0005 USD, suggesting a slight premium or fee on the conversion. Additionally, there are small icons providing extra details: an estimated transaction time of 2 minutes and a cost of 3.12 USD for the service.

A prominent Continue button at the bottom allows the user to proceed with the transaction. The overall interface appears intuitive and user-friendly, streamlining the process of converting traditional currency into stablecoins. This aligns with Kado’s mission to simplify digital payments and access to stablecoins for users and businesses alike.
Bridge
The image shows a screen from a bridge transaction process, providing an update that the user's funds are in transit. The design is clean and modern, with a clear progress tracker at the top, indicating the current stage of the transaction: Step 3, Sending assets. Here’s a detailed breakdown of the elements:

Top:
Progress Tracker: The progress bar at the top has four stages, with the first two steps completed (green checkmarks) and the current step being Sending assets (step 3). The fourth step is likely the final confirmation of the funds being received.
Main Section:
Funds on the way!: This text confirms that the assets are being transferred, with an additional note that it may take up to 3-5 business days for the funds to be delivered. This messaging reassures the user about the status of the transaction while providing realistic time expectations for completion.

From Section: This lists the sources of the transferred funds. Three separate amounts of USDC are being transferred:

156.94 USDC from one wallet (associated with the Metamask icon).
52.16 USDC from another wallet, also with the Metamask logo.
2546.00 USDC from a Solana address, linked to another wallet. This wallet address ends with 87161, partially hidden for privacy.
To Section: The total amount of 2755.10 USDC is being sent to a destination address on the Osmosis network, with the recipient address also partially hidden.

Visuals:
There’s a prominent circular icon in the center-right with a clock symbol, representing the waiting period as the assets are in the process of being transferred. This visual further reinforces that the transaction is ongoing but not yet completed.
Overall, this interface provides users with a transparent view of the progress of their bridge transaction, ensuring they know the current status and any expected waiting times. The split of funds from different wallets into a single destination is clearly laid out, allowing for easy tracking of each portion of the transaction.
Bridge
The image showcases multiple status screens from a cryptocurrency transaction process, each representing different stages or outcomes of the transaction. The layout is arranged in a grid format, with each screen providing an update or instruction related to the transaction’s progress. Here's a breakdown of the screens presented:

Top Row (from left to right):
Payment Processing (In Progress):

This screen indicates that a transaction of $300.00 USD is in progress, converting into 296.27 USDC. It shows that the funds are currently being processed, with a loading circle in the center representing that the process is ongoing. The option to go Back to Home is provided.
Funds Waiting:

The second screen shows that the funds are waiting to be confirmed, with the same $300.00 USD being processed into 296.27 USDC. The user is informed that this step might take some time, but no additional actions are required at this moment.
Assets Distributing:

This screen shows that the assets are currently being distributed to the user. The text indicates that the distribution process is ongoing for the 296.27 USDC. Again, the user is given the option to return to the home page.
Transaction Completed:

This screen shows that the transaction has been successfully completed. A green checkmark indicates that the user has received the 296.27 USDC, and the transaction is fully processed. The user is given the option to return to the home page.
Middle Row (center):
Wire Transfer (Waiting for Payment):
This screen shows a status where Kado is waiting for the user’s wire transfer to be processed. The amount of $300.00 USD and a $34.30 fee are listed, with details of the receiving address shown below. The user is informed that the wallet will reflect the transaction once the payment is confirmed, which may take some time.
Bottom Row (from left to right):
Transaction in Progress (Waiting for Payment):

A similar status screen, waiting for 0.0209 ETH to be processed, resulting in an exchange of $28.27 USDC. The user is informed that the process is still in progress, with the same "Back to Home" button available for navigation.
Working on Your Transaction:

A screen indicating that the system is still working on the user’s transaction. The transfer of $300.00 USD is in progress, and the user can see the exchange rate and fees, while being assured that the transaction is actively being handled.
Something Went Wrong:

This screen shows an error, indicating that something went wrong with the transaction. In this case, 0.0209 ETH was being converted, but an issue has occurred. The user is prompted with options to retry or go back to the home screen to resolve the issue.
Overall Summary:
This set of screens demonstrates various stages of a cryptocurrency transaction, from the initial processing of the funds to the distribution or potential error states. The clean and intuitive interface ensures that the user is constantly informed about the status of their transaction, whether it's pending, processing, completed, or if there’s an issue. Each screen offers a clear next step or confirmation that the user can take, ensuring a smooth user experience even in the case of transaction delays or errors.
Status

Design System

Fundamental to such a complex product is the creation of a Design System that allows us and developers to quickly and efficiently iterate, add new features, test and explore new solutions.
Foundations
Center (Top):
Ramp Template: A full template displaying different views for onramp, offramp, and swap/bridge transactions. There are two states shown:
Empty: Where no data has been entered, and the input fields are waiting for user input.
Filled: Where transactions are populated, displaying input amounts and conversions, such as swapping ETH for USDC, showing transaction fees, and the connected wallet information. This template gives a clear view of how the transaction forms change depending on the state of user interaction.
Top Right:
Sticky Footer: This part highlights a component that stays at the bottom of the screen, offering button styles such as Continue, Skip, and other secondary actions. Different button combinations are shown in Primary and Secondary states, providing flexibility for transaction confirmations or user prompts.
Left Center:
Ramp Input: This is a detailed component showing how the input fields for ramping (buying or swapping) behave in different states:
Empty: The default state with no input.
Hover: The field reacts when hovered over by the user.
Active: The user begins to input values.
Loading: After the input is completed, the transaction is processing.
Filled: The transaction details are complete and filled with values, such as a swap between USD and USDC. This section demonstrates the user flow through each state when interacting with the ramp.
Center (Bottom):
Order Processing Template: This section provides templates for handling the order processing stage in the onramp, offramp, and swap transactions. The states are shown in a step-by-step process:
1 Step: Processing the transaction and displaying the details.
2 Step: Completion of the process with transaction summaries, fees, and exchange rates. Each template includes both assets being exchanged, fees, and wallet addresses.
Bottom Right:
Order Processing Box: This section breaks down the different statuses of the order processing box component, including:
Default: Showing the amount being processed, such as 296.27 USDC.
Loading: Indicating that the transaction is in progress.
Success: Confirming that the transaction has been completed.
Pending: Awaiting confirmation of the transaction.
Warning: Showing an error or issue that occurred during the transaction. These states allow users to understand the current progress of their transaction and any potential issues that may arise.
Summary:
The image showcases Kado’s detailed UI component design system, demonstrating various elements involved in the ramping, swapping, and processing of digital assets. The different states for each component ensure a smooth user experience, with clear visual feedback at each step of the transaction. The clean and consistent design language aligns with Kado’s branding, ensuring usability and transparency in the platform’s payment and swapping services
Components
Variables
We’ve loved working with the Properly team to execute on our fast-paced, startup approach to all things like 
UI & UX and Design.
Emery Andrew
CEO of Kado

In the news

Payment Builder Kado Closes First Capital Raise To Expand Access to Stablecoinsyes
Branding
Product Design
3D

TransactionLink

Enabling the fintechs of tomorrow
Branding
Product Design
3D

VirtualShield

The right to remain private™
Hire us
In progress

Kado

Payments Infrastructure
for Web3

Product Design
Web Design
Design System
Illustration
Empowering customers, businesses, and builders to access the
world of crypto. Kado makes it easy to convert fiat to crypto using
various payment methods. Bypass centralized exchanges and
transfer funds directly to your self-custody wallet.
Key Visual