Layout and grids

Layout refers to the arrangement and organization of elements on a digital interface, such as a website, app, or document. It encompasses the structure, spacing, and visual hierarchy that guide the user's experience. A well-designed layout is not only visually appealing but also functional, ensuring that content is easy to find, read, and interact with.

This documentation provides a comprehensive overview of the principles, grids, columns, concepts, and tokens that should be followed when designing and developing layouts within our system.

Principles

These five principles guides our UI designs, the arrangement and organization of elements and components on the UI.

• Hierarchy and emphasis - Prioritize what matters.
  When designing with Kamona,
  
  

• Consistency and unity - Maintain a unified look.
  
  
  

• Balance and symmetry - Compose elements harmoniously
  
  
  

• Minimalist and whitespace - Less is more.
  
  
  

• Accessibility and Inclusivity - Design for everyone.
  
  
  

Grid system

Anatomy

The anatomy of a grid is made up of several elements:

• The format is the entire area where the layout will be displayed.

• Flowlines are horizontal lines that divide the various sections of a grid into parallel bands.

• Columns are vertical divisions or sections that contain the content (12-column grid for desktop, 8-column grid for tablet, 4-column grid for mobile).

• Rows are horizontal divisions or sections of a grid.

• Modules represent spatial units formed by the intersection of rows and columns.

• Zones or regions are formed by groups of nearby modules, both vertically and horizontally

• The gutter is the distance between each column or row.

• Margins are the space between the content and the edges of the screen.

Types

Fixed

Fluid

Devices

Web (mobile, tablet and desktop)

[add research + add link to zeroheight]

POS

[add research + add link to zeroheight]

ePOS

[add research + add link to zeroheight]

Native Mobile (iOS and Andriod)

[add research + add link to zeroheight]

Concepts

Cards and surfaces

Using divider

Tables

Actions

Density

Tokens

Spacing

Margin (references spacing)

Breakpoints