Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Exercise 2: Create a Design System

Continuing with the previous exercise, create a design system for Alleyoop in Figma based on the visual inventory audit you conducted.

Please make your best guess – keep in mind you are creating a design system based on an existing design, which already has a design system that the original design team created.

For colors, please utilize the eyedropper tool to sample colors from the current design. For typography, please use either one of the following as the closest approximation: DM Sans, Mulish or Work Sans from Google Fonts. For icons, please feel free to either provide screenshot or recreate the icons in Figma yourself. For logos and images/photography/illustration, please screenshot. For buttons, please recreate them for the design system.

The design system should contain the following:

  • Color
    • Primary color palettes
    • Secondary color palettes
    • Tertiary color palettes or highlight colors (if applicable)
    • Neutral colors
  • Typography
    • Typography hierarchy guidelines (how many levels of typography does the brand need?)
    • Font families
    • Font sizes
    • Font weights
    • Line heights (leading)
    • Letter spacing (tracking)
    • Font colors
    • Responsive and mobile typography guidelines
  • Icons
  • Logo
    • Variations and use cases of logo
    • Logo spacing
  • Image/illustrations/photography
    • General image art direction and principles
    • Types of images used
    • Dos and don’ts for images
    • Image examples in context
  • Buttons
    • Primary buttons/links
    • Secondary buttons/links
    • Tertiary buttons/links (if applicable)
    • Different button/links states, which may include default, hover, active,
    • Button sizes

You may reference IBM’s Carbon Design System on how they approached establishing guidelines. Please remember that IBM’s design system is extremely comprehensive as it is a global company. You do not need to go to this extent of detail, but the format of it is a great reference.

Please make sure that when you write design system guidelines, provide values that are actionable (for example, color hex codes, font height in pixels or a relative unit such as em etc.) and explain how to use each of the elements/components as if you are instructing new designers who just joined your team that designed for this particular brand.

Scroll to Top