Tokfira
A bridge between design systems and production interfaces
ROLE
- Product concept and strategy
- User flows and information architecture
- UX and interaction design
UI design and visual system - Application architecture
Responsive interface design - V0 development and iteration
- WordPress and Elementor integration
- Testing and product refinement
URL: tokfira.com
Tokfira is a SaaS application that I independently conceptualized, branded, designed, and developed using V0 and AI-assisted development workflows.
The idea emerged from a recurring challenge I experienced while working with existing websites and digital products: modifying, standardizing, and normalizing interface styles often requires manually reviewing code, coordinating with a front-end developer, or rebuilding parts of the product.
I created Tokfira to make this process more accessible to:
- UX and product designers
- Design teams
- Digital agencies
- Startups and businesses
- Users without advanced programming knowledge
TOOLS: Adobe Illustrator, Figma, V0, Gemini, Chat GPT
UI/UX DESIGN/AI-Assisted Product Developer
The challenge
Existing websites, web applications, and mobile products frequently contain:
- Duplicated or inconsistent colors
- Outdated typography styles
- Disconnected CSS variables
- Inconsistent spacing and visual patterns
- Styles that no longer match the original design system
Although a design system may exist in Figma, the production product can gradually become disconnected from it.
Correcting these inconsistencies can be:
- Technically complex
- Time-consuming
- Expensive
- Dependent on front-end development resources
The solution
Tokfira scans an existing website or application, identifies its styles and variables, and helps users connect them to a centralized design system.
The experience is organized into four guided stages:
- Scan App: Connect and scan an existing web application, static HTML website, WordPress, Webflow, Shopify, Wix, or another supported platform or framework to discover the styles, variables, and design values currently used across the product.
- Design System: Create or import the tokens that represent the intended visual system.
- Map Variables: Connect existing production values to approved design tokens.
- Review & Compare: Compare current and proposed values before applying any changes.
This transforms a technical process into a clear visual workflow while keeping users in control of every decision.
Designed and built independently with AI
I took Tokfira from the initial concept to a functional SaaS application.
My responsibilities included:
- Product concept and strategy
- Information architecture
- User flows and interaction design
- UX/UI design
- Responsive interface design
- Application logic and functionality
- Development and iteration using
- V0
- WordPress and Elementor integration
- Brand concept and positioning
- Logo and visual identity
- Landing page design
- Testing and product refinement
AI accelerated the implementation process, but I remained responsible for:
- Defining the product vision
- Identifying the user problem
- Prioritizing features
- Directing the user experience
- Making design and product decisions
- Testing the workflows
- Refining the functionality
- Delivering the final product
Brand Identity and Visual System
I also created Tokfira’s complete brand identity, including the brand concept, logo, color palette, typography, and visual direction.
The identity was designed to communicate
- Organization: Bringing scattered styles, variables, and design decisions into one structured system.
- Balance: Creating visual harmony between different styles, components, and interface elements.
- Normalization: Transforming inconsistent values into reusable and standardized design tokens.
- Connection: Linking design systems with existing websites, applications, platforms, and production environments.
The logo reflects these principles through a clean, structured, and interconnected visual form. Its geometry represents separate elements coming together to create an organized and balanced system.
The color palette reinforces the brand’s modern and technical character while maintaining clarity and consistency across the SaaS application, landing page, and marketing materials.
The outcome
Tokfira evolved from a personal design challenge into a functional platform that connects design systems with real production interfaces.
The product allows users to:
- Manage multiple digital projects
- Scan existing styles and variables
- Build or import design systems
- Map production values to design tokens
- Review proposed changes
- Apply controlled style updates
- Connect web apps, static websites, WordPress, Elementor, Webflow, Shopify, Wix, and other frameworks
Growing through collaboration
Tokfira is also evolving into a collaborative community where companies and UX designers:
- Use the platform in real projects
- Share feedback
- Identify new use cases
- Recommend improvements
- Help influence future functionality
This continuous collaboration is helping Tokfira grow from an individual product concept into a platform shaped by the needs of real design teams and businesses.
