Framer Best Website of the Year Nominee

A design system crafted with care to make your designs faster and more efficient.

Homay Design System makes designing easier and faster, with a touch of care and attention to every detail.

Buy Now

Buy Now

Figma logo
Vercel logo

Homay Design System

Homay Design System

Homay Design System

5132 components, 150 styles...

5132 components, 150…

5877 components, 150…

Key Features

Homay Design System that doesn't hinder your creativity. It accelerates the execution of your ideas.

Maintenance Plan

We have a strategy in place for the regular updating and upkeep of the design system, ensuring it remains current and effective.

Full Responsive

Maintains balance and alignment across devices through a consistent grid and spacing scale for margins and padding.

Aa

Core Typography

A structured approach to headings and text enhances readability, with customizable variables for quick adjustments to font and height.

Color Variables

Color variables provide consistent, reusable, and easily updatable color values, maintaining visual coherence and simplifying theme adjustments.

All The Assets You Need

5000+ Assets include reusable element like logos, badges, icons, flags, emojis and etc.

All The Assets You Need

5000+ Assets include reusable element like logos, badges, icons, flags, emojis and etc.

All The Assets You Need

5000+ Assets include reusable element like logos, badges, icons, flags, emojis and etc.

homay

Architecture

A well-organized structure arrangement of components, styles, and variables that ensures consistency and easy adjustments.

Github logo

Accessibility Standards

Our accessibility standards ensure visibility with color contrast, Scalability of elements, screen reader compatibility for inclusive interaction.

import React from 'react';


// Button component with dynamic text, custom styles, and click functionality


const ButtonComponent = ({ text = 'Click Me', customStyle = {},

onClick }) => {

const [clicked, setClicked] = useState(false);


// Handle button click

const handleClick = () => {

setClicked(!clicked);

if (onClick) {

onClick();

}

};


return (

className={`custom-button ${clicked ? 'clicked' : ''}`}

style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', ...customStyle }}


onClick={handleClick}

>

{text}

);

};


export default ButtonComponent;


import React from 'react';


// Button component with dynamic text, custom styles, and click functionality


const ButtonComponent = ({ text = 'Click Me', customStyle = {},

onClick }) => {

const [clicked, setClicked] = useState(false);


// Handle button click

const handleClick = () => {

setClicked(!clicked);

if (onClick) {

onClick();

}

};


return (

className={`custom-button ${clicked ? 'clicked' : ''}`}

style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', ...customStyle }}


onClick={handleClick}

>

{text}

);

};


export default ButtonComponent;


import React from 'react';


// Button component with dynamic text, custom styles, and click functionality


const ButtonComponent = ({ text = 'Click Me', customStyle = {},

onClick }) => {

const [clicked, setClicked] = useState(false);


// Handle button click

const handleClick = () => {

setClicked(!clicked);

if (onClick) {

onClick();

}

};


return (

className={`custom-button ${clicked ? 'clicked' : ''}`}

style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', ...customStyle }}


onClick={handleClick}

>

{text}

);

};


export default ButtonComponent;


Code Handoff

Seamless handoff with Figma’s Code Panel, providing developers specs, code snippets, and assets.

4px Spacing

The 4px Spacing Method is key to our design system, ensuring consistent spacing, padding, and margins in 4-pixel increments.

More features will arrive soon ✨

Homay Library

We don't stop here; we continue to improve.

Component Icon

Over 5000 Components

Access 5,000+ components for modern, flexible design solutions.

Pallete Icon

More Than 1800 Unique Icons

Over 1800 Unique Icons

Choose from over 1,800 icons, crafted for clarity and style in your designs.

Styles and variables icon

568 Styles and Variables

Leverage 568 styles and variables for consistent, customizable designs.

Pricing

One Payment, Unlimited Access!

Make a one-time payment for full access to all content.

Make a one-time payment for full access to all content.

Free

Coming Soon

$0

Ideal for testers, and curious creators.

Buy Now

Buy Now

Buy Now

Individual

$48 $59

Perfect for solo designers and creators

info-circle
info-circle
info-circle

Team

$144 $179

Ideal for companies, startups and teams.

info-circle
info-circle
info-circle

Buy Now

Buy Now

Buy Now

Secure payment through Gumroad

Secure payment through Gumroad

Secure payment through Gumroad

FAQ

Frequently Answered Questions

What is a Design System?

A design system is a collection of reusable components, guidelines, and standards that ensure consistency and efficiency in creating user interfaces across products and teams.

What is the purpose of having a design system?

Why should I trust and purchase Homay?

Is prior Figma expertise required?

Do I need a Figma Professional plan to use Homay Design System?

Will there be updates or improvements for Homay in the future?

What is a Design System?

A design system is a collection of reusable components, guidelines, and standards that ensure consistency and efficiency in creating user interfaces across products and teams.

What is the purpose of having a design system?

Why should I trust and purchase Homay?

Is prior Figma expertise required?

Do I need a Figma Professional plan to use Homay Design System?

Will there be updates or improvements for Homay in the future?

What is a Design System?

A design system is a collection of reusable components, guidelines, and standards that ensure consistency and efficiency in creating user interfaces across products and teams.

What is the purpose of having a design system?

Why should I trust and purchase Homay?

Is prior Figma expertise required?

Do I need a Figma Professional plan to use Homay Design System?

Will there be updates or improvements for Homay in the future?

Any questions about Homay Design System?

We’re here to support your design journey every step of the way.

Sajjad Mohammadi Nia sign
Homay Design System Dribbble
Homay Design System X

© 2024 Homay.io