Screen Details
ML - Data Visualization Guidance
Desktop: Bar Chart
Viewport size
Design size
1920 × 1080
1920 × 2000
Colors
- #FFFFFF
- #D9D9D6
- #333333
- #A7A8AA
- #A4CE4E
- #0090DA
- #707070
- #A1CE42
- #018EDC
- #528320
Character Styles
Noto Sans, Regular - 14px
Regular - 14px, #333333
DTM-B2 - Base
Noto Sans, Regular - 16px, #333333
DTM-B3 - small
Noto Sans, Regular - 14px, #333333
Noto Sans Display, Regular - 18px
Regular - 18px, #333333
Helvetica Neue, Regular - 20px
Regular - 20px, #707070
Desktop-Header-H4
MetLife Circular, Medium - 32px, #333333
MetLife Circular, Bold - 40px
Bold - 40px, #333333
MetLife Circular, Bold - 55px
Bold - 55px, #333333
Noto Sans, SemiBold - 16px
SemiBold - 16px, #333333
Interactions
| Trigger | Tap |
| Action | Transition |
| Destination | Tablet: Bar Chart |
| Trigger | Tap |
| Action | Transition |
| Destination | Phone: Bar chart 4 colors |
| Trigger | Tap |
| Action | Transition |
| Destination | Desktop: Bar Chart – Dark Mode |
| Trigger | Tap |
| Action | Transition |
| Destination | Chart Types |
| Trigger | Hover |
| Action | Transition |
| Destination | State: Hover State |
Hold down SHIFT to view all hotspots. SHIFT + Click on hotspots to navigate between screens. Learn More...