Style Guide Version 1.2 Update on 25/10/2017

This is a style guideline for Fram.io. The template includes colours, typography, icons, buttons, forms…

1. Changelog
• 01/10/2017 - V1.0
  • Release design
• 05/10/2017 - V1.1
  • Change font to Muli (Google font support)
  • Change font icon to anticon (To learn import and compile fonts)
  • Some minor changes to the design
• 25/10/2017 - V1.2
  • Add margins/paddings guideline
2. Color Pallate
• orange-primary

  #ee6313

  gray-secondary

  #8b8b8b

  orange-light

  #f5a623

  orange-dark

  #930700

3. Typography

Below you can specify the projects typography. Include a preview, font-family, font-size, font-weight, line-height and the colours.

• Heading H1

  • Font-family: Muli
  • Font-size: 2.5rem
  • Font-weight: normal
  • Color: #8b8b8b

• Heading H2

  • Font-family: Muli
  • Font-size: 2.25rem
  • Font-weight: normal
  • Color: #8b8b8b

• Heading H3

  • Font-family: Muli
  • Font-size: 1.75rem
  • Font-weight: normal
  • Color: #8b8b8b

• Title 1

  • Font-family: Muli
  • Font-size: 1.75rem
  • Font-weight: bold
  • Color: #000

• Title 2

  • Font-family: Muli
  • Font-size: 1.75rem
  • Font-weight: bold
  • Color: #930700

• paragraph

  ---

  • This is a paragraph using Muli normal at font size 1rem in the colour #930700

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae deleniti itaque sapiente minus quo, asperiores, fugiat recusandae tempora molestiae labore quis ipsum magnam dignissimos nostrum, aliquam eveniet? Non fugit ratione, eaque provident ullam quos rem.

• paragraph bold

  ---

  • This is a paragraph using Muli bold at font size 1rem in the colour #930700

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae deleniti itaque sapiente minus quo, asperiores, fugiat recusandae tempora molestiae labore quis ipsum magnam dignissimos nostrum, aliquam eveniet? Non fugit ratione, eaque provident ullam quos rem.

4. Icons

The icons are from anticon and can be downloaded from https://ant.design/docs/resource/download
5. Buttons
• primary primary outline primary small
• secondary secondary outline secondary small
• Dropdown button

  Option 1 Option 2 Option 3
  Dropdown button split Span for toggle this dropdown

  Option 1 Option 2 Option 3
  Dropdown button transparent

  Option 1 Option 2 Option 3
6. Forms

All fields should be shown with a label. Both the label, placeholder and border has the colour #999999. Other colours can be found in the sceme.

• Input/text required
• Input/text disabled
• Input/password valid
• Input/password invalid

  Please check your password
• Textarea
• This is default selectbox Option 1 Option 2
• Radio selected Radio normal Radio normal Radio disabled
• Checkbox selected Checkbox normal Checkbox normal Checkbox disabled
7. Margins & Paddings

Normal margins block

{ margin: $spaces; }

Normal paddings elememt

{ padding: $spaces; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nisi laborum esse harum quam accusamus provident.

Small paddings elememt

{ padding: $spaces-small; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis neque quas maxime cupiditate saepe tempora.

Small margins block

{ margin: $spaces-small; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta cumque, itaque pariatur id provident ad optio voluptates voluptatibus exercitationem, suscipit vero. Asperiores commodi temporibus quis perspiciatis reiciendis officiis molestias sunt facilis voluptate, nemo reprehenderit id amet ab assumenda, veniam delectus.