Design system: integrations

[skibinska]

I would like to do some exploration to understand how the current design systems are implemented, what tools or frameworks the product uses for their styles, and how the components are implemented.

The list of projects:

• wellcome collection
• wellcome.org
• Funding platform
• Trustnet
• Insights & Data Finder
• Funding search (For those with Grants data access only)

[skibinska]

Summary

Project name	CSS	JS	DS adaptation
wellcome collection	styled components	Next.JS 13	Cardigan fully used
wellcome.org	SCSS*	Next.JS 13	WT design tokens, Icon, Button + custom button
Funding platform	tailwind css	Next.JS 14	documented WT design tokens, Icon, custom button
Insights & Data Finder	tailwind css	Next.JS 14	some of the WT design tokens, Icon + custom icons, custom button
Funding search	tailwind css	Next.JS 14	some of the WT design tokens, Icon, custom Button
Trustnet	tailwind css	vanilla JS / Drupal	documented WT design tokens, custom icons, custom button

*There is a pull request for implementing Tailwind CSS into the project, but the work is currently suspended.

By documented WT design tokens, we are referring to the tokens found in the DS Storybook.

[skibinska]

Miro board with exploration