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.

• welcome set up page
• libraries page
• 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.

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

typography

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

colors

• 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

[wndyli]

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

[jessicashanshanhuang]

Check off List

• Libraries are published and updated
• Make sure all libraries documentation is up to date and consistent
• Note down design changes to EDDE
• update getting started figma file with instructions about changelog
• update markdown guidelines for design repo
• add a guide to design repo to summarize what is in figma, best practices on how to use figma for designers and developers (i.e. developers should default to dev mode)
• next steps doc: things that we would like to accomplish but do not currently have time for

dependent issues:
#62
#36

Update: Documentation now in main in design, all figma files for streetscape are up to date