SeMI, its look and feel

SeMI’s visual language is based on primary forms and the use of touches of vibrant and bold colors; they provide the building blocks of SeMI’s visual design. Rounded elements provide an open, friendly, and pleasurable environment.

Emphasis is on clean presentation and an optimal readability of content, whether it be on-boarding information or long-form reading of API documentation.

Liberal use of negative space aids readability and helps focus on the essentials, the ‘meat’ the user is digesting. Consistent vertical rhythm is provided by a modular, repetitive scale of vertical negative space. This, alongside the 12-column grid over the horizontal axis, allows for easy and comfortable ‘scanability’ of content.

Using this style guide

Atomic design

This style guide is set up as a digital component library and follows the Atomic Design principle. Design atoms can be tied together to form molecules, which in turn combine to create organisms and page templates.

HTML code snippets are provided. These can be copied and pasted to form templates from components, and components from atoms and molecules.

SeMI, its look and feel

Using this style guide

Atomic design

Style guide and the SeMI brand

Atoms and molecules

Organisms

Templates

Miscellaneous components