Shape as Media Mask
Cropping Mask Shapes
Extend part of the shape beyond the canvas, but avoid cropping too much, as it may make the shape unrecognizable.
Adding shape as a design element
When incorporating shape elements into enterprise designs, maintain consistency with public designs, but opt for strokes instead of filled shapes.
Due to the subtle visibility of strokes, increase the size of the shape element by 10-20% in enterprise designs.
Use stroke thickness of 3 pixels.
Cropping Mask Shapes
Adding shape as a design element
Examples
Background Color
Use shape mask primarily on a dark grey or white background. In exceptional cases, the shape mask can be applied on a colored background.
Dos & Don'ts
Display at least two corners of the shape to provide the mask with clear definition and make it recognizable as Lumen5 shapes.
Dos & Don'ts
The selection of images significantly influences the effectiveness of the shape. Always choose the appropriate image that fits well inside the shape
Dos & Don'ts
Shape as Text Container
Shape over media as text placeholder
Use only three specific Lumen5 shapes as text placeholders over an images.
Cropping Mask Shapes
Adding shape as a design element
Add a smaller version of the same shape on top of the image.
Ensure that at least half of the shape overlays the image, with the remaining portion extending onto the background.
Maintain the same angle for both the original and smaller shapes.
Adding shape as a design element
Examples :
Shape as Text Container (Text Heavy)
Cropping
Cropping Mask Shapes
Cropping Mask Shapes
Examples :
Single Shape as Background
Single Shape as Background
Limit the background to these four shapes only.
Only these four shapes are permitted for use as a singular background element.
Position and Rotation
Center the shape on the page.
Feel free to rotate it, but ensure that the shape extends beyond the canvas from both the top and bottom.
Position and Rotation
Display at least two corners of the shape to provide the mask with clear definition and make it recognizable as Lumen5 shapes
2 Shapes as Background
Examples :
Shape Combinations
Cropping Shapes
Ensure that when cropping the shape, a minimum of two sides should remain inside the canvas.
Display at least two corners of the shape to provide the mask with clear definition and make it recognizable as Lumen5 shapes
