Console

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.

Style guide and the SeMI brand

  1. Our brand and its values
  2. Logo
  3. Color palette
  4. Typography
  5. Iconography
  6. Layout
  7. Animation and transitions
  8. Email newsletter

Atoms and molecules

  1. Form elements
  2. Lists
  3. Media
  4. Tags

Organisms

  1. Breadcrumbs
  2. Cards
  3. Footer
  4. Header & main navigation
  5. Notifications and information provision
  6. Search interface
  7. Table of contents
  8. Tables

Templates

  1. Page structure

Miscellaneous components

  1. Unique homepage components
  2. Unique knowledge base components
  3. Background patterns