Published: April 24, 2023
Key takeaways
Follow this style guide to create a cohesive experience across all widget experiences. It is important to implement consistent styling in type, background, and spacing to ensure content is readable and related.
In this article:
The widgets type ramp includes standardized font type and font sizes to display the body content in a glanceable way. This type ramp is designed to scale with the different viewports. Each viewport has its own recommended viewing distance, which has a direct relationship to type size, grid spacing, and spacing values within layouts. The type ramp guidance ensures that text sizes are properly sized for far/near viewing distances and optimized for multimodal CX.
Color
Consistent and contrasting background colors help customers understand information at a glance. The recommended color options below avoids competing with the widget’s content.
Blue linear gradient values are #25485E and #5D9FD3. Grey linear gradient values are #292929 and #777F89.
Photo
If you choose to include a background photo, it is important to ensure all text is legible by providing high contrast between the text and photo. For the best legibility, use a gradient scrim.
To make the design accessible, your color/photo and text should be at 4.5:1 contrast, see Accessibility for more information.
Corner Radius
Corner Radius should be 4 dp for all sides.
Drop Shadow
Drop Shadow value should be X=0, Y=4, B=12, A=30.
Dos & Don'ts
Follow the recommended margins and gutters to adhere to consistent design throughout the Widget experience. See Multimodal Style Guide for more information on margins and gutters.
Margins: 24px on all sides
Space between content and the left and right edges of the screen
Gutters: 16px
Space between columns that helps separate content. Gutter widths are fixed values in each range of the breaking point.
To ensure cohesiveness with the background and designing for widget accessibility, we recommend the following visual treatments per use cases for your brand attribution. These recommendations ensure your logo is identifiable and does not impact the readability of your widget’s contents.
Color options include light (#1E2222) or dark (#FAFAFA) modes.
Dos & Don'ts
Checklist of attribution guidelines:
▢ If the body contains a single content, (e.g., a recipe, photo or text wrapping) the recommended placement of the attribution logo is the bottom left corner of the widget, below the content
▢ If the body has a list of related contents, (e.g., text list) the recommended placement of the attribution logo is below the header
▢ The recommended logo size should be 144 x 35 dp at max