Content comes first

Secondary elements are truly secondary. Using visual elements should always complement the content and user experience. They never detract from it.

Visuals are balanced

Putting together different visual elements creates harmony. Layouts are open and never over-crowded. White space is used intentionally to create balance between content and graphic elements.

Animation is complementary

Motion guides interaction and draws focus throughout a user experience. Animation is applied to secondary elements to further enhance the visual experience.

Dot grid

Dots are paired with horizontal or diagonal pill shapes, repeating on a 4 px grid to create patterns.

Only use one of the predefined grid scales.

Lines only appear diagonally (in 45-degree angles) or horizontally.

The correct grid proportion is 20% pills and 80% dots.


The distance between dots on a grid is 3 times the size of a dot.

Horizontal or diagonal lines are used to connect two dots.

The dot pattern forms a geometric or an organic shape.



The dot grid is fixed and available for use in three sizes: 4 px, 8 px, and 12 px.


A dot grid consists of a single highlight color paired with gray. Highlight color is applied proportionately to ~25% of the dot grid.

Use offering colors only in the context of that particular offering.

Only use highlight color options provided in this guide.

Blending mode

Use blending mode so that dots are visually recessed when used on a full-color background.

Use only the pre-defined blending modes.

Use only the neutral dot grid colors when using blending modes.

Use one of the pre-defined background colors.


Light theme



Dark theme



Dot pattern don’ts

Don’t size outside of the 4px grid and pre-determined scales.

Always pair gray with a single highlight color.

Don’t combine diagonal and horizontal lines in the same grid.

Don’t use vertical lines in the pattern.

Pills don’t terminate between dots.

Don’t use blending modes other than the ones provided.

Don’t make sprinkles.

Never use offering color as a background color.

Don’t change the opacity.


  • Was this Helpful?