How to Create a Design System

by Sarah Yukino Nakada ⦁ Dec 16, 2023 Design System

  1. Colors

    Color Design

    1. Color System

      1. RGB: It’s used by computers/screens, use it if you’re a developer/designer.
      2. CMYK or RYB: It’s used for paints, use it for ink.

    2. Properties

      1. Hue: Red, Magenta, Blue, Cyan, Green, Yellow (temperature).
      2. Value: How dark (shaded) or bright (tinted) a color is.
      3. Saturation: The intensity of the color from vivid to grayish (toned).

    3. Color Scheme:

      1. Monochromatic: Used for minimal and less distracting designs.
      2. Analogous: Colors next to each other on the color wheel.
      3. Complimentary: Colors on the opposite side of the color wheel.
      4. Split-Complimentary: One primary color and two secondaries on the opposite side.
      5. Triadic: Forms a triangle on the color wheel.

    4. Color Psychology

      1. Yellow: Joy, Optimism, Fresh.
      2. Orange: Warmth, Enthusiasm, Creativity.
      3. Red: Passion, Power, Danger.
      4. Purple: Royal, Luxury, Wisdom.
      5. Blue: Trust, Confidence, Calm.
      6. Green: Nature, Safety, Balance.

    5. Color Categories

      1. Fluorescent Tones: Extremely saturated and tinted colors. S: 100-63, V: 100-82.
      2. Neutral Tones: Extremely desaturated and tinted colors. S: 1-10, V: 99-70.
      3. Earth Tones: Moderate saturation and shaded. S: 36-41, V: 77-36.
      4. Pastel Tones: Low saturation and tinted colors. S: 14-21, V: 89-96.
      5. Jewel Tones: Highly saturated and tinted. S: 83-73, V: 76-56.
      6. Shades: Black and White. S: 0, V: 100-0.

    6. The 60/30/10 Rule

      1. The distribution of colors throughout the design should be 60% Primary color, 30% Secondary color and 10% Accent color. In case you have more colors with the same role then divide the percentages equally in respect to each role.

  2. Typography

    Type Properties

    1. Properties

      1. Serif: A small stroke at the beginning or the end of the stroke on the letter.
      2. Weight: Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black.
      3. Style: Angled, true italics letters a, f, and g, are much different than non-italics.
      4. Letter Spacing: Space between letters, also known as tracking.
      5. X-height: The height of the lowercase in proportion to the uppercase letter.
      6. Character Width: Average, Condensed, Extended.
      7. Stroke Contrast: The difference between the thicker and thinner strokes.

    2. Classification

      1. Serif: Has serif, Old Style, Transitional, Neoclassic, Slab.
      2. Sans Serif: Does not have serif, Grostesque, Humanist, Geometric.
      3. Handwriting: Mimics handwritten, Blackletter, Script, Handwriting.
      4. Display: Great diversity, decorative, only works with large point sizes.
      5. Monospace: All letters have the same width, no letterspacing, used for code.

    3. Legibility

      1. The line height (spacing or leading) should be between 1.15 and 1.50 times the font size.
        Bigger for smaller fonts and smaller for big fonts (display).
      2. The letter spacing should be bigger for smaller fonts and smaller for bigger fonts.
      3. The paragraph spacing should be between 0.75 and 1.25 times the font size.
      4. Line length should be between 45 and 70 characters.
      5. More x-height makes it more legible, around 80%.
      6. More stroke contrast is more difficult to read.
      7. The average character width is easier to read.
      8. Sentence case is easier to read.