Resources
Video component usage
The Video component is used to display actionable video thumbnails and video links within a page. The actual video player is a standalone component available through our proprietary interface called HUI (Harmony User Interface). Use the Video component to:
Display brand-approved video content within the customer E2E
Use a video link to create a lightweight option to include video
Use the video thumbnail as a more visual way of delighting customers
and increase engagement
When not to use it
When embedding video content within a page
To display off-brand or inappropriate video content
Do not use the video thumbnail version if a thumbnail image asset is
not available (via design partner)
Play icon
Adds a visual cue to customers (optional, but recommended).
White gradient overlay
Used to make high contrast images more subtle (optional).
Stroke and drop shadow
Adds more visual prominence and includes a hover effect (optional).
Play icon sizes
Small: 60px X 60px
Medium: 60px X 60px
Large: 80px X 80px
X-Large: 100px X 100px
XX-Large: 120px X 120px
Gradient overlay
Default
Color: #FFFFFF
Opacity: 20% (0.2)
On hover
Color: #FFFFFF
Opacity: 40% (0.4)
Stroke and shadow specs
Stroke
Border: Solid 2px #FFFFFF
Border-radius: 2px
Drop shadow
Box-shadow: 0 4px 8px 0 rgba(0,0,0,0,0.10);
Drop shadow (hover)
Box-shadow: 0 8px 16px 0 rgba(0,0,0,0,0.15);
Motion and animation
The Video component has some subtle animations that are displayed on hover of the video thumbnail.
motion prototype
Image asset creation guidelines
Video thumbnails image assets should be created with the following guidelines:
- Use an optimized JPG for full color images OR use an optimized PNG for product UI-type image assets
- There is no need to round the corners, add drop shadows, add an overlay, or play icon when using this component; those attributes are applied by the component
- Image asset sizes should match the thumbnail sizes below
EXAMPLE (COMPONENT IN USE)
EXAMPLE (ASSET)
Content guidelines
Video links should follow the content guidelines below.
Link
Keep links titles brief, usually two to three words. If a video is less than 60 seconds add a “0:” immediately before the seconds. Example: Create invoice (0:59) or How it works (0:45).
Voice and tone
Recommended voice and tone principals: Keep it simple. Use everyday language. We understand users’ goals and give them just what they need to move forward.