Systemair Logo

UI STYLES

Introduction

All brands of the Systemair Group use this combined design system for user interfaces for apps and websites. The principles, tokens, components and patterns are shared across all brands. Each brand uses a unique flavour of the design system,while staying within the shared structure.

This styles package implements essential parts of the design system for convenient use in web-based projects. The package is built upon Tailwind CSS.

Contact webmaster@systemair.com for any questions.

Design System Documentation in Figma

Familiarise yourself with the full design system in Figma before using this styles package:

Open Design System

UI Styles Package on NPM

Most of the tokens and components of our Design System are implemented in this Tailwind-based UI Styles Package.

  • All new apps are required to be built based on the UI Styles Package, to ensure consistency across all apps of the Systemair group.
  • Existing apps should make use of the UI Styles Package as much as possible. In most apps it can be added with relatively little effort.
Styles Package

Colours

Read how to use colours and see the list of available colours in Figma.

Form Elements

Form Examples

1Coming soon!

Labels

1Coming soon!

Text Input

1<input type="text" defaultValue="Text" className="form-input" />
2<input type="text" placeholder="Placeholder" className="form-input" />

Text Input sizes

1<input type="text" defaultValue="Text" className="form-input" />
2<input type="text" defaultValue="Text" className="form-input form-input-small" />
3<input type="text" defaultValue="Text" className="form-input form-input-tiny" />

Text Input states

1<input type="text" defaultValue="Error" className="form-input form-input-error" />
2<input type="text" defaultValue="Disabled" disabled className="form-input" />

Text Input icons

1<div className="form-input-icon-left">
2  <input type="text" defaultValue="Text" className="form-input" />
3  <FontAwesomeIcon icon={faEnvelope} />
4</div>
5<div className="form-input-icon-right">
6  <input type="text" defaultValue="Text" className="form-input" />
7  <FontAwesomeIcon icon={faSearch} />
8</div>
9<div className="form-input-icon-both">
10  <input type="text" defaultValue="Text" className="form-input" />
11  <FontAwesomeIcon icon={faSearch} />
12  <FontAwesomeIcon icon={faClose} />
13</div>
14<div className="form-input-icon-left">
15  <input type="text" defaultValue="Text" className="form-input form-input-small" />
16  <FontAwesomeIcon icon={faEnvelope} />
17</div>
18<div className="form-input-icon-right">
19  <input type="text" defaultValue="Text" className="form-input form-input-small" />
20  <FontAwesomeIcon icon={faSearch} />
21</div>
22<div className="form-input-icon-both">
23  <input type="text" defaultValue="Text" className="form-input form-input-small" />
24  <FontAwesomeIcon icon={faSearch} />
25  <FontAwesomeIcon icon={faClose} />
26</div>

Number Input

1<InputNumber name="inputNumber1" />

Input number sizes

1<InputNumber name="inputNumberNormal" />
2<InputNumber name="inputNumberSmall" size="small" />
3<InputNumber name="inputNumberTiny" size="tiny" />

Input number states

1<div className="was-validated">
2  <InputNumber name="inputNumber2" />
3</div>
4<div className="was-invalidated">
5  <InputNumber name="inputNumber3" />
6</div>
7<InputNumber name="inputNumber4" disabled />

Select Dropdown

1<Dropdown name="dropdown1">
2  <option>Default</option>
3</Dropdown>

Select Dropdown sizes

1<Dropdown name="dropdownDefault">
2  <option>Default</option>
3</Dropdown>
4<Dropdown name="dropdownSmall" size={INPUT_SIZE.SMALL}>
5  <option>Small</option>
6</Dropdown>
7<Dropdown name="dropdownTiny" size={INPUT_SIZE.TINY}>
8  <option>Tiny</option>
9</Dropdown>

Select Dropdown states

1<Dropdown name="dropdown1">
2  <option>Default</option>
3</Dropdown>
4<div className="was-validated">
5  <Dropdown name="dropdown2">
6    <option>Valid</option>
7  </Dropdown>
8</div>
9<div className="was-invalidated">
10  <Dropdown name="dropdown3">
11    <option>Invalid</option>
12  </Dropdown>
13</div>
14<Dropdown name="dropdown4" disabled>
15  <option>Disabled</option>
16</Dropdown>

Select buttons

Choose one:
1<label className="form-select-button">
2  <input type="radio" name="select-button" />
3  <div className="select-button">
4    <span>Option A</span>
5  </div>
6</label>
7<label className="form-select-button">
8  <input type="radio" name="select-button" defaultChecked />
9  <div className="select-button">
10    <span>Selected option</span>
11  </div>
12</label>
13<label className="form-select-button">
14  <input type="radio" name="select-button" />
15  <div className="select-button">
16    <span>Last resort</span>
17  </div>
18</label>

Select button sizes

1<label className="form-select-button">
2  <input type="radio" name="select-button-size" />
3  <div className="select-button">
4    <span>Default button</span>
5  </div>
6</label>
7<label className="form-select-button">
8  <input type="radio" name="select-button-size" />
9  <div className="select-button select-button-small">
10    <span>Small button</span>
11  </div>
12</label>
13<label className="form-select-button">
14  <input type="radio" name="select-button-size" />
15  <div className="select-button select-button-tiny">
16    <span>Tiny button</span>
17  </div>
18</label>

Select buttons states

1<label className="form-select-button">
2  <input type="radio" name="select-button-disabled" disabled />
3  <div className="select-button">
4    <span>Disabled</span>
5  </div>
6</label>
7<label className="form-select-button">
8  <input type="radio" name="select-button-disabled" defaultChecked disabled />
9  <div className="select-button">
10    <span>Disabled selected</span>
11  </div>
12</label>
13<label className="form-select-button">
14  <input type="radio" name="select-button-disabled" disabled />
15  <div className="select-button">
16    <span>Disabled 2</span>
17  </div>
18</label>

Checkbox

1<Checkbox name="checkbox" label="Label" />
2<Checkbox name="checkboxChecked" label="Label checked" checked />

Checkbox sizes

1<Checkbox name="checkboxDefault" label="Default checkbox" />
2<Checkbox name="checkboxSmall" label="Small checkbox" size={INPUT_SIZE.SMALL} />
3<Checkbox name="checkboxTiny" label="Tiny checkbox" size={INPUT_SIZE.TINY} />

Checkbox states

1<Checkbox name="checkboxIndeterminate" label="Indeterminate" indeterminate />
2<Checkbox name="checkboxIndeterminateChecked" label="Indeterminate checked" indeterminate checked />
3<div className="was-validated">
4  <Checkbox name="checkboxSuccess" label="Success" />
5  <Checkbox name="checkboxSuccessChecked" label="Success checked" checked />
6</div>
7<div className="was-invalidated">
8  <Checkbox name="checkboxError" label="Error" />
9  <Checkbox name="checkboxErrorChecked" label="Error checked" checked />
10</div>
11<Checkbox name="checkboxDisabled" label="Disabled" disabled />
12<Checkbox name="checkboxDisabledChecked" label="Disabled checked" disabled checked />
13<Checkbox name="checkboxDisabledIndeterminate" label="Disabled indeterminate" indeterminate disabled checked />
14<Checkbox name="checkboxDisabled2" label="Disabled" disabled checkboxPosition="right" />
15<Checkbox name="checkboxError2" label="Error" checkboxPosition="right" />
16<Checkbox
17  name="checkboxIndeterminateChecked2"
18  label="Indeterminate checked"
19  indeterminate
20  checked
21  checkboxPosition="right"
22/>

Radio

1<div className="form-radio">
2  <label className="form-control">
3    <input type="radio" name="radio" />
4    <span>Label</span>
5  </label>
6</div>
7<div className="form-radio">
8  <label className="form-control">
9    <input type="radio" name="radio" defaultChecked />
10    <span>Label</span>
11  </label>
12</div>

Radio sizes

1<div className="form-radio">
2  <label className="form-control">
3    <input type="radio" name="default" />
4    <span>Default</span>
5  </label>
6</div>
7<div className="form-radio form-radio-small">
8  <label className="form-control">
9    <input type="radio" name="small" />
10    <span>Small</small>
11  </label>
12</div>
13<div className="form-radio form-radio-tiny">
14  <label className="form-control">
15    <input type="radio" name="tiny" />
16    <span>Tiny</small>
17  </label>
18</div>

Radio states

1<div className="form-radio form-radio-error">
2  <label className="form-control">
3    <input type="radio" name="radio-error" />
4    <span>Error</span>
5  </label>
6</div>
7<div className="form-radio">
8  <label className="form-control">
9    <input type="radio" name="radio-disabled" disabled defaultChecked />
10    <span>Disabled checked</span>
11  </label>
12</div>

Buttons

1<button class="btn btn-primary">Primary button</button>
2<button class="btn btn-secondary">Secondary button</button>
3<button class="btn btn-text">Link button</button>
4<button class="btn btn-danger">Danger button</button>
5<button class="btn btn-secondary btn-on-background">Negative button</button>

Button sizes

1<button className="btn btn-primary">Default button size</button>
2<button className="btn btn-primary btn-small">Small button size</button>
3<button className="btn btn-primary btn-tiny">Tiny button size</button>

Button states

1<button disabled class="btn btn-primary">Primary button</button>
2<button disabled class="btn btn-secondary">Secondary button</button>
3<button disabled class="btn btn-text">Link button</button>
4<button disabled class="btn btn-danger">Danger button</button>
5<button disabled class="btn btn-secondary btn-on-background">Negative button</button>
6<button disabled className="btn btn-nav">Nav button</button>

Button icons

1<button className="btn btn-primary btn-icon-left">
2  <FontAwesomeIcon icon={faShoppingCart} />
3  Primary button icon
4</button>
5<button className="btn btn-danger btn-icon-right">
6  Danger button icon
7  <FontAwesomeIcon icon={faTrash} />
8</button>
9<div className="sm:col-4 mb-400">
10  <button className="btn btn-primary btn-icon-only">
11    <FontAwesomeIcon icon={faShoppingCart} />
12  </button>
13</div>
14<button className="btn btn-primary btn-icon-left btn-small">
15  <FontAwesomeIcon icon={faShoppingCart} />
16  Primary button icon
17</button>
18<button className="btn btn-danger btn-icon-right btn-small">
19  Danger button icon
20  <FontAwesomeIcon icon={faTrash} />
21</button>
22<button className="btn btn-primary btn-icon-only btn-small">
23  <FontAwesomeIcon icon={faShoppingCart} />
24</button>
25<button className="btn btn-primary btn-icon-left btn-tiny">
26  <FontAwesomeIcon icon={faShoppingCart} />
27  Primary button icon
28</button>
29<button className="btn btn-danger btn-icon-right btn-tiny">
30  Danger button icon
31  <FontAwesomeIcon icon={faTrash} />
32</button>
33<button className="btn btn-primary btn-icon-only btn-tiny">
34  <FontAwesomeIcon icon={faShoppingCart} />
35</button>
36<button className="btn btn-primary btn-icon-left btn-tiny btn-collapse">
37  <FontAwesomeIcon icon={faShoppingCart} />
38  Primary button icon
39</button>
40<button className="btn btn-danger btn-icon-right btn-tiny btn-collapse">
41  Danger button icon
42  <FontAwesomeIcon icon={faTrash} />
43</button>

Collapsed buttons

The .btn-collapse class is currently only combinable with .btn-small or  .btn-tiny classes.

1<button class="btn btn-primary btn-small btn-collapse">Small primary button</button>
2<button class="btn btn-secondary btn-small btn-collapse">Small secondary button</button>
3<button class="btn btn-text btn-small btn-collapse">Small link button</button>
4<button class="btn btn-danger btn-small btn-collapse">Small danger button</button>
5<button class="btn btn-secondary btn-on-background btn-small btn-collapse">Small negative button</button>
6<button class="btn btn-nav btn-small btn-collapse">Small nav button</button>
7<button class="btn btn-primary btn-tiny btn-collapse">Tiny primary button</button>
8<button class="btn btn-secondary btn-tiny btn-collapse">Tiny secondary button</button>
9<button class="btn btn-text btn-tiny btn-collapse">Tiny link button</button>
10<button class="btn btn-danger btn-tiny btn-collapse">Tiny danger button</button>
11<button class="btn btn-secondary btn-on-background btn-tiny btn-collapse">Tiny negative button</button>
12<button class="btn btn-nav btn-tiny btn-collapse">Tiny nav button</button>