For most people the base of the theme is the favourite part to work on. The base is about color, typography that make up the visual design of the website. We break apart our base design system into several fundamental elements
- Colors
- Typography (size, leading, typefaces, and so on)
- Spacing (margins, paddings, positioning coordinates, border spacing)
- Images (icons, illustrations)
Depending on your needs, you may also include the following to further standardize the user experience:
- Visual form (depth, elevation, shadows, rounded corners, texture)
- Motion
Consider the role each of these design elements plays in a simple component like a button. A button typically has a background color, typography for the label, and spacing inside it. There may be an icon next to the label to create a visual cue. A border on the edge serves as simple ornamentation and may even round the corners. Finally, hovering over or clicking the button could trigger animation or sound as feedback to the user. Though a button may seem simple, there are many design decisions required to bring it to life.
reference
https://programmingdesignsystems.com/