Add more documentation to explain how to use header and footer

src/scss/components/footer/Docs.mdx

@@ -6,26 +6,30 @@ import * as ComponentStories from "./footer.stories";
 
 <Title />
 
-### Full Footer
+The footer of an IATI website may contain 1-3 sections, depending on what's needed for the application. Each section is optional, except the legal section. The order shown here must be respected. 
+
+The colours, fonts, images and other styles are an inherent part of the design and must be used when this design is used.
 
-{/* TODO: Documentation about the footer */}
+The footer designs are responsive for reduced widths. Beyond the maximum width shown here the footer should be extended to the full width of the page by continuation of the solid background and lines.
+
+### Full Footer
 
 <Canvas of={ComponentStories.Footer} />
 
 ### Useful Links Section
 
-{/* TODO: Documentation for this section */}
+Useful links might include a mini sitemap, related resources or signposts to alternative/complimentary tools. The Newsletter signup is optional; if omitted the second column may be used for more links per the "Additional Information" design.
 
 <Canvas of={ComponentStories.UsefulLinksSection} />
 
 ### Additional Information Section
 
-{/* TODO: Documentation for this section */}
+Additional Information should include details of licensing, software versions, and short statements about the software, if relevant. 
 
 <Canvas of={ComponentStories.AdditionalInformationSection} />
 
 ### Legal Section
 
-{/* TODO: Documentation for this section */}
+The "Privacy" and "Data Removal" links must be included and link to the URLs provided here. If license information is not provided elsewhere in the footer it may be included here. The language switcher and social media links must be included. 
 
 <Canvas of={ComponentStories.LegalSection} />

src/scss/components/footer/footer.stories.ts

@@ -114,7 +114,7 @@ export const AdditionalInformationSection: Story = {
 const legalNavItems = [
   html`<a href="https://iatistandard.org/en/privacy-policy/">Privacy</a>`,
   html`<a href="https://iatistandard.org/en/data-removal/">Data removal</a>`,
-  html`<span>© Copyright IATI 2024. All rights reserved</span>`,
+  html`<span>© Copyright IATI 2024</span>`,
 ];
 
 const legalSectionHtml = html`

src/scss/components/header/Docs.mdx

@@ -0,0 +1,21 @@
+import { Meta, Title, Canvas } from "@storybook/blocks";
+
+import * as ComponentStories from "./header.stories";
+
+<Meta of={ComponentStories} />
+
+<Title />
+
+The IATI Tools header is for use on all IATI-branded tools. By using the same header on all tools, we're creating a more consistent experience for people using those tools and helping them be more confident moving between tools. 
+
+Consistency across products is key, so the header should be used as-is without modification (including colours, fonts, icons and the "IATI Tools" label) except where described below. 
+
+The language switcher must be included even if the tool is only available in one language. The Help Docs and Search must be used to access those function if the application supports them, but may be omitted otherwise. No other buttons may be added to the header. 
+
+The "IATI Tools" label must remain intact, and the Tool Name in the design replaced with the name of the tool. 
+
+The first link in the menu must return to the tool's home page. Further links are for primary navigation in the tool. No secondary navigation is supported in the header; this is left to the tool to provide. 
+
+If breadcrumbs are to be used, these should be directly below the header. 
+
+<Canvas of={ComponentStories.Header} />

src/usage.mdx

@@ -5,8 +5,11 @@ import * as ButtonStories from "./scss/components/button/button.stories";
 
 <Title>Using the IATI Design System</Title>
 
-After completing the <a href="../?path=/docs/installation--docs">installation</a> instructions,
-core styles, such as typography, should be applied to your site.
+The IATI Design System is intended to increase the visual consistency of the IATI web estate and make it easier for people to navigate unfamiliar tools by providing consistent locations and hints as to where functionality can be found. 
+
+It is continuously being updated. If, when updating a website to use the design system, you find that an important question is unanswered, open a GitHub issue to discuss. In the meantime, continue to use your best judgement for the task at hand. 
+
+After completing the <a href="../?path=/docs/installation--docs">installation</a> instructions, core styles, such as typography, should be applied to your site.
 
 This Storybook shows the components available in the design system.
 For each component, the **Docs** page shows available variants of the component, like the example shown below for the default variant of the Button component.