Feature/additional principles and introduction

src/content/docs/guidelines/principles.mdx

@@ -0,0 +1,139 @@
+---
+title: Principles
+tableOfContents:
+  maxHeadingLevel: 2
+---
+
+## Introduction
+
+<div class="purpose">
+Nucleus is here to enable teams across British Gas deliver consistent, accessible experiences that delight our customers.
+</div>
+
+We are flexible to change, and use shared success criteria for decision making and prioritisation.
+
+This is an inclusive, community driven design system. In order to help deliver this, we hold ourselves accountable and measure ourselves against these principles:
+
+- [Accessibility principles](../principles/#accessibility-principles)
+- [Experience principles](../principles/#experience-principles)
+- [Creative principles](../principles/#creative-principles)
+
+## Accessibility principles
+
+At minimum, features must conform to Web Content Accessibility Guidelines 2.1 at Level AA.
+
+Accessibility ensures that all persons can access and benefit from a website, system or application, regardless of their gender, age, culture, or ability. Considerations must also be made around different screen sizes, browser types and settings, or those who do not have plug-ins such as Flash.
+
+The four accessibility principles (POUR) are derived straight from [WCAG 2.1](https://www.w3.org/TR/WCAG21/). For each principle, WCAG provides in-depth documentation and guidance. Below, we've restated the principles as well as provided bit of background into Level AA conformance.
+
+Our [Accessibility guidelines](../accessibility) describe in further detail how these principles have been applied.
+
+### Perceivable
+
+- Users must be able to perceive that information is available.
+- Information becomes invisible if it can't be perceived with any available senses.
+
+### Operable
+
+- Users must be able to operate the interface.
+- An action becomes unattainable if it relies on an interaction that a user cannot perform.
+
+### Understandable
+
+- Users must be able to understand both the information and interface provided.
+- A piece of content or operation becomes a burden if it goes beyond a users understanding.
+
+### Robust
+
+- Users relying on user agents, including assistive technologies, must be served with compatible content.
+- A piece of content or operation needs to be compatible with evolving user agents, including assistive technologies, browsers, and other applications involved in rendering content.
+
+#### Conformance with accessibility principles
+
+To rate how well an instance conforms to the principles, [WCAG 2.1](https://www.w3.org/TR/WCAG21/#perceivable) provides three three conformance levels:
+
+1. **A is viewed as the minimum level** of requirement which all websites, apps, and electronic content such as documents should adhere to.
+2. **AA is viewed as the acceptable level** of accessibility for many online services, which should work with most assistive technology which is now widely available on both desktop and mobile devices, or which can be purchased as a third-party installation.
+3. **AAA compliance is viewed as the gold standard level** of accessibility, which provides everything for a complete accessible offering, including all the bells and whistles which make the difference between a very good experience and an excellent one.
+
+Our aim is to ensure **Level AA conformance**. Within Nucleus, this means that any new component needs to meet related criteria. However, content will change with each application of a component. To ensure accessibility, our product teams will need to consider both visible content and its counterparts used by assistive technologies, such as screen readers.
+
+In-depth documentation on accessibility straight from the source can be found in [WCAG 2.1](https://www.w3.org/TR/WCAG21/#location). Because each level of conformance includes 'lower' levels, any specific requirement labelled as A or AA applies to us.
+
+## Experience principles
+
+Our five experience principles describe the core values that underpin our Nucleus Design System.
+
+### Tailored to individuals
+
+We tailor our experiences to the individuality of each customer and channel they might appear in. We use data and insights to understand our customers’ needs and use personalisation and smart technologies to predict and act, not react.
+
+- If we know a customer’s name, we prefill their details.
+- We don’t promote products customer’s already have.
+- We don’t use a "cookie-cutter" to create our designs. We create for the purpose, the customer, the device and the outcome.
+
+### Leave no one out
+
+Inclusivity and accessibility are fundamental. No one should be left out. Ever.
+
+- If in doubt, test it in the lab.
+- Consider how the page will be read.
+- Consider how you are writing – would you say this to your mum?
+- Our code and content are optimised for screen readers.
+- Learn about different types of barriers (physical, cognitive, sensory limitations that can be either temporary or permanent).
+
+### Always there
+
+The relationship we have with our customers is a two-way conversation. We listen, we don’t just talk and look to offer reassurance and expertise whenever and however our customers might need it.
+
+- Guides, tool-tips and fast-serving links so customers have all the info they need.
+- Use our Tone of Voice to sound human, reassuring and helpful.
+- Webchat when a customer hesitates.
+
+### Make life simple
+
+Our products and experiences should be simple, seamless and hassle-free.
+
+We create them this way so our customers have time to get on with what’s important in their lives.
+
+- Take steps out where possible and strip-back.
+- Focus on one message at a time.
+- Keep messages concise and clear.
+- Our designs are intuitive and our back-end systems do the 'thinking' – so customers shouldn’t have to.
+
+### Go beyond
+
+We always go further than creating functional experiences by seeking out surprise and delight for our customers.
+
+- The smallest gesture can make the biggest differences.
+- Look at an experience end to end and understand where customers have come from and where they are going, and what state of mind they are in!.
+- Terms & Conditions written in simple terms.
+- Using thoughtful animation at the right time to add delight.
+
+## Creative principles
+
+Building our visual language from our creative principles.
+
+### Modern and dynamic
+
+We’re a brand full of energy. Being modern and dynamic helps us lead the way to change how things are done in our industry, making sure our customers always feel in control.
+
+### Clean and fresh
+
+At our heart, we’re a blue and white brand, we use the white space of a page in a considered way so our customers are never overwhelmed.
+
+Being clean and fresh helps us show our content simply, so our customers can get what they need - and get on with their day.
+
+### Warm and friendly
+
+We’re a brand with clarity, but we’re never clinical. Being warm and friendly helps us make a genuine connection with our customers.
+
+## How to use these principles
+
+A key activity for us is to come up with new, alternative solutions time and time again to see what works best. Some of these solutions might be solid solutions in their own right but not quite fit the desired experience, accessibility criteria, or visual language we're aiming for as British Gas. Identifying these differences is not always easy, but that's where principles can be of use to your team.
+
+- Ideate to provide constructive constraints.
+- User research and testing to learn how these principles might best be met.
+- During design and sprint reviews as shared evaluation criteria.
+- As metrics to provide cross-team, cross-journey data.
+- In analytics to track changes over time.

src/content/docs/introduction.mdx

@@ -0,0 +1,41 @@
+---
+title: Nucleus design system
+tableOfContents:
+  maxHeadingLevel: 2
+---
+
+## What is Nucleus?
+
+<div class="purpose">
+Nucleus is the Design System of British Gas. Its purpose is to help provide cohesive and coherent web experiences.
+</div>
+
+### Our vision
+
+To create an industry leading design system that is well known and respected.
+
+### Our mission
+
+Nucleus is an inclusive, community driven design system. It brings together our brand personality and world class experiences.
+
+### Our purpose
+
+Empowering teams to collaboratively build reusable, coherent and accessible experiences that delight customers by using our aligned principles and processes.
+
+## What is a design system?
+
+<div class="purpose">
+A design system is a standardised set of reusable components for building applications, guided by clear principles.
+</div>
+
+### Why do we have a design system?
+
+Nucleus exists so we can efficiently design consistent and accessible experiences for our customers. Each element of the design system has been rigorously researched, designed, built and tested, to conform with our [principles](../guidelines/principles). By completing this discovery work, we hope that everyone is able to concentrate on creating consistent and coherent experiences for our customers.
+
+### How has the design system been created?
+
+Nucleus is built from small elements, such as typographic styles, colours, scale and visual assets - these form our foundations.
+
+These foundations are brought together to form components. These range from elemental items such as a CTA - which comprises an icon and text, to more complex organisms containing multiple typographic styles and/or visual elements.
+
+Through continuous exploration and implementation we also have begun to develop patterns. These are highly complex structures, which contain groups of elements or components.