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

For images with its smallest dimension under 80px, use an 16px radius on corners. If the smallest dimension is over 80px, use 24px corner radiuses.

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.