Design Guide

Design Guide (in progress)

If you plan on contributing a new feature/change please give this document a read to familiarize yourself with the current design ethos and standards. Try to fit your idea within the current schema. However if you have a major change to suggest, please open an issue and it can be discussed.

Playground

Settings bar

The settings bar contains settings and options for various aspects of the playground. It is divided into three sections screen settings, project/playground settings, engine settings.

Menus open horizontally and are collapsible to allow the user to hide away what they do not need to see particularly important during live performance.

Settings bar styling notes:

• Menu launcher buttons, should all have three dots underlining them. This is to differentiate them from normal buttons.
• All buttons in the settings bar should have an SVG icon not text.

Sidebar

The sidebar serves two functions. Launching widgets and toggling devices. It contains two types of launchers, those that launch a widget directly and those that launch menus.

Sidebar styling notes:

• Menu launchers are indicated with a small triangular icon that appears when the button is hovered and when it is opened. this is to differentiate from buttons that launch widgets/devices directly.
• All buttons in the sidebar should have an SVG icon not text.

Context bar

The context bar is used to display item properties of the most recently focused (selected) widget in the dashboard. It also displays the save status of the currently open project. Any additional widget properties that are added should be displayed here.

Dashboard area

"Everything is a widget". We call all items/windows in the main dashboard area widgets

Overlays/Modals

Overlays are for displaying temporary pop ups of information or additional functionality.

Common use cases include:

• Asking for confirmation for some action (such as clearing a project dashboard)
• Displaying warnings, indication that something is loading.
• Data entry for some task that doesn't remit a totally new page. (eg editing profile)

Styling notes:

• Overlays that require user input, ie confirmation buttons, text boxes with data entry etc. These should have a partially transparent background colour to provide contrast.
• Overlays that simply provide infomation (such as loading bars, warnings) these should have a fully transparent background.

Colour palette.

Light Background: #3a4147

• (used as background in playground etc)

Primary dark:#262a2e

• (Used for widgets etc)

Dark overlay: #212529

• (For sidebar menus, to stand out over the top of the primary two colours above)

Dark selection: #181a1d

• (for showing something is selected, such as in docs and context bar buttons in playground)

Icons

• We use bootsrap icons for the majority of icons.

CSS styling

General styling notes:

• 5px border radius

Buttons

Buttons are generally styled as follows.

.button-dark {
        padding: 20;
        background-color: #262a2e;
        color: grey;
	border: none;
        width: 42px;
  	margin: 8px 8px 8px 8px;
  	border-radius: 5px;
  	background-color: #262a2e;
}

.button-dark:hover {
    color: white;
}

.button-dark:active{
    color: white;
    background-color: #212529;
    border-radius:5px;
    box-shadow: inset 0.25px 0.25px 0.1px 0 #201f1f, inset -0.25px -0.25px 0.1px 0 rgba(255, 255, 255, 0.05);
 }

Dividers

Dividers are used to visibility separate out sections of elements. To see an example look at the settings bar menus and tutorial page navigators. They are styled as slightly shaded insets.

.divider {
    width: 4px;
    border-radius: 2px;
    margin: 0.5em 0px 0.5em 0em;
    box-shadow:inset 1px 1px 1px 0 #201f1f, inset -1px -1px 1px 0 rgba(255, 255, 255, 0.05);
  }