Mini Styleguide

Edit this elements to match your project toolkit.
Delete this page after the project is finished.

Text styles    —————————

Heading 01

Heading 02

Heading 03

Heading 04

Font Size Large

Font Size Medium

Font Size Regular

Font Size Small

Extra Bold element

Bold element

Semi Bold Element

Text Align Center

  • List item

  • List item

  • List item


All buttons should have the (Main Button) class.


All buttons should have the (Main Button) class.

Colors    —————————

Colors can be edited using the Style ( s ) panel on the left. Follow these steps:

  1. Select the swatch in the color picker.
  2. Click "Edit swatch".
  3. Now you can edit the name and change the color.

Text Color Grey

Text Color Dark Grey

Text Color Violet

Text Color Indian Red

Text Color Plum

Text Color Indian Red

Text Color DimGrey

Margins    —————————

To archive consistency, this template only uses margin-bottom for all elements. The following are created:

  1. Margin Bottom Small ( 8px )
  2. Margin Bottom Medium ( 16px )
  3. Margin Bottom Large  ( 24px )
  4. Margin Bottom XLarge ( 32px )
  5. Margin Bottom XXLarge ( 40px )
  6. Margin Bottom XXXLarge  ( 64px )
  7. u-margin__none ( 0px ) Removes all margins.

Opacities    —————————

By default, all elements have opacity to 100%, we have four classes to reduce the opacity by 20% each.

This is opacity 100. Default.

This is opacity 80.

This is opacity 60.

Extras    —————————

This class centers text. Under this text is an element with the "u-hidden" class.

This class centers text.