DS: Creating Updated DCP Design System

[jessicashanshanhuang]

Context & Purpose

Creating a new design system to align current and future projects to follow. (currently named Streetscape)

We found it difficult to find documentation about what makes up the current design system, causing confusion on what should be used to as DCP's standards. Specifically:

• Were style choices up to accessibility standards?
• What approaches in the design help follow UX best practices?
• How were design tokens generated?

• What Figma libraries should be referenced?

  Our goal is to create one system to make it easier to reference and update things related to Figma and Storybook.

Updated Design System Figma

Common terms used during this process:

• Design System: a set of building blocks and standards that help keep the look and feel of products and experiences consistent
• Design Token: an industry term to refer to reusable values, meant to help design and code stay in sync. Typically, they define values like typography, color, spacing and etc.)
• Figma Component: reusable elements created in figma
• Storybook Component: reusable elements created in storybook that conform to a design style (design style was most likely implemented in figma first)
• Story: in storybook, a story is an interactive state of a component
• ...

[jessicashanshanhuang]

Relevant Links:

• Currently looking at REI's Cedar for inspiration
• Cedar Figma
• Other popular design systems
• Google's Material 3 Design Kit
• Chakra UI Kit

[jessicashanshanhuang]

things to consider:

• adjusting and editing color palette to see if it passes color contrast test
• making sure components like buttons have the same visual states (i.e. when i hover it should show up with these colors and typeface)
• more documentation & more clear definitions of what styles should be used for what designs (i.e. descriptions per section like typographies, colors)
• nice to have is a developer or designer option like how cedar does
• referencing chakra ui kit when creating components

[jessicashanshanhuang]

getting started file

The getting started file consists of initial set up and overall how figma is used in DCP. It will house pages about libraries, colors, and typography. Pages in this file serve as documentations on best practices.

• [x] welcome set up page
• [x] libraries page
• [x] typography page
• [ ] colors page
• [ ] guide for library changelogs on figma

Below is an outline for the design system:

libraries A library in figma hosts shared styles that can be applied to any file. At the starter level, we have six libraries. Libraries can also be created for individual projects (i.e. CPP library) for things that are more customized for that particular tool. For now, we will approach by building six base libraries before going to individual projects.

• [x] color
• [x] typography
• [ ] grid & breakpoints
• [ ] iconography
• [x] prominence and shape (i.e. using effects like drop shadow)
• [ ] spacing
• [ ] web components

• [ ] frames

  typography

• [x] testing current typefaces and font sizes to see if they comply with accessibility standards

  colors

• [x] making sure color contrasts align overall all projects that are currently in progress

Storybook + Figma Compatibility

Figuring out how to connect storybook and figma and understand the capabilities of this connection to see how useful it would be to help bridge design + engineering gap

• figma designs plug-in issue
• looking into how to get design tokens to sync across figma and storybook

[jessicashanshanhuang]

Currently working on the starter pack file, specifically the libraries page, i will create individual issues to create/edit libraries once i finish up setting up the documentation for libraries

[wndyli]

• created tutorial for libraries page, including explanation of chakra ui

[jessicashanshanhuang]

two new git issues have been added: color library and typography library and are currently in progress

[jessicashanshanhuang]

typography library is done and live, colors library and figma + storybook plug-ins are wip

[jessicashanshanhuang]

grid & breakpoint library and design token pipeline in progress, starting up redesign to test current state of our ds