Composition
Overview
Section titled “Overview”The Kin grid system is modular, providing a framework for organized layouts across various applications. Consider these guidelines when creating designs.
Margins
Section titled “Margins”To determine the margin size, use 10% of the smallest side of the design.
Utilize grids to construct and define layout structures, establish hierarchy, achieve visual balance, and effectively group information.
Logo Placement
Section titled “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
Section titled “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
Section titled “Hierarchy”Utilize grids to construct and define layout structures, establish hierarchy, achieve visual balance, and effectively group information.
Product Overlays
Section titled “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.
