Sobes.tech
Middle+

Do you have a design system / brand book? Have you ever implemented it from scratch?

sobes.tech AI

Answer from AI

A design system or brand book is a set of rules, components, and styles that ensure consistency in the interface and visual language of a product. I have had to implement a design system from scratch when a project lacked a unified style and components.

In such cases, I started by creating basic styles (colors, typography, spacing), then identified recurring UI components (buttons, forms, cards) and formalized them as reusable React/Vue components or CSS modules. It was important to document all rules and ensure scalability and maintainability.

An example of a basic React button component from a design system:

const Button = ({ children, type = 'primary', onClick }) => {
  const className = `btn btn--${type}`;
  return <button className={className} onClick={onClick}>{children}</button>;
};

This approach helps maintain consistency and speeds up the development of new screens.