wellcomecollection / wellcomecollection.org

🪟 Wellcome Collection's website and services that support it
https://wellcomecollection.org
MIT License
39 stars 5 forks source link

Compare cardigan to Trust design system #10786

Closed skibinska closed 6 months ago

skibinska commented 6 months ago

Trust - design system Collection - cardigan

skibinska commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

Screenshot 2024-04-12 at 14 18 11
skibinska commented 6 months ago

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 commented 6 months ago

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 Screenshot 2024-04-10 at 16 20 52
a11YVisual Screenshot 2024-04-10 at 16 20 57
addToClipboard Screenshot 2024-04-10 at 16 21 00
archive Screenshot 2024-04-10 at 16 21 04
arrow right Screenshot 2024-04-10 at 16 19 34 Screenshot 2024-04-10 at 16 19 28
small arrow right Screenshot 2024-04-10 at 16 26 04 Screenshot 2024-04-10 at 16 24 27
article / news Screenshot 2024-04-10 at 16 43 49 Screenshot 2024-04-10 at 16 24 30
attach Screenshot 2024-04-10 at 16 24 33
audio Screenshot 2024-04-10 at 16 24 36
audioDescribed Screenshot 2024-04-10 at 16 24 39
bell Screenshot 2024-04-11 at 14 06 08
book Screenshot 2024-04-10 at 16 24 42
bookmark Screenshot 2024-04-10 at 16 24 45
britishSignLanguage Screenshot 2024-04-10 at 16 31 50
calendar Screenshot 2024-04-10 at 16 47 59 Screenshot 2024-04-10 at 16 31 54
calendar add Screenshot 2024-04-11 at 13 49 55
calendarAdded Screenshot 2024-04-10 at 16 48 19 Screenshot 2024-04-10 at 16 31 57
callout Screenshot 2024-04-11 at 14 16 54
cc Screenshot 2024-04-11 at 11 16 09
cc Screenshot 2024-04-11 at 11 16 16
chat Screenshot 2024-04-10 at 16 32 19
check Screenshot 2024-04-11 at 14 22 40 -> Not part of the design system, but visible on the website. Screenshot 2024-04-10 at 16 32 24
chevron Screenshot 2024-04-10 at 16 50 06 Screenshot 2024-04-10 at 16 32 28
chevrons Screenshot 2024-04-10 at 16 42 19
citation Screenshot 2024-04-10 at 16 42 22
clear Screenshot 2024-04-10 at 16 53 09 Screenshot 2024-04-10 at 16 42 25
clock Screenshot 2024-04-10 at 16 54 13 Screenshot 2024-04-10 at 16 42 28
clone Screenshot 2024-04-11 at 13 51 16
close nav Screenshot 2024-04-11 at 13 30 22
closedCaptioning Screenshot 2024-04-10 at 16 42 31
code Screenshot 2024-04-10 at 16 42 33
collapse Screenshot 2024-04-10 at 16 42 37
comments Screenshot 2024-04-10 at 17 01 49 Screenshot 2024-04-10 at 16 42 40
cookies Screenshot 2024-04-10 at 16 58 03 Screenshot 2024-04-10 at 16 42 43
copyEmail Screenshot 2024-04-10 at 16 42 46
course Screenshot 2024-04-11 at 13 56 36
credits Screenshot 2024-04-11 at 13 56 54
cross Screenshot 2024-04-10 at 16 59 55 Screenshot 2024-04-10 at 16 42 48
delete Screenshot 2024-04-11 at 13 32 51
digitalImage Screenshot 2024-04-11 at 12 06 21 Screenshot 2024-04-10 at 16 42 52
document Screenshot 2024-04-10 at 17 04 34
download Screenshot 2024-04-10 at 17 08 20 Screenshot 2024-04-10 at 17 04 37
edit Screenshot 2024-04-10 at 17 08 26 Screenshot 2024-04-10 at 17 04 39
email Screenshot 2024-04-10 at 17 09 27 Screenshot 2024-04-10 at 17 04 41
embed Screenshot 2024-04-10 at 17 04 44
empty circle Screenshot 2024-04-11 at 13 34 40
exclamation Screenshot 2024-04-10 at 17 09 14 Screenshot 2024-04-10 at 17 04 47
expand Screenshot 2024-04-11 at 08 56 01
eye Screenshot 2024-04-11 at 11 21 14 Screenshot 2024-04-11 at 12 14 09 Screenshot 2024-04-11 at 08 56 04
facebook Screenshot 2024-04-11 at 11 34 21 Screenshot 2024-04-11 at 08 56 08
family Screenshot 2024-04-11 at 11 54 22 Screenshot 2024-04-11 at 08 56 11
filter Screenshot 2024-04-11 at 08 56 15
flag Screenshot 2024-04-11 at 13 35 22
flask Screenshot 2024-04-11 at 13 57 28
folder Screenshot 2024-04-11 at 08 56 20
form Screenshot 2024-04-11 at 13 58 12
funding Screenshot 2024-04-11 at 13 58 45
gallery Screenshot 2024-04-11 at 11 38 02 Screenshot 2024-04-11 at 08 59 51
galleryFilled Screenshot 2024-04-11 at 08 59 55
gridView Screenshot 2024-04-11 at 11 55 01 Screenshot 2024-04-11 at 08 59 58
headphones Screenshot 2024-04-11 at 13 59 23
hearingLoop Screenshot 2024-04-11 at 09 00 01
home Screenshot 2024-04-11 at 14 00 04
image Screenshot 2024-04-11 at 11 23 51 Screenshot 2024-04-11 at 09 00 04
indicator Screenshot 2024-04-11 at 09 00 08
info Screenshot 2024-04-11 at 11 35 00 Screenshot 2024-04-11 at 09 06 05
instagram Screenshot 2024-04-11 at 11 41 22 Screenshot 2024-04-11 at 09 04 56
job Screenshot 2024-04-11 at 14 17 47
journal / pdf Screenshot 2024-04-11 at 09 04 59 Screenshot 2024-04-11 at 09 13 38
lifts Screenshot 2024-04-11 at 09 05 02
likes Screenshot 2024-04-11 at 11 24 28 Screenshot 2024-04-11 at 09 05 05
link Screenshot 2024-04-11 at 11 24 09 Screenshot 2024-04-11 at 09 08 40
linkedin Screenshot 2024-04-11 at 14 14 06
listView Screenshot 2024-04-11 at 09 08 43
location Screenshot 2024-04-11 at 11 24 14 Screenshot 2024-04-11 at 09 08 46
lock Screenshot 2024-04-11 at 13 36 06
map Screenshot 2024-04-11 at 09 08 49
memberCard Screenshot 2024-04-11 at 09 08 53
message Screenshot 2024-04-11 at 09 08 56
minus Screenshot 2024-04-11 at 11 22 09 Screenshot 2024-04-11 at 09 13 23
more Screenshot 2024-04-11 at 13 36 53
music Screenshot 2024-04-11 at 09 13 25
mute Screenshot 2024-04-11 at 11 22 39 Screenshot 2024-04-11 at 09 13 28
nav Screenshot 2024-04-11 at 13 37 44
network Screenshot 2024-04-11 at 09 13 32
open external Screenshot 2024-04-11 at 13 38 30 Screenshot 2024-04-11 at 13 41 07 -> Not part of the design system, but visible on the website.
org arrow Screenshot 2024-04-11 at 14 00 36
pause Screenshot 2024-04-11 at 11 23 07 Screenshot 2024-04-11 at 09 13 35
phone Screenshot 2024-04-11 at 11 42 17 Screenshot 2024-04-11 at 10 51 24
picture Screenshot 2024-04-11 at 10 51 28
pin Screenshot 2024-04-11 at 14 02 21
play Screenshot 2024-04-11 at 11 23 13Screenshot 2024-04-11 at 11 23 17 Screenshot 2024-04-11 at 10 51 31
plus Screenshot 2024-04-11 at 11 36 19 Screenshot 2024-04-11 at 10 51 35
power Screenshot 2024-04-11 at 13 45 08
print Screenshot 2024-04-11 at 11 37 04 Screenshot 2024-04-11 at 10 51 38
question Screenshot 2024-04-11 at 13 45 54
refresh Screenshot 2024-04-11 at 10 51 41
reporting Screenshot 2024-04-11 at 14 03 16
reply Screenshot 2024-04-11 at 14 07 26
request Screenshot 2024-04-11 at 10 51 44
rotate360 Screenshot 2024-04-11 at 10 51 47
rotate Screenshot 2024-04-11 at 10 56 30
saveTo Screenshot 2024-04-11 at 10 56 35
scroll Screenshot 2024-04-11 at 10 56 39
search Screenshot 2024-04-11 at 11 23 28 Screenshot 2024-04-11 at 10 56 42
settings Screenshot 2024-04-11 at 13 46 34
share Screenshot 2024-04-11 at 10 56 46
singlePage Screenshot 2024-04-11 at 10 56 49
smartphone Screenshot 2024-04-11 at 10 56 53
snowflake Screenshot 2024-04-11 at 11 00 43
sort Screenshot 2024-04-11 at 11 49 49 Screenshot 2024-04-11 at 11 00 45
soundCloud Screenshot 2024-04-11 at 11 34 38 Screenshot 2024-04-11 at 11 00 49
other podcast icons Screenshot 2024-04-11 at 14 15 28 Screenshot 2024-04-11 at 14 15 34
speechToText Screenshot 2024-04-11 at 11 00 52
star Screenshot 2024-04-11 at 14 07 19
star circle Screenshot 2024-04-11 at 14 18 41
submit Screenshot 2024-04-11 at 13 47 24
tag Screenshot 2024-04-11 at 14 03 56
text Screenshot 2024-04-11 at 14 04 35
threeD Screenshot 2024-04-11 at 11 00 55
tickCircle Screenshot 2024-04-11 at 11 36 50 Screenshot 2024-04-11 at 11 00 58
ticket Screenshot 2024-04-11 at 11 25 01 Screenshot 2024-04-11 at 11 01 05
ticket variants Screenshot 2024-04-11 at 11 01 47
toggle dark/light mode Screenshot 2024-04-11 at 14 44 53 -> Not part of the design system, but visible on the website.
topic Screenshot 2024-04-11 at 14 05 18
tree Screenshot 2024-04-11 at 11 24 01 Screenshot 2024-04-11 at 11 09 03
tripadvisor Screenshot 2024-04-11 at 11 09 06
tumblr Screenshot 2024-04-11 at 11 09 10
twitter Screenshot 2024-04-11 at 11 34 27 Screenshot 2024-04-11 at 11 09 14
unavailable Screenshot 2024-04-11 at 11 12 14
underConstruction Screenshot 2024-04-11 at 11 12 17
update Screenshot 2024-04-11 at 13 48 16
upload Screenshot 2024-04-11 at 13 48 19
user Screenshot 2024-04-11 at 11 34 32 Screenshot 2024-04-11 at 14 01 36 Screenshot 2024-04-11 at 11 12 20
vegetarian Screenshot 2024-04-11 at 14 19 32
video Screenshot 2024-04-11 at 11 12 23
volume Screenshot 2024-04-11 at 11 23 36 Screenshot 2024-04-11 at 11 12 26
volumeMuted Screenshot 2024-04-11 at 11 22 39 Screenshot 2024-04-11 at 11 12 30
website Screenshot 2024-04-11 at 11 15 34
wellcome Screenshot 2024-04-11 at 14 22 17 -> Not part of the design system, but visible on the website. Screenshot 2024-04-11 at 11 15 38
wifi Screenshot 2024-04-11 at 11 15 41
youtube Screenshot 2024-04-11 at 11 45 52 Screenshot 2024-04-11 at 11 15 44
zoom Screenshot 2024-04-11 at 11 15 48
skibinska commented 6 months ago

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

Screenshot 2024-04-12 at 09 46 57
skibinska commented 6 months ago

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

Screenshot 2024-04-12 at 14 23 21
skibinska commented 6 months ago

Transition

Trust - design system Collection - cardigan
transition-duration 0.2s
transition-duration-fast 0.4s
skibinska commented 6 months ago

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 commented 6 months ago

Z-index

Trust - design system Collection - cardigan
low 1
medium 5
high 10
header 200
modal 500
skibinska commented 6 months ago

Button

Figma: buttons cardigan

Trust - design system Collection - cardigan
Primary Screenshot 2024-04-12 at 11 20 36 Screenshot 2024-04-12 at 11 28 01
Primary - hover Screenshot 2024-04-12 at 11 20 42 Screenshot 2024-04-12 at 11 28 07
Primary - focus Screenshot 2024-04-12 at 11 20 48 Screenshot 2024-04-12 at 11 28 12
Primary - disabled Screenshot 2024-04-12 at 12 02 33
Primary alternative Screenshot 2024-04-12 at 11 42 40
Primary alternative - hover Screenshot 2024-04-12 at 11 42 47
Primary alternative - focus Screenshot 2024-04-12 at 11 49 15
Secondary Screenshot 2024-04-12 at 11 22 33 Screenshot 2024-04-12 at 11 33 47
Secondary - hover Screenshot 2024-04-12 at 11 22 38 Screenshot 2024-04-12 at 11 33 51
Secondary - focus Screenshot 2024-04-12 at 11 22 43 Screenshot 2024-04-12 at 11 33 57
Secondary - disabled Screenshot 2024-04-12 at 12 03 31
Tertiary Screenshot 2024-04-12 at 11 23 43 Screenshot 2024-04-12 at 11 35 37
Tertiary - hover Screenshot 2024-04-12 at 11 23 48 Screenshot 2024-04-12 at 11 35 42
Tertiary - focus Screenshot 2024-04-12 at 11 23 53 Screenshot 2024-04-12 at 11 35 47
Tertiary - disabled Screenshot 2024-04-12 at 12 04 16
Tertiary alternative Screenshot 2024-04-12 at 11 39 37
Tertiary alternative - hover Screenshot 2024-04-12 at 11 39 42
Tertiary alternative - focus Screenshot 2024-04-12 at 11 39 49
Link Screenshot 2024-04-12 at 11 25 22 Screenshot 2024-04-12 at 11 56 08
Link - hover Screenshot 2024-04-12 at 11 25 26 Screenshot 2024-04-12 at 11 58 59
Link - focus Screenshot 2024-04-12 at 11 25 33 Screenshot 2024-04-12 at 11 59 47
Link alternative Screenshot 2024-04-12 at 11 54 49
Link alternative - hover Screenshot 2024-04-12 at 11 54 54
Link alternative - focus Screenshot 2024-04-12 at 11 55 08

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

Screenshot 2024-04-12 at 14 03 50

skibinska commented 6 months ago

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 Screenshot 2024-04-12 at 12 09 57 Screenshot 2024-04-12 at 12 09 09
Primary - icon on the right Screenshot 2024-04-12 at 12 10 08 Screenshot 2024-04-12 at 12 09 18
Primary - only icon Screenshot 2024-04-12 at 12 28 06 Screenshot 2024-04-12 at 12 28 22
skibinska commented 6 months ago

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 Screenshot 2024-04-12 at 12 20 23 padding: 8px 12px;
Button medium / default Screenshot 2024-04-12 at 12 22 35 Screenshot 2024-04-12 at 12 19 42 Trust: padding: 0 16px;, Collection: padding: 13px 20px;