ML - Data Visualization Guidance
Desktop: Line chart 7 colors
Fit
25%
50%
75%
100%
150%
200%
Created with Snap
Made with Adobe XD
15 of 88
Link updated: Apr 4, 2023, 7:49 PM
Screen Details
Viewport size
Design size
1920 × 1080
1920 × 2000
Colors
Hex
RGBA
HSLA
#FFFFFF
#D9D9D6
#333333
#A7A8AA
#00ACA0
#3478B7
#DB0A5B
#FFC600
#5F259F
#A4CE4E
#0090DA
#A1CE42
#018EDC
Character Styles
px
pt
dp
DTM-B3 - small
Noto Sans,
Regular - 14px, #333333
Font Family
:
Noto Sans
Font Weight
:
Regular
Font Size
:
14px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
21
DTM-B2 - Base
Noto Sans,
Regular - 16px, #333333
Font Family
:
Noto Sans
Font Weight
:
Regular
Font Size
:
16px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
24
Noto Sans Display, Regular - 18px
Regular - 18px, #333333
Font Family
:
Noto Sans Display
Font Weight
:
Regular
Font Size
:
18px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
27
Desktop-Header-H4
MetLife Circular,
Medium - 32px, #333333
Font Family
:
MetLife Circular
Font Weight
:
Medium
Font Size
:
32px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
48
MetLife Circular, Bold - 40px
Bold - 40px, #333333
Font Family
:
MetLife Circular
Font Weight
:
Bold
Font Size
:
40px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
49
MetLife Circular, Bold - 55px
Bold - 55px, #333333
Font Family
:
MetLife Circular
Font Weight
:
Bold
Font Size
:
55px
Color
:
#333333
Character Spacing
:
0
Line Spacing
:
67
Interactions
Trigger
Tap
Action
Transition
Destination
Desktop: Line chart 7 colors – Dark Mode
Trigger
Tap
Action
Transition
Destination
Chart Types