Design: Iterate on header and footer anatomies and examples

[SmartMouthWords]

Update header and footer anatomy images and written content on the website and the in Figma library to:

• reflect changes and new components
• better align the Figma and the website
• spacing and sizing

[SmartMouthWords]

Discussed in Dev/design sync. Decision to:

• Add search box
• Add date modified to footer anatomy
• Consider adding breadcrumbs to header (Figma)
• Add content flagging date modified and H1 as page content and noting skip-to-content link is not visible

[SmartMouthWords]

Fix inconsistencies with Canada.ca for the header (design and code):

• Sizing of the logo needs to be larger
• Sizing of the language toggle link needs to be smaller
• Fix spacing of items within the header Figma library:
• Add breadcrumbs to header
• Overall spacing within the search bar to bring as close to Canada.ca as possible, but while using the CDS spacing tokens

To explore:

• Can the brand header be removed?

[SmartMouthWords]

https://www.figma.com/file/nfpEteHyEJ9dhJ2YvuvLeo/Documentation-site%2FComponent-Pages?type=design&node-id=12999%3A2210&mode=design&t=DRWBchRv26cF68nE-1

[SmartMouthWords]

Added content to the header pages (changes in pink) to reflect the updates. Next steps:

• [ ] update footer to add date modified in anatomy
• [ ] translation and proofread
• [ ] development work to add search to header
• [ ] pos. dev work to add date modified to footer if deemed appropriate
• [ ] publish changes in Figma EN/FR libraries
• [ ] publish changes on website