Styleguide

Typography is our main tool for communicating with our users. It provides hierarchy and visual guidance on IS24 pages. It helps users achieve their goals by giving them reassurance and confidence.

Using Typography

  • Aim for contrast by using high contrast colors for your text.
  • Give your type room to breathe. White space / negative space around your information increases both readability and focus.

Headlines

Use headlines throughout a page to enable users to glean information by quickly skimming over the page.

<h5> is the hierarchically lowest headline style that we use.

Main Headline (40px)

  • Every page should start with a main headline
  • A main headline gives pages hierarchy & continuity by stating the purpose of the current page with regards to where a user comes from.

Section Headline (32px)

  • Title for content section within a page

Detailed Headline (26px)

  • For titles within a section
  • For titles within an overlay

Grouping Headline (21px)

  • For titles within cards and tiles
  • For titles within a section like "costs" in a listing
Highlight Headline (18px)
  • Lowest level headline
  • For giving context
Running Text

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. (14px #343434) (14px #343434)

An Individual Link
Sed a lorem quis neque interdum et (14px #2a7cca) (14px #2a7cca)

Colors

The existing colors have been mainly left unchanged, save for some minor adjustments. The link blue, for instance, has been slightly modified to yield better contrast and feel fresher.

At the color palette you can check all colors which the framework supports.

Buttons

Spacings

All spacings – be they horizontal or vertical, between two elements or within an element – can have one of six sizes. These sizes are designated as XS, S, M, L, XL, XXL. (See the visualization below for actual values.)

XS (4px) (2px)
S (8px) (4px)
M (16px) (8px)
L (24px) (16px)
XL (32px) (24px)
XXL (42px) (32px)

Forms

Demo Form

/
/
Back

A Form

Boxes & Borders

Violet flower

Headline

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

Sydney Opera

Box with Shadow

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

Football player before sunset

Headline

  • Duis quis tempor nunc
  • Interdum et malesuada fames
  • Sed a lorem quis neque interdum

Box with default background

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus

Tooltips & Popovers

Status Messages

Success

Congratulations! Your request has been successfully processed.

Heads up

This will interest you. No, really, it will.

Look out

If you keep going you may fall to your doom.

Broken

You have destroyed everything. Well done.

Success

Congratulations! Your request has been successfully processed.

Heads up

This will interest you. No, really, it will.

Look out

If you keep going you may fall to your doom.

Broken

You have destroyed everything. Well done.

Examples

Main Heading H1

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque.

Secondary Heading H2

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Tertiary Heading H3

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Subheading H4

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque.

Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Subheading H5

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.