SMB.co Design System

Keara Meehan

Verified

5

Product Designer

Design Systems Specialist

UI Designer

Figma

The design system project for SMB.co, a modern business marketplace dedicated to empowering small businesses, is a comprehensive and cohesive framework that ensures consistency and usability across all digital platforms. This system integrates existing logos and branding elements into a well-structured and user-friendly design framework. It includes carefully selected typography, well-defined color variables, and standardized shadows to maintain visual coherence and enhance the user interface.
Key UI elements such as buttons, inputs, checkboxes, toggles, radio buttons, and tooltips have been meticulously crafted to provide a seamless user experience. The project extends to creating consistent and user-friendly page layouts for essential sections like the megamenu/navigation, search page, pricing page, testimonials, and footer, effectively utilizing the components.
Additionally, an organized icon library was developed using Hugeicons Pro, ensuring visual consistency and enhancing user interaction. The design system was developed with the assistance of the Blank UI kit, providing a solid foundation for building and customizing UI components. This robust design system positions SMB.co to support its mission and adapt to the evolving needs of small businesses, ensuring a scalable and maintainable framework for future growth.
Typography
Typography
Color Variables
Color Variables
Buttons
Buttons
Inputs
Inputs
Checkbox
Checkbox
Radio
Radio
Toggle
Toggle
Broker Profile
Broker Profile
Search
Search
Pricing
Pricing
Testimonials
Testimonials
Navigation
Navigation
Footer
Footer
Like this project
5

Posted Jul 9, 2024

SMB.co simplifies small business ownership. I created their design system, including logos, fonts, and UI elements, to ensure a consistent user experience.

Likes

5

Views

166

Timeline

Jun 19, 2024 - Jul 2, 2024

Clients

Small

Tags

Product Designer

Design Systems Specialist

UI Designer

Figma

Rescuify — Framer Non-Profit Website
Rescuify — Framer Non-Profit Website
Barkly — Framer Pet Care Website
Barkly — Framer Pet Care Website
Architecture Newsletter Website Hero Section Redesign
Architecture Newsletter Website Hero Section Redesign
Fitness Studio Website Hero Section Redesign
Fitness Studio Website Hero Section Redesign