Compare cardigan to Trust design system

[skibinska]

Trust - design system Collection - cardigan

[skibinska]

Responsive heading sizes (in pixels)

Breakpoints: small - medium - large

	Trust - design system	Collection - cardigan
H0	32 - 34 - 40	32 - 40 - 50
H1	24 - 28 - 32	28 - 32 - 40
H2	22 - 22 - 24	24 - 24 - 28
H3	18 - 18 - 20	18.8 - 21.6 - 21.6
H4	16 - 16 - 16	15.9 - 18 - 18.8
H5	14 - 14 - 14	15 - 15 - 15.9
H6	-	14 - 14 - 14

[skibinska]

Body text sizes (in pixels)

Name	Trust - design system	Name	Collection - GitHub
		'11'	50
		10'	40
		'9'	32
		'8'	28
XL	24	'7'	24
LG	20	'6'	21.6
		'5'	18.8
		'4'	18
MD	16	'3'	15.9
		'2'	15
SM	14	'1'	14
XS	12

[skibinska]

Font families

	Trust - design system	Collection - GitBook
Header font	'Wellcome-Bold', sans-serif	"Wellcome Bold Web", "Wellcome Bold Web Subset", "Arial Black", sans-serif
Sub headers font	'Helvetica Neue', Helvetica, Arial, sans-serif	Inter, sans-serif
Body font - Mac	'Helvetica Neue', Helvetica, Arial, sans-serif	Inter, sans-serif
Alternative for body font*	Helvetica, Arial, sans-serif
Body font - PC	Inter (Not included in the design system, added specifically for PC at the project level, e.g. wellcome.org)	Inter, sans-serif
Monospace	'Courier New', Courier, monospace	"Lettera Regular Web", "Courier New", Courier, monospace

*Alternative for Body font - Mac, this font stack removes odd line-height issue encountered with Helvetica Neue

[skibinska]

Spacing

Static spacing (in pixels)

Scale	Trust - design system	Collection - GitHub code	Scale
XXXL	64	64	'10'
XXL	48	46	'9'
XL	32	32	'8'
	-	30	'7'
LG	24	24	'6'
MD	16	16	'5'
SM	12	12	'4'
XS	8	8	'3'
	-	6	'2'
XXS	4	4	'1'

Responsive spacing (in pixels)

Breakpoints: small - medium - large

Size	Trust - design system	Collection - GitBook docs	Size
XXL	48 - 72 - 96	-	-
XL	32 - 48 - 64	30 - 46 - 64	XL
LG	24 - 32 - 48	-	-
MD	16 - 24 - 32	16 - 24 - 32	L
SM	12 - 16 - 16	8 - 12 - 16	M
XS	8 - 8 - 8	6 - 6 - 8	S
XXS	4 - 4 - 4	4 - 4 - 4	XS

Collection responsive spacing units

[skibinska]

Colour palette

Collection's colours	Trust - design system	Collection - cardigan
white	#fff (--color-white)	#fff
black	#000 (--color-grey-90 and --color-black)	#121212
yellow #121212		Yes
light yellow #ffebad		Yes
purple #724e91		Yes
light purple #baa4cd		Yes
turquoise #1dbebb		Yes
blue #27476e		Yes
light blue #a4bfdf		Yes
green #4f7d68		Yes
light green #9bc0af		Yes
salmon #ff6f59		Yes
light salmon #ff9585		Yes
neutral 200 #fbfaf4		Yes
neutral 300 #e8e8e8		Yes
neutral 400 #d9d9d9		Yes
neutral 500 #8f8f8f		Yes
neutral 600 #6a6a6a		Yes
neutral 700 #323232		Yes
warm neutral 200 #fff9e6		Yes
warm neutral 300 #edece4		Yes
warm neutral 400 #d9d8d0		Yes
error red	#e10f2d (--color-red-60)	#e01b2f
success green	#4c8026 (--color-green-60)	#0b7051
focus yellow #0b7051	Yes (--color-yellow-40), but not used as a focus colour	Yes

[skibinska]

Icons

Both design system icons have the same size, which is 24px x 24px. Additionally, the Trust design system introduces a smaller icon size of 16px x 16px.

Icon name	Trust - design system	Collection - cardigan
a11y
a11YVisual
addToClipboard
archive
arrow right
small arrow right
article / news
attach
audio
audioDescribed
bell
book
bookmark
britishSignLanguage
calendar
calendar add
calendarAdded
callout
cc
cc
chat
check	-> Not part of the design system, but visible on the website.
chevron
chevrons
citation
clear
clock
clone
close nav
closedCaptioning
code
collapse
comments
cookies
copyEmail
course
credits
cross
delete
digitalImage
document
download
edit
email
embed
empty circle
exclamation
expand
eye
facebook
family
filter
flag
flask
folder
form
funding
gallery
galleryFilled
gridView
headphones
hearingLoop
home
image
indicator
info
instagram
job
journal / pdf
lifts
likes
link
linkedin
listView
location
lock
map
memberCard
message
minus
more
music
mute
nav
network
open external		-> Not part of the design system, but visible on the website.
org arrow
pause
phone
picture
pin
play
plus
power
print
question
refresh
reporting
reply
request
rotate360
rotate
saveTo
scroll
search
settings
share
singlePage
smartphone
snowflake
sort
soundCloud
other podcast icons
speechToText
star
star circle
submit
tag
text
threeD
tickCircle
ticket
ticket variants
toggle dark/light mode		-> Not part of the design system, but visible on the website.
topic
tree
tripadvisor
tumblr
twitter
unavailable
underConstruction
update
upload
user
vegetarian
video
volume
volumeMuted
website
wellcome	-> Not part of the design system, but visible on the website.
wifi
youtube
zoom

[skibinska]

Grid

	Trust - design system	Collection - cardigan
grid columns	6 - 12 (sm)	12
grid gutter	12px - 20px (sm) - 40px (md) - 48px (xl)	18px - 24px (sm) - 30px (md)
grid margin	5% - auto (xxl)	18px - 44px (sm) - 60px (md)
grid max-width	1344px	1338px

Trust Design System

[skibinska]

Breakpoint

Breakpoint	Trust - design system
XS	512px
SM	768px
MD	1024px
LG	1200px
XL	1344px
XXL	1500px

Trust system uses sass-mq, an npm package that serves as a Sass mixin.

Collection - GitBook docks

[skibinska]

Transition

	Trust - design system	Collection - cardigan
transition-duration	0.2s
transition-duration-fast	0.4s

[skibinska]

Typography

	Trust - design system	Collection - cardigan
font size base	1rem	1em
font size base in px	16px
heading: font weight	500
heading: letter spacing major	-0.5px
heading: letter spacing minor	0.2px
heading: line height	1.6	1.5 set on body, 1.6 set on .body-text
body: letter spacing	0.4px	0.0044em set on .body-text
body: line height	1.6	1.5 set on body, 1.6 set on .body-text

Collection - GitHub
Font weight	700, 600, 500, 400

[skibinska]

Z-index

	Trust - design system	Collection - cardigan
low	1
medium	5
high	10
header	200
modal	500

[skibinska]

Button

Figma: buttons cardigan

	Trust - design system	Collection - cardigan
Primary
Primary - hover
Primary - focus
Primary - disabled
Primary alternative
Primary alternative - hover
Primary alternative - focus
Secondary
Secondary - hover
Secondary - focus
Secondary - disabled
Tertiary
Tertiary - hover
Tertiary - focus
Tertiary - disabled
Tertiary alternative
Tertiary alternative - hover
Tertiary alternative - focus
Link
Link - hover
Link - focus
Link alternative
Link alternative - hover
Link alternative - focus

It appears that the Trust design system has a different colour theme - to confirm with @j-jaworski Figma: buttons - Trust

[skibinska]

Button with icon

Both systems allow buttons to have icons on both the right and left sides. The example below only shows a primary button with icons in their default state.

	Trust - design system	Collection - cardigan
Primary - icon on the left
Primary - icon on the right
Primary - only icon

[skibinska]

Button sizes

The Collection design system offers two button sizes: small and medium. The Trust design system only has one size.

	Trust - design system	Collection - cardigan	Style
Button small			padding: 8px 12px;
Button medium / default			Trust: padding: 0 16px;, Collection: padding: 13px 20px;