Ready-to-go elements

The DSM brand online

Ready-to-go website elements

We’ve saved you the time and trouble of creating most digital components. Instead, they’re ‘ready-to-go’.

Quick guide to the elements

As you’d expect they feature our Fira Sans typeface; animations like our logo and visual device; hover actions; and stylings like buttons and navigational elements.

  1. The elements in the header are standard for each website. A navigation panel appears automatically along with the optional ‘breadcrumb’ – both providing quick, clear navigation.
  2. The key visual(s) or video works as an eye-catcher. The height can differ depending on the level of the page, but there is a minimum (for consistency’s sake). That said, if your text is too long for this minimum height it will simply auto-expand to fit. Our DSM brand promise always features on the key visual(s) or video(s) for each homepage or landing page. Adding and modifying content couldn’t be easier: simply ‘drag-and-drop’ in the content management system.
  3. The most important (or current) story goes here. You have various options and layouts to choose from and you also have the option of using various color gradients.
  4. This component is designed to feature short stories around our goals and targets – a big part of our courageous, more purpose-driven approach now. Simply choose the most relevant, resonant type of content – along with the color variation of the visual device that works best. We use DSM light grey as a block color to create harmony and to separate blocks of content.
  5. You have a small selection of buttons, icons and settings for tabs to choose from; while the overall design is ready-to-go.
  6. To make life easier we’ve fixed the dimensions and elements in the footer for each website.

Read more

  • Responsive design

    Responsive design

    Our digital ready-to-go elements and component library are versatile and responsive - and they need to be when you consider that mobile is our fastest growing channel.

  • Digital components library

    Digital components library

    When it comes to digital it's all about piecing components together in a smart, flexible way without compromising brand consistency.

  • Color palette guide

    Color palette guide

    At DSM we’re all about brighter living... so our color palette, consisting of twelve colors, is as bright as possible!