| Warning | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
Principles
...
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.
Group Zones or regions are formed by groups of nearby modules, both vertically and horizontally, form zones or regions in the layout.
The gutter is the distance between each column or row.
Margins are the space between the content and the edges of the screen.
...
Tables
Actions
Density
Tokens
Spacing
Margin references spacing
Gutter references spacing
Breakpoints