Gallery 196 styles

style: layout-density-dashboard121Information-rich dashboardDesign · UI/UXNumbers, charts and tables sit together in separate panels.
⇆ Adjuststyle: layout-density-dense122DenseDesign · UI/UXMany small elements are packed closely together.
⇆ Adjuststyle: layout-density-sparse123SparseDesign · UI/UXA few elements are spread out with plenty of room.
style: layout-grid-bento124Bento gridDesign · UI/UXRounded tiles of different sizes are packed together like a bento box.
style: layout-grid-broken125Broken gridDesign · UI/UXElements start from a grid but deliberately break out of it and overlap.
style: layout-grid-column-grid12612-column gridDesign · UI/UXThe page is divided into 12 columns, and every element spans a whole number of them.
style: layout-grid-modular127Modular gridDesign · UI/UXColumns and rows divide the page into modules that hold the elements.
style: layout-grid-no-grid128No gridDesign · UI/UXElements are placed freely, without shared alignment lines.
⇆ Adjuststyle: layout-hierarchy-oversized-headline129Oversized headlineDesign · UI/UXThe headline is set extremely large, filling the width of the page.
⇆ Adjuststyle: layout-hierarchy-strong-contrast130Strong scale contrastDesign · UI/UXThe headline is much larger than the body, making the reading order obvious.
⇆ Adjuststyle: layout-hierarchy-subtle131Subtle hierarchyDesign · UI/UXThe headline is only slightly larger than the body, giving a quiet hierarchy.
⇆ Adjuststyle: layout-layering-floating-cards132Floating cardsDesign · UI/UXCards cast soft shadows so they appear to float above the background.
style: layout-layering-overlapping133Overlapping elementsDesign · UI/UXImage, text and shapes partly overlap one another.
style: layout-layering-stacked134StackedDesign · UI/UXCards of the same size are stacked with a small offset.
⇆ Adjuststyle: layout-repetition-card-grid135Card gridDesign · UI/UXIdentical cards repeat in a fixed number of columns.
style: layout-repetition-pattern136Repeating patternDesign · UI/UXThe same motif repeats at a fixed interval.
style: layout-repetition-rhythm137RhythmDesign · UI/UXShapes of different sizes repeat in a set sequence.
style: layout-repetition-tiling138TilingDesign · UI/UXIdentical tiles cover the surface with no gaps.
⇆ Adjuststyle: layout-spacing-generous139Generous paddingDesign · UI/UXGaps between elements and padding inside them are large.
style: layout-spacing-scale1408pt spacing scaleDesign · UI/UXEvery gap and padding is a multiple of 8: 8, 16, 24 or 32.
⇆ Adjuststyle: layout-spacing-tight141Tight spacingDesign · UI/UXGaps between elements and padding inside them are kept small.
style: material-digital-3d-render1423D renderDesign · 3DCGA computer-generated 3D image with smooth shading and soft shadows.
style: material-digital-flat-vector143Flat vectorDesign · UI/UXCrisp vector art made only of flat, single-color shapes.
style: material-digital-toon-shading144Toon shadingDesign · 3DCG3D forms shaded in two or three hard bands with outlines.