Composition

Overview

The Kin grid system is modular, providing a framework for organized layouts across various applications. Consider these guidelines when creating designs.

Margins

To determine the margin size, use 10% of the smallest side of the design.

Grids

Utilize grids to construct and define layout structures, establish hierarchy, achieve visual balance, and effectively group information.

Logo Placement

The spacing for the logo should generally be less than the margin space. Use your best judgment to ensure that the logo looks optically correct.

Image Containers

To find the correct radius for a frame, take the longest part of the frame and divide it by 20. For designs with multiple containers, calculate the average radius from all frames and apply that value to each image.

Hierarchy

Utilize grids to construct and define layout structures, establish hierarchy, achieve visual balance, and effectively group information.

Product Overlays

To enhance storytelling through our images, incorporate abstract UI elements. The example on the right uses pill-shaped components with content taken from our funnel to illustrate customization in the quoting process.