Gallery 115 styles

style: layout-grid-broken073Broken gridDesign · UI/UXElements start from a grid but deliberately break out of it and overlap.
style: layout-grid-column-grid07412-column gridDesign · UI/UXThe page is divided into 12 columns, and every element spans a whole number of them.
style: layout-grid-modular075Modular gridDesign · UI/UXColumns and rows divide the page into modules that hold the elements.
style: layout-grid-no-grid076No gridDesign · UI/UXElements are placed freely, without shared alignment lines.
⇆ Adjuststyle: layout-hierarchy-oversized-headline077Oversized headlineDesign · UI/UXThe headline is set extremely large, filling the width of the page.
⇆ Adjuststyle: layout-hierarchy-strong-contrast078Strong scale contrastDesign · UI/UXThe headline is much larger than the body, making the reading order obvious.
⇆ Adjuststyle: layout-hierarchy-subtle079Subtle hierarchyDesign · UI/UXThe headline is only slightly larger than the body, giving a quiet hierarchy.
⇆ Adjuststyle: layout-layering-floating-cards080Floating cardsDesign · UI/UXCards cast soft shadows so they appear to float above the background.
style: layout-layering-overlapping081Overlapping elementsDesign · UI/UXImage, text and shapes partly overlap one another.
style: layout-layering-stacked082StackedDesign · UI/UXCards of the same size are stacked with a small offset.
⇆ Adjuststyle: layout-repetition-card-grid083Card gridDesign · UI/UXIdentical cards repeat in a fixed number of columns.
style: layout-repetition-pattern084Repeating patternDesign · UI/UXThe same motif repeats at a fixed interval.
style: layout-repetition-rhythm085RhythmDesign · UI/UXShapes of different sizes repeat in a set sequence.
style: layout-repetition-tiling086TilingDesign · UI/UXIdentical tiles cover the surface with no gaps.
⇆ Adjuststyle: layout-spacing-generous087Generous paddingDesign · UI/UXGaps between elements and padding inside them are large.
style: layout-spacing-scale0888pt spacing scaleDesign · UI/UXEvery gap and padding is a multiple of 8: 8, 16, 24 or 32.
⇆ Adjuststyle: layout-spacing-tight089Tight spacingDesign · UI/UXGaps between elements and padding inside them are kept small.
style: material-digital-flat-vector090Flat vectorDesign · UI/UXCrisp vector art made only of flat, single-color shapes.
style: shape-abstraction-iconographic091IconographicDesign · UI/UXThe tree becomes a simple pictogram that reads as a symbol.
⇆ Adjuststyle: shape-edge-pill092Pill shapeDesign · UI/UX · 3DCGCapsule shapes whose short ends are full semicircles.
⇆ Adjuststyle: shape-edge-rounded-corners093Rounded cornersDesign · UI/UX · 3DCGRectangles have their corners rounded with one consistent radius.
style: shape-edge-sharp-corners094Sharp cornersDesign · UI/UX · 3DCGRectangles keep crisp 90° corners with no rounding.
⇆ Adjuststyle: shape-edge-soft-edges095Soft edgesDesign · UI/UX · 3DCGShape boundaries are blurred so they fade into the background.
style: shape-volume-isometric096IsometricDesign · UI/UX · 3DCGThe object is drawn from an equal-angle view, with three faces at 30°.