Skip to content

Instantly share code, notes, and snippets.

@fabriciofmsilva
Created May 30, 2019 18:21
Show Gist options
  • Save fabriciofmsilva/4b8d4e7ec08935dfa5250e4ee4a52125 to your computer and use it in GitHub Desktop.
Save fabriciofmsilva/4b8d4e7ec08935dfa5250e4ee4a52125 to your computer and use it in GitHub Desktop.
Design System

Design System

Typography

  1. The typeface (font-family) you want to use
  2. Type (modular) scale
  3. Responsiveness of the text (size unit and breakpoints)
  4. Spacing and vertical rhythm
  5. Colors (theming)

The primary font, in this case, is the “most used” font; or the body font. The secondary font can be applied, for example, to a heading element.

The modular scale is a set of values obtained from a base value (in our case, 1em) and a ratio, or multiplier ( — text-scale-ratio). You can apply the scale to any measurable element (margin, paddings, etc.).

Spacing

  1. Set a base value, or baseline -> e.g., 24px
  2. Generate a set of values that are multiples of the baseline
  3. Use these values to generate consistent spacing between elements

Grid & Layout

  1. Layout with an auto-generated number of columns — using CSS Grid
  2. One-dimensional layout — using Flexbox
  3. Two-dimensional layout — using CSS Grid
  4. Two-dimensional layout with overlapping elements — using CSS Grid

Colors

  1. The color variables have to be easy to remember → You don’t want to check the global file anytime you have to pick a color.
  2. The system has to be easy to update → You will add, remove, and rename colors. Make sure doing so is not complicated.
  3. The system should include only the essential colors → we’ve heard this one so many times…yet we always end up with more colors than we need! The real success key of a design system is removing all that is not necessary (colors included).

Semantic vs Declarative colors

The essential color palette

  1. The main/primary color → used for the links, the button background color, etc. In general, it’s the main call-to-action color.
  2. The accent color → used to highlight something important on the page. It shouldn’t be a variation of the primary color, but a complementary color.
  3. A scale of neutral colors → It’s generally a scale of grayscale tones, to be used for text elements, subtle elements, borders, etc.
  4. Feedback colors → success, error, warning.

Some of these colors need a variation (darker/lighter version), often used to highlight interactivity (e.g., :hover/:active states).

Semantic colors are added to the mix for three main reasons

  1. The _colors.scss file becomes the source of truth anytime you need to modify a color. Do you feel the text heading elements should be darker? Open the _colors.scss file and edit the color-text-heading variable.
  2. If you define a color-border, for example, then you won’t need to look up which gray color you’ve been using in other components the next time you create a border element. The same concept applies to many elements, not just borders.
  3. It makes it a piece of cake to create and maintain different themes.

Theming

  1. Option 1 is updating CSS variables anyway. Browsers that don’t support variables will show the “default” color theme. This is not an issue, as long as the content is accessible.
  2. Option 2 would be targeting all elements whose appearance is affected by the theme. The advantage of this method is that it’s supported by all browsers. However, it’s not as easy to maintain compared to the one based entirely on CSS variables.

Spacing

Step one of setting a spacing system is creating a scale of (spacing) values. To create a scale of non-linear values you need 1) a unit or base value and 2) a multiplier.

Icons

  • Integrating icons into your design system
  • Classes for icon sizes
  • Icon style variations
  • Aligning icons to text

Buttons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment