A style guide is a document that establishes the rules for using the visual elements of a digital product. It serves to define the website’s graphic charter, including colors, typography, icons, and images. Sometimes created by the website’s designer or developer, this guide can be shared online to explain design choices. Some remain internal, while others are shared for transparency and educational purposes.

The elements included in a style guide include primary, secondary, and accent colors; typography with font families, sizes, and spacing; iconography with icon dimensions and styles, proportional spacing; image types, their formats and dimensions; and specific graphic elements such as logos, illustrations, or animations.

A brand style guide, focused on visual identity, establishes the visual guidelines specific to a brand, extending beyond digital interfaces. It encompasses brand colors, typography, and rules for using the logo, images, and photographs.

A UI Kit, a set of ready-to-use visual and functional components, facilitates the consistent creation of graphical user interfaces. It includes interface components, navigation elements, and specific text and typography styles.

A design system, a holistic approach, integrates the style guide and the UI kit to provide consistent guidelines for the design, construction, and maintenance of a product or user interface. It can include reusable UI components, design guidelines, technical documentation, accessibility guidelines, and animation guidelines.

In summary, the creation process can begin with the development of a style guide to define the visual identity, followed by the design of a UI kit with ready-to-use visual components, and finally, the implementation.