How do you create a style guide for a web project?

Question

User interface

Fellow designers, how do you create your own typography system for each project? How do you choose specific font sizes for body text, headings, buttons, etc., etc.?
I have now grown up to create a single master file with all interface elements - typography, icons, buttons, inputs, etc., and then use it in all projects, changing, for example, the family, font, colors, etc. .
Interested in how you approach this issue. How do you choose colors? What standard shades do you use (for example, gray with gradations or some special gray tinted with the brand color)? How do you standardize your work from project to project?
The questions apply to all UI/UX designers, but even more so to those who work in Sketch, because it provides huge benefits for such standardization.

Answer 1

Um, for each project, what suits it is selected.
If this is some kind of media, then you need to look towards serif fonts, for example, because they are more intended for reading. Well, often a serif- or slab-font creates a mood that cannot be conveyed by ordinary sans. The font, most likely, is selected from Google Fonts and one where there is a sufficient number of styles.
If this is some kind of promo, then there is definitely something sans and very bold. In short, everything depends on the task.
The font size is also selected not by the “let it be 13pt” method, but simply by making different sizes in the layout, different leading and looking at what reads better, what looks neater, how different fonts in different blocks work with each other.
Color, of course, according to the mood of the site or the client's guidebook (if any). Well, etc.
In short, it seems to me that you have confused warm with soft. The design system and design as such is like a knife and a fork - they are about different things, but when they get together, then it is more convenient to eat.

Answer 2

Perhaps something will help:
https://guides.kontur.ru/
https://buffer.com/style-guide
www.bbc.co.uk/guidelines/futuremedia
https://www.starbucks.com/static /reference/styleguide/
https://experience.sap.com/guidelines/

Answer 3

Your question is not entirely correct - decide whether you are interested in the methods of choosing the color of the sizes or the technology of preparing the styles itself. For the first, there are tons of books / courses / lessons / after all personal taste. For the second, for example, there are several articles here: sketchapp.me
In particular , sketchapp.me/poshagovoe-rukovodstvo-po-sozdaniyu-n...

Answer 4

Usually everything is individual. For example, I came to what I do in the sandbox, different options for sections for the site that are unchanged. Such as adb topbar header navbar sidebar footer.. , contact menu card subscribe.. blocks and smaller elements like link styling and so on.
And then I found out that this is called atomic development) https://habrahabr.ru/post/249223/
You can also draw inspiration from styleguides.io