Skip to main content



Think of this page as the shop window. It is the primary display point of the brand. It needs to capture attention, and peak interest. It is also the starting point for many users to navigate into specific product journeys, or learn before they purchase. The homepage has to work hard and wear many hats without being an overwhelming barrage of information.


  • An introduction to the brand, leaving a lasting first impression.
  • Promote specific products or services offered.
  • Drive traffic to strategically important products and services.
  • Provide a starting point for customers to easily find what they need.
  • Promote the latest offers.

Principles to follow#

CreativeTone of voiceKeywords
Warm and friendlyBe active, Be naturalPromotional, Navigational, Informative, Memorable


Content guidance#

Page compositionDescription
Image of headerThis page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence with the logo.
Image of skylinePositioned directly beneath the global navigation and above any content, ns-skyline displays high level messages to the user. The purpose of ns-skyline is to notify the user of important site-wide, or non-page specific events, that may affect their experience of using the website.
Image of Panel 1This ns-landmark consists of a heading, an introductory paragraph and a CTA. Landmarks are used to introduce the page, informing users of their current location and its primary purpose. They contain the most compelling and important message, emphasising the key points in bold text, accompanied with a relevant 'hero' image.
Image of Panel 2Next, this ns-panel consists of a heading, an introductory paragraph and 3 ns-card components (section type), with CTAs for the most common reasons a user would be visiting the website.
Image of Panel 3Next is a ns-lockup describing some information such as latest news or a promotion combined with an image and a CTA.
Image of Panel 4Following on, are 3 more ns-card components with text CTAs, combined with a heading. These offer links to other services that may also be of interest, but are of less importance than the 3 cards above.
Image of Panel 5Next is an ns-lockup with decoration which is used to grab attention to another product or service lower down in the order.
Image of Panel 6Following is an ns-lockup but without decoration, so of less importance than the lockup above.
Image of Panel 7Then there is an ns-lockup with decoration...
Image of Panel 8...and then, if it's really necessary another ns-lockup variant can be used. Be mindful of putting too many lockups on one page.
Image of Panel 9Now towards the end of the page we can 'mop-up' any users that have scrolled this far. Ask, 'What else might they be looking for that's not already been mentioned above?' It consists of 3 more ns-card components with text CTAs, and with a decoration that is sympathetic to the end of the page caveat or footer section.
Image of CaveatIf required, include ns-caveat to provide additional information and legal details to the content.
Image of FooterFinally, there is nsx-footer which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps.


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.