Layout is the art of organization, information and whitespace.

Principles

Pure

Purist grid-based layout is functional; balancing flexibility with simplicity, symmetry with asymmetry. The grid helps the user find harmony in the information we transport.

Empathetic

Our grid is our foundation of written communication, which makes it important for it to be flexible enough so we can get the most out of different types of information.

Ambition

The ambition of our layout is to transport information to the viewer in a way that is understandable and engaging. Content can be arranged within the grid to span multiple columns and should take both functionality (reason, readability and legibility) and aesthetics (use of whitespace and visual interest) into consideration.

example layout

To reach a good balance means we need to consider the purpose of each layout and refine it to ensure the quality of both information and space. To achieve aesthetic quality, we welcome the use of asymmetric layouts whenever possible (without being inconsiderate for the content) to add artistic quality to our information.

Concepts

The following concepts are relevant to layouting:

Layout Container

layout container

The Layout Container separates content and the left/right edges of the screen with a small gutter, keeps content centered, and ensures content does not grow larger than 1300px.

All content has to be placed within a Layout Container. Only non-content like background patterns may be placed outside.

The Layout Container grows fluidly with the screen, peaking out at 1300px width. It has a left/right gutter of $space-m (20px).

layout container with gutters

Layout Grid

The layout grid dictates the position and alignment of typography, images and other elements. The layout grid is a tool to create harmonious and visually engaging compositions.

It is spanning the whole width of the Layout Container. Its function is to create strong alignment among elements on the page, and to deal with major layout patterns, like creating a 3 column layout.

layout grid

The grid has 12 grid tracks, which are separated each by $space-gutter (20px) gutters. If the Layout Container is displayed at full width (1300px), each grid track will have a width of 90px.

layout grid fail

A bad example of an element not following the Layout Grid.

All major elements should follow the Layout Grid. Elements further down the hierarchy, for example within in a card, will usually stop following the grid and instead adhere to the concept of inline:

Inline

Inline layouts refer to elements being placed horizontally next to each other, that are not adhering to the layout grid. It is most often used for horizontally placed elements with varying widths, for example a list of tags, breadcrumb links, or 2 buttons.

layout inline

While the card itself does follow the Layout Grid, the buttons nested within do not - they are considered to be inline.

Inline layouts are usually found on the lower (detail) levels of the composition.

Stack

Stack layouts are such where elements are placed vertically on top of each other.

layout stack

Elaboration

Layout plays an important role in the brand identity of Kisi. It’s an element that is responsible for two aspects; transporting information and creating compositions. The ambition of the brand identity is to remove unnecessary decoration and refine the foundation to a level of quality that will last for years to come, the compositions of content itself needs to be perfected to achieve this kind of longevity.

Aesthetics

To pursue both functional and aesthetic compositions we need to respect both the content itself and the visual aspects of layout. And just as important it is for typography to transport the written content to the user is space (or whitespace) for layout. Without space, our layout compositions will feel cluttered and claustrophobic. Too much space, and the layout feels either scarce or simply too artistic.

When in harmony, we get aesthetically pleasing, timeless compositions with the power to communicate the professionalism and aspirations of Kisi as a leader figure in the industry; being able to inform, educate and aid our users when it comes to their informational requirements.

Layout grid

When it comes to the layout grid itself, we chose to go for a 12 column construction. 12 tracks is very flexible since it’s divisible by 2, 3, 4 and 6 – giving us many layout options for how we can organize content in the layout.

Layout container

Also on the topic of flexibility is our layout container, the parent container of the layout grid. The container itself is wide, and at a maximum width of 1300px it improves the flexibility of the layout by making as much of the screen as possible available for layout. Many companies go for a narrow container, which is easier to maintain because you need less adaptations for large screens, but it’s also limiting the layout possibilities which means that it’s very difficult to create high quality, timeless layouts.

Tokens

Token

Value

$layout-grid-track-amount

12

$layout-grid-track-size-max

5.625rem

$layout-grid-track-size-max-px

90px

$layout-grid-track-size-max-raw

90

$layout-container-size-max

81.25rem

$layout-container-size-max-px

1300px

$layout-container-size-max-raw

1300

About Laika Design System

Kisi Inc.

45 Main Street

11201 Brooklyn

USA

Kisi wordmark

Laika is Kisi’s design system for getkisi.com. Together with the new visual language of Kisi, this system activates the first milestone of the new brand together with working code, design tools and guidelines for getkisi.com.