End to end
design for io.net

The design process at io was not limited to creating a design system. Yes, I built a modular and scalable design system that adapts to all the different products like io Explorer, io Worker, io Cloud - but the real power of the work was to turn this system into realistic and functional product designs.

I built the web and mobile interfaces, responsive behaviors, and consistent user experiences for all products from scratch. I also shaped the digital face of the brand by designing both marketing-oriented landing pages and product pages for io's websites. Every detail was both systematic enough to facilitate the developer process and realistic enough to immerse the user.

Landing Page

Design System

Designing for io meant building a design system that could work seamlessly across multiple products — from Explorer to Worker, Cloud, Intelligence, and Staking. Each product had different needs, but the system had to stay consistent, flexible, and scalable.

I started by defining the core brand colors, then expanded the palette with a focus on text, background, icons color etc. The system was built with clear roles for each color, making it easy to apply consistently across all interfaces — from product to marketing.

For typography, I used Inter — a modern, highly readable typeface that works well across both product and marketing surfaces. A clear hierarchy was defined through consistent sizing, weights, and spacing to ensure clarity and scalability across all io interfaces.

For icons, we used the Central Icon Set as our foundation. For missing icons, I created a custom drawing guide based on Central’s rules to maintain visual consistency across the entire product ecosystem.

The design system I made for IO has much more than the images I have attached. To show them all would make this case too long, but briefly:

1. Core Elements

- Color pallette
- Design status (this is for designers)
- Typography
- Grid system
- Shadows

2. Assets

- Figma file thumbnails
- Icons
- Country flags
- Placeholders
- IO Product logos
- Empty state illustrations

3. Base Components

- Alert & Notification toasts
- Avatars
- Badges
- Top banner
- Buttons
- Checkbox
- Radio
- Toggle
- Content divider
- Pagination
- Tab menu & Navigation
- Inputs
- Switch toggle
- Tooltip
- Modals
- Popover
- Key Components
- Dropdown
- Stepper
- Footer

4. Product Components
- Charts
- Boxes
- Header
- Tables

IO Products

I designed the full interface for multiple io products — including web and mobile layouts for tools like Explorer, Worker, Cloud, and more. Each screen was tailored to its specific use case while staying aligned with the shared design system to ensure a cohesive user experience across the entire ecosystem.

Brand Touchpoints

To strengthen io’s presence beyond screens, I created a range of branded assets — from NFC-enabled business cards to custom keychains, stickers, and merchandise.

Every detail was designed to reflect the brand’s futuristic, minimal, and technical tone, extending the design language into real-world touchpoints.