diff --git a/design_decisions/patterns/atoms_components/avatar.schema.json b/design_decisions/patterns/atoms_components/avatar.schema.json
new file mode 100644
index 0000000..fd06ea2
--- /dev/null
+++ b/design_decisions/patterns/atoms_components/avatar.schema.json
@@ -0,0 +1,21 @@
+{
+ "$id": "atoms_components/avatar.schema",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Avatar",
+ "type": "object",
+ "properties": {
+ "src": {
+ "type": "string"
+ },
+ "alt": {
+ "type": "string"
+ },
+ "width": {
+ "type": "integer"
+ },
+ "height": {
+ "type": "integer"
+ }
+ },
+ "required": ["src", "alt", "width", "height"]
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/atoms_components/link.schema.json b/design_decisions/patterns/atoms_components/link.schema.json
new file mode 100644
index 0000000..8d863be
--- /dev/null
+++ b/design_decisions/patterns/atoms_components/link.schema.json
@@ -0,0 +1,15 @@
+{
+ "$id": "atoms_components/link.schema",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Link",
+ "type": "object",
+ "properties": {
+ "children": {
+ "type": "object"
+ },
+ "url": {
+ "type": "string"
+ }
+ },
+ "required": ["children", "url"]
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/atoms_components/navigation.schema.json b/design_decisions/patterns/atoms_components/navigation.schema.json
new file mode 100644
index 0000000..66a9fa9
--- /dev/null
+++ b/design_decisions/patterns/atoms_components/navigation.schema.json
@@ -0,0 +1,15 @@
+{
+ "$id": "atoms_components/navigation.schema",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Navigation",
+ "type": "object",
+ "properties": {
+ "render_links": {
+ "type": "object"
+ },
+ "render_title": {
+ "type": "object"
+ }
+ },
+ "required": ["renderLinks"]
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/common_elements/footer.md b/design_decisions/patterns/common_elements/footer.md
new file mode 100644
index 0000000..e1a128b
--- /dev/null
+++ b/design_decisions/patterns/common_elements/footer.md
@@ -0,0 +1,30 @@
+# Footer
+
+## Overview
+
+The PCGL Footer identity, documentation, definition, and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/footer/) and the [Canadian Institutes of Health Research visual identity](https://cihr-irsc.gc.ca/e/50426.html).
+
+## Properties
+
+| Property | Attribute | Description| Type| Default |
+| ------------------- | -------------------- | ---------- | --- | ----------- |
+| [meta](/patterns/molecules_regions/footer-meta-item.schema.json) | `meta` | Object containing items for the sub-footer. | `object` | `{terms_conditions, logo}` |
+| [navigation_sections](/patterns/atoms_components/navigation.schema.json) | `navigation` | Slot for displaying a band with lists of link items. Format: `{ render_title, render_links }` | `object` | `undefined` |
+
+
+## Slots
+
+[**navigation_sections**](/patterns/atoms_components/navigation.schema.json): Accepts a function to display contextual and external navigation items.
+
+### Diagram
+```mermaid
+ block
+ columns 1
+ block
+ navigation["navigation"]
+ meta["meta"]
+ style navigation stroke-dasharray:8px
+ end
+```
+
+> Check out the [template](/patterns/templates/figma.md).
\ No newline at end of file
diff --git a/design_decisions/patterns/common_elements/header.md b/design_decisions/patterns/common_elements/header.md
new file mode 100644
index 0000000..7080a3e
--- /dev/null
+++ b/design_decisions/patterns/common_elements/header.md
@@ -0,0 +1,46 @@
+# Header
+
+## Overview
+
+The PCGL Header identity, documentation, definition, and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/header/code/#section-essential) and the [DACO portal visual identity](https://www.figma.com/design/DMs06XLL2oAlCQlRktXYqA/PCGL-Design-Mockups---REBRAND--Copy-?node-id=2025-565&t=lLoqA9iHKkFA7Qb2-0).
+
+## Properties
+
+| Property | Attribute | Description| Type| Default |
+| ------------------- | -------------------- | ---------- | --- | ----------- |
+| [accessibility_links](/patterns/atoms_components/link.schema.json) | `a11y-links` | Object containing hidden skip links for navigation accessibility. | `object` | `{ url, children }` |
+| [menu_options](/patterns/atoms_components/navigation.schema.json) | `render-menu` | Slot containing the items for navigation. | `object` | `undefined` |
+| [logo](/patterns/atoms_components/avatar.schema.json) | `logo` | Object containing the wordmark as an image wrapped inside an anchor or link. | `object`| `{ src, alt, width, height }` |
+| [lang](/patterns/atoms_components/link.schema.json) | `render_lang` | Slot for switching between available language versions. | `object` | `undefined` |
+| **search_bar** | `render_search` | Slot for displaying a search bar. | `object` | `undefined` |
+| [auth](/patterns/atoms_components/link.schema.json) | `render_auth` | Slot for displaying the authentication component. | `object` | `undefined` |
+
+
+## Slots
+
+[**render-menu**](/patterns/atoms_components/navigation.schema.json): Accepts a function to display contextual and external navigation items, such a hamburger menu for example.
+
+**`render_lang`**: Accepts a function to display the language toggle component.
+
+**`render_search`**: Accepts a function to display the search component.
+
+**`render_auth`**: Accepts a function to display the authentication component.
+
+### Diagram
+```mermaid
+ block
+ columns 1
+ accessibility_links
+ block:group1
+ columns 12
+ navigation logo children lang search_bar auth
+ end
+ classDef optional stroke-dasharray:8px
+ class navigation optional
+ class lang optional
+ class search_bar optional
+ class children optional
+
+```
+
+> Check out the [template](/patterns/templates/figma.md).
\ No newline at end of file
diff --git a/design_decisions/patterns/docs/CONTRIBUTING.md b/design_decisions/patterns/docs/CONTRIBUTING.md
new file mode 100644
index 0000000..cbe7cbd
--- /dev/null
+++ b/design_decisions/patterns/docs/CONTRIBUTING.md
@@ -0,0 +1,121 @@
+# Contributing
+
+## Check With Our Team
+
+When contributing to this repository, please first discuss the changes you wish to make via an issue, email, or any other method with the repository owners before starting work.
+
+## Review Our Guidelines
+
+These guidelines combine concepts from [Atomic Design][atomic-design-brad-frost] and the [MDN HTML elements reference][element] to provide a structured, hierarchical approach to representing components across portals.
+
+
+Pages
+: Specific instances where templates are populated with real data, representing the final user interface.
+
+Templates
+: Page-level layouts that arrange components and regions without specific content or data.
+
+Landmarks (Organisms)
+: Complex UI sections representing major areas of a page (e.g., header, footer) that users can navigate to directly.
+
+Regions (Molecules)
+: A group of components combined to serve a single responsibility.
+
+Components (Atoms)
+: An indivisible UI element (e.g., button, link, avatar) that serves as a fundamental building block.
+
+Our decisions draw inspiration from established design systems, accessibility standards, and industry best practices, including but not limited to:
+ - [The Government of Canada][canada]
+ - [The UK Government][uk]
+ - [Atomic Design by Brad Frost][atomic-design-brad-frost]
+ - [MDN][MDN]
+ - [Splunk][splunk]
+
+## Pull Request Process
+
+You may merge a pull request once you have the sign-off of two other developers. If you do not have permission to merge, you may request the second reviewer to merge it on your behalf.
+
+## Code of Conduct
+
+### Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+### Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+### Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+### Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage].
+
+[homepage]: https://contributor-covenant.org
+
+[canada]: https://design-system.canada.ca
+
+[uk]: https://design-system.service.gov.uk
+
+[atomic-design-brad-frost]: https://atomicdesign.bradfrost.com
+
+[MDN]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility
+
+[splunk]: https://splunkui.splunk.com/DesignSystem/DesignPrinciples#splunk-ui-design-system-principles
+
+[element]: https://developer.mozilla.org/en-US/docs/Web/API/Element
diff --git a/design_decisions/patterns/docs/users_personas.md b/design_decisions/patterns/docs/users_personas.md
new file mode 100644
index 0000000..bd803e1
--- /dev/null
+++ b/design_decisions/patterns/docs/users_personas.md
@@ -0,0 +1,98 @@
+# PCGL User Personas and Context
+
+This document outlines the user personas, their actions (verbs), and their relationships with the system elements within the Pan-Canadian Genome Library (PCGL) platform.
+
+## System Context Diagram
+
+```mermaid
+C4Context
+ title PCGL Platform - User Personas and Context Diagram
+
+ Enterprise_Boundary(pcgl, "Pan-Canadian Genome Library (PCGL)") {
+ System(admin_tools, "Administration & Identity", "COManage, OIDC, System Config")
+ System(submission_sys, "Data Submission System", "Score CLI, Song manifests, Schema validation")
+ System(daco_portal, "DACO Portal", "Data Access Committee operations and applications")
+ System(research_portal, "Research Portal", "Data discovery and access")
+ System(tre, "TRE (Trusted Research Environment)", "Secure data analysis environment")
+ System(participant_portal, "Participant Portal", "PHI isolated, consent management")
+ System(reporting_module, "Reporting Module", "Compliance, QC, milestones")
+ System(infrastructure, "SD4H Infrastructure", "K8s, Globus, S3, Pipelines")
+ }
+
+ %% Personas - Administrative & Support
+ Person(super_admin, "Super-Admin", "Highest privilege group.")
+ Person(data_admin, "Data Admin", "Manages data-related administrative operations.")
+ Person(op_support, "Operational Support", "Assists data submitters with onboarding and setup.")
+ Person(devops, "DevOps & Infrastructure", "Manages SD4H Kubernetes clusters, monitoring, backups.")
+
+ %% Personas - Data Submission & Research
+ Person(submitter, "Data Submitter", "Submits clinical and/or genomic data to a specific study.")
+ Person(researcher, "Researcher", "Discovers data and requests access.")
+ Person(daco_collaborator, "DACO Collaborator", "Project members wanting controlled data access.")
+ Person(signing_official, "Signing Official", "Legally commits entity to data access agreements.")
+
+ %% Personas - Governance
+ Person(dac_chair, "DAC Chair", "Issues final approval or rejection of data access requests.")
+ Person(dac_member, "DAC Member", "Views and reviews submitted data access applications.")
+ Person(daco_admin, "DACO Admin", "Admin of the PCGL DACO Portal.")
+
+ %% Personas - Other
+ Person(participant, "Study Participant", "Interacts with the Participant Portal.")
+ Person(funder, "Funding Body Rep", "Views compliance reports and project milestones.")
+
+ System_Ext(external_platforms, "External Platforms", "gnomAD, Cloud Analysis (GA4GH APIs)")
+
+ %% Relationships - Administrative
+ Rel(super_admin, admin_tools, "Manages groups, OIDC, config, roles")
+ Rel(data_admin, admin_tools, "Registers studies, schemas, assigns submitters")
+ Rel(data_admin, submission_sys, "Flags submissions as validated, configures settings")
+ Rel(op_support, submission_sys, "Creates studies, registers participants, wrangles data, submits on behalf")
+ Rel(devops, infrastructure, "Manages clusters, backups, storage, deploys, monitors health")
+ Rel(devops, tre, "Provisions TRE instances")
+
+ %% Relationships - Submission
+ Rel(submitter, submission_sys, "Uploads clinical TSV, deposits files via Score CLI, registers Song manifests")
+
+ %% Relationships - Research & Access
+ Rel(researcher, research_portal, "Discovers data")
+ Rel(researcher, daco_portal, "Requests access")
+ Rel(researcher, tre, "Accesses individual-level data for approved studies, exports data")
+ Rel(signing_official, daco_portal, "Signs Data Access Applications")
+ Rel(daco_collaborator, daco_portal, "Requests access to controlled data")
+
+ %% Relationships - Governance
+ Rel(dac_chair, daco_portal, "Approves, rejects, or revokes data access requests")
+ Rel(dac_member, daco_portal, "Reviews applications, requests clarifications")
+ Rel(daco_admin, daco_portal, "Imports, activates, and deactivates studies")
+
+ %% Relationships - Other
+ Rel(participant, participant_portal, "Provides e-consent, views data usage, withdraws consent, updates contact")
+ Rel(funder, reporting_module, "Views reports, QC metrics, data ingestion status (Read-only)")
+ Rel(external_platforms, research_portal, "Accesses PCGL data programmatically via GA4GH APIs")
+
+ UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="2")
+```
+
+## Persona Definitions
+
+### Administrative & Infrastructure Support
+* **Super-Admin:** Full super-admin access to the PCGL platform. Can manage all COManage groups, OIDC clients, enrollment flows, and system-wide configuration. Can create new roles and designate other admins. This is the highest-privilege group.
+* **Data Admin:** Manages data-related administrative operations across the platform. Can register new studies, register custom schemas, assign data submitters to studies, flag submissions as validated, and configure data-related settings. Does not have system-level infrastructure access.
+* **Operational Support:** Operational support staff who assist data submitters with onboarding, study setup, and submission issues. Can create studies, register participants, perform data wrangling, and manage day-to-day submission operations (including submitting clinical and genomics data on behalf of a data submitter). Does not have system admin access, only create/edit data permissions.
+* **DevOps & Infrastructure:** DevOps and infrastructure staff responsible for managing the SD4H Kubernetes clusters, monitoring, backups, disaster recovery, storage management, and service deployments. Can trigger pipeline runs, manage Globus endpoints, manage S3 buckets and keys, provision TRE instances, and monitor all system health. Does not make data governance or access decisions.
+
+### Data Submission & Research
+* **Data Submitter:** Submits clinical and/or genomic data to a specific study. Can upload clinical TSV/metadata, deposit genomic files via Score CLI, register file metadata with Song manifests, register participants, validate data against schemas, and view submission status. Scoped strictly to the studies they are assigned to.
+* **Researcher:** Any authenticated user who discovers data through the Research Portal and/or requests access through the DACO portal. Before access approval, can log into the research portal and DACO portal. After DAC approval, can view individual-level data for approved studies, export/download approved data, and access the TRE. A researcher may also be a data_submitter for a different study.
+* **Signing Official:** Signing official of any Data Access Application. They must be a qualified representative of a legal entity who has the administrative power to legally commit that entity to the terms and conditions of the data access agreement. Examples of institutional representatives include, but are not limited to: a Vice-President Research, a Research Director, or a Contracts Officer for the entity.
+* **DACO Collaborator:** Researchers or post-docs or students who are part of a project as the applicant, and want to access controlled data for research purposes.
+
+### Data Governance (DACO)
+* **DAC Chair:** Chair of a Data Access Committee. The only role that can issue final approval or rejection of data access requests in the DACO portal. Can also revoke previously granted access. Currently there is only one DAC for PCGL. A Local DAC is a DAC independent of the PCGL DAC and controls data access for studies under its governance. Only one Chair is allowed for Local DAC users.
+* **DAC Member:** Member of a Data Access Committee who can view and review submitted data access applications, add review comments, and request clarifications from applicants. Cannot approve or reject applications, as only the DAC Chair can make final decisions.
+* **DACO Admin:** Admin of the PCGL DACO Portal. The admin has two responsibilities: 1. Import studies. 2. Activate/Deactivate studies.
+
+### Other Participants & External Entities
+* **Study Participant:** A study participant who interacts with the Participant Portal. Can provide electronic consent, view how their data is used, see study results/summaries, withdraw consent, discover new research opportunities, and update their contact information. The Participant Portal contains PHI and is isolated from other PCGL components. Participants authenticate separately from other PCGL users.
+* **Funding Body Rep:** Representatives of funding bodies (e.g., Genome Canada) who need to view compliance reports, QC metrics, data ingestion status, and project milestones for the projects they fund. Access is read-only and limited to the Reporting Module. Do not interact with data directly.
+* **External Platforms:** External platforms and applications (e.g., gnomAD, commercial cloud analysis solutions) that access PCGL data programmatically via GA4GH APIs (DRS, htsget, refget). Authenticated via registered OIDC clients or API keys rather than individual user credentials. Access is scoped to authorized datasets.
diff --git a/design_decisions/patterns/guidance_common_elements_for_portals.md b/design_decisions/patterns/guidance_common_elements_for_portals.md
new file mode 100644
index 0000000..26b7f83
--- /dev/null
+++ b/design_decisions/patterns/guidance_common_elements_for_portals.md
@@ -0,0 +1,409 @@
+
+# Guide for Common Elements Across Portals
+
+[TL;DR: Figma Templates](/patterns/templates/figma.md)
+
+We value contributions and feedback and want you to contribute effectively. To make your experience as smooth as possible, [please reach out to us first][contrib].
+
+### How to read this guide
+Throughout this document, you will see HTML structures containing tokens like `{{ my_design_token }}`. This logicless syntax represents dynamic data.
+- **For Designers:** These tokens represent the elements or text nodes that need to be accounted for in your designs.
+- **For Developers:** Every token maps directly to a property in a corresponding `*.schema.json` file. These schemas dictate the strict data contract your React components must accept as props.
+
+> [!WARNING]
+> **_Under construction labels_**
+>
+> Please note the sections marked with "under construction" symbols: 🚧 🏗️ 👷🏾♀️ 🦺 ⚠️
+> This document will point out the work in progress using construction symbols.
+
+At the moment, we face some challenges trying to standardize the design token language. The aim is to follow a standard so any application is capable of translating the design tokens into code or visualizations. We have chosen JSON given its versatility in representing data.
+ - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring): To be considered if a CMS is introduced in the future.
+
+
+# Contents
+
+- [Pages](#pages)
+- [Templates](#templates)
+ - [Footer](#footer-template)
+ - [Header structure](#header-template)
+ - [Error pages](#error-pages)
+- [Landmarks (Organisms)](#landmarks-organisms)
+ - [Header](#header)
+ - [Footer](#footer)
+ - [User profile/account controls](#account-settings)
+ - [Menu options](#menu-options)
+- [Regions (Molecules)](#regions-molecules)
+ - [Authentication Components](#authentication-components)
+- [Components (Atoms)](#components-atoms)
+- [References](#references)
+
+## Pages
+
+- [ ] ⚠️ 🏗️ Terms and conditions
+> [!TIP]
+> For example, Canada includes the following:
+> _[Terms and conditions](https://www.justice.gc.ca/eng/terms-avis/index.html#usa)_.
+- [ ] ⚠️ 🏗️ Disclaimer
+> [!TIP]
+> For example, Illumina includes the following disclaimer:
+> _For Research Use Only, Not for use in diagnostic procedures (except as specifically noted)_.
+- [ ] ⚠️ 🏗️ Header
+- [ ] ⚠️ 🏗️ Footer
+- [ ] ⚠️ 🏗️ User settings
+- [ ] ⚠️ 🏗️ Menu
+
+
+## Templates
+
+### Footer Template
+[🔗 definition](#footer)
+
+**Visual representation**
+
+```mermaid
+---
+config:
+ treemap:
+ showValues: false
+---
+
+treemap-beta
+"Footer"
+ "Meta Footer"
+ "Terms and conditions": 80
+ "Image Logo": 20
+ "Navigation Links": 100
+ "Services Links": 100
+ "Contextual Links"
+ "Header": 20
+ "Links": 80
+
+```
+
+**Specific to our case**
+
+**_Contact and support links_**
+- Help, questions and comments
+- Privacy policy
+- Accessibility statement
+- Terms and conditions
+
+**_Navigation links_**
+- Languages
+- License
+- Copyright
+
+**_Images_**
+- Image Logo
+
+**_Services_**
+- Administration & Identity
+- Data Submission System
+- Research Portal
+- Participant Portal
+- SD4H Infrastructure
+
+
+### Header Template
+[🔗 definition](#header)
+
+**Visual representation**
+
+```mermaid
+---
+config:
+ treemap:
+ showValues: false
+---
+
+treemap-beta
+"Header"
+ "Menu": 20
+ "Link"
+ "Image Logo": 20
+ "Search Bar": 20
+ "Authentication"
+ "CILogon Button": 80
+ "Menu": 20
+
+```
+
+----------------------------------------------
+
+### Login
+**Login experience**
+
+The user experience is provided by CILogon. For example:
+> [!CAUTION]
+> For the actual specifications, visit the IAM documentation.
+
+```mermaid
+
+sequenceDiagram
+ autonumber
+ actor User
+ participant RA as Research App
+ participant CP as CILogon Proxy
+ participant IdP as Campus IdP
+ participant CO as COmanage / JWT
+
+ User->>RA: Attempts to access app
+ RA->>CP: Redirect to Proxy
+ CP->>User: Prompt for Institution Discovery
+ User->>CP: Selects Campus
+ CP->>IdP: Select & Redirect
+ IdP->>User: Prompt for Credentials
+ User->>IdP: Authenticates
+ IdP->>CO: SAML Assertion (AuthnResponse)
+ Note over CP,CO: CILogon and COmanage process claims/groups
+ CO->>RA: Issue Token (JWT)
+ RA->>User: Grant Access
+```
+
+After attempting to access the app, the user will be redirected to their institution. We cannot know exactly what the institution's login components look like, but they might be similar to the following example.
+
+
+```
+ // inside main
+ {{Header and welcoming message}}
+
+ {{ List of sign up or sign in options }} // passkey, Google, Institution...
+ {{ By proceeding, you agree to the Terms of Service and Privacy Notice }}
+
+```
+
+**After submitting the form**
+
+```
+ // inside main
+ {{Header and welcoming message}}
+
+ {{ By proceeding, you agree to the Terms of Service and Privacy Notice }}
+ {{ Use a different account link }}
+ {{ Forgot password link }} // only visible if user exists
+
+```
+**You will then be redirected to the PCGL application.**
+
+----------------------------------------------
+
+### Error pages
+
+The error page displays a user-friendly error message followed by the HTTP status code.
+```
+
+{{ Header with the Response status text group }} // Page not found
+{{ Instructions to go back - Link}}
+{{ response status code and specific text}}
+{{ Report and feedback form}} // Is this page useful? Yes No [Report a problem Form ]
+
+```
+The form could be something like:
+```
+Help us improve [Name of service]
+Do not include personal or financial information, such as your Social Insurance Number (SIN) or credit card details.
+What were you doing?
+What went wrong?
+```
+
+----------------------------------------------
+
+
+## Landmarks (Organisms)
+
+### Header
+
+For the header, we can organize the elements as follows:
+
+```html
+{{ accessibility_links }}
+
+ {{ menu_options }}
+ {{ image_logo }}
+ {{ search_bar }}
+ {{ authentication_components }}
+
+```
+
+> [!NOTE]
+> _Which elements are mandatory and which are optional?_
+>
+> The [**authentication component**](#authentication-components) is a MUST.
+>
+> The **skip links component** is a MUST.
+>
+> The rest of the elements are optional.
+
+
+| Template Token | Schema Property | Description |
+| --- | --- | --- |
+| `{{ menu }}` | [`header.schema.json#/properties/render_menu`][header-schema] | List of navigation items for the main menu. |
+| `{{ image_logo }}` | [`link.schema.json`][link-schema] | URL, alt text, and link for the portal's logo. |
+| `{{ search_bar }}` | [`header.schema.json#/properties/render_search_bar`][header-schema] | Configuration for the search input component. |
+| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | Mandatory user profile, login, or settings controls. |
+
+----------------------------------------------
+
+### Account Settings
+
+🚧 Account settings (Work in Progress)
+
+The settings page will have two sections: User Profile and Security, as well as a link to delete the account.
+What information is available? `voPerson`?
+This might not be relevant because the user technically will not have an account.
+
+
+For the account settings, we can organize the elements as follows:
+
+```html
+
+
+ {{ user_profile }}
+
+
+ {{ security }}
+
+
+ {{ API_tokens }}
+
+ {{ delete_account }}
+
+```
+
+----------------------------------------------
+
+### Footer
+Definition of elements inside the footer.
+
+> [!NOTE]
+> _Which elements are mandatory and which are optional?_
+>
+> The **meta information** is a MUST.
+> The rest of the elements are optional.
+
+For the elements inside a footer, let's combine our requirements with established best practices, such as the UK Government Design System and Nielsen Norman Group guidelines, which outline what users typically look for in a footer.
+
+ - Contextual header and links
+ - Secondary header and navigation items
+ - Links to our services
+ - Terms and conditions
+ - Image Logo
+
+
+Example:
+```html
+
+```
+
+| Design Token | Schema (Property) | Description |
+| --- | --- | --- |
+| `{{ contextual_header }}` | [`navigation.schema.json#/properties/renderTitle`][navigation-schema] | The title of the contextual area. |
+| `{{ contextual_links }}` | [`navigation.schema.json#/properties/renderLinks`][navigation-schema] | Links providing context to the current page. |
+| `{{ images }}` | [`avatar.schema.json`][avatar-schema] | Logos or visual elements displayed in the footer. |
+| `{{ secondary_navigation }}` | [`navigation.schema.json`][navigation-schema] | Links leading out of the service or to secondary areas. |
+| `{{ services_links }}` | [`navigation.schema.json`][navigation-schema] | Core service links like Privacy, Accessibility, Cookies, etc. |
+| `{{ meta_information }}` | [`footer-meta-item.schema.json`][footer-meta-schema] | Mandatory copyright or meta details. |
+
+----------------------------------------------
+
+## Regions (Molecules)
+- [ ] 🚧 Contextual header and links
+- [ ] 🚧 Secondary header and navigation items
+- [ ] 🚧 API Tokens list
+
+### Menu options
+Currently, there is one element for toggling the language.
+
+----------------------------------------------
+
+### Authentication Components
+**User profile/account controls**
+Before logging in, we must show the **CILogon Identity Provider Button** in the header.
+After logging in, the header shows the user menu instead of the **CILogon Identity Provider Button**.
+```
+ // Hamburger button with two elements "My settings" and "Sign out"
+{{ user name }}
+{{ My Settings }}
+{{ Log Out }}
+
+```
+
+Definition of authentication component elements.
+
+
+> [!NOTE]
+> _Which elements are mandatory and which are optional?_
+>
+> The **CILogon Identity Provider Button** is a MUST.
+
+
+**Login / Sign In / Sign Out / Log Out**
+
+The login experience is provided by the CILogon Identity Provider. For example, see the [CILogon example](https://cilogon.org/example/).
+
+
+> [!TIP]
+> CILogon has several [customization options][cilogon-config] that change the behavior and content of the CILogon website.
+
+----------------------------------------------
+
+### My Profile / Account Settings
+The authentication settings are managed by the identity provider organization.
+
+
+
+## Components (Atoms)
+- Text
+- [Link][link-schema]
+- Button
+
+## References
+
+### Design Guidelines
+- [GC Design System](https://design-system.canada.ca/)
+- [GOV.UK Design System](https://design-system.service.gov.uk/)
+- [Nielsen Norman Group: Footers](https://www.nngroup.com/articles/footers/)
+
+### Authentication (CILogon)
+- [CILogon Device Setup][cilogon-device]
+- [CILogon Skin Customization][cilogon-skin]
+- [CILogon Configuration Example][cilogon-config]
+
+### Internal Documentation
+- [Contribution Guidelines][contrib]
+- [Footer components][footer-data]
+- [Footer schema][footer-schema]
+- [Footer meta item schema][footer-meta-schema]
+- [Navigation schema][navigation-schema]
+- [Link schema][link-schema]
+- [Avatar schema][avatar-schema]
+
+
+
+[contrib]: /patterns/docs/CONTRIBUTING.md
+[cilogon-device]: https://www.cilogon.org/device
+[cilogon-skin]: https://www.cilogon.org/skins#h.52ndu647pi2y
+[cilogon-config]: https://cilogon.org/skin/config-example.xml
+[footer-data]: ./pages/footer-data.json
+[footer-schema]: ./organisms_landmarks/footer.schema.json
+[footer-meta-schema]: ./molecules_regions/footer-meta-item.schema.json
+[navigation-schema]: ./atoms_components/navigation.schema.json
+[link-schema]: ./atoms_components/link.schema.json
+[avatar-schema]: ./atoms_components/avatar.schema.json
+[header-schema]: ./organisms_landmarks/header.schema.json
+[menu_options]: ./#
+[search_bar]: ./#
diff --git a/design_decisions/patterns/molecules_regions/footer-meta-item.schema.json b/design_decisions/patterns/molecules_regions/footer-meta-item.schema.json
new file mode 100644
index 0000000..12cb42d
--- /dev/null
+++ b/design_decisions/patterns/molecules_regions/footer-meta-item.schema.json
@@ -0,0 +1,15 @@
+{
+ "$id": "molecules_regions/footer-meta-item.schema",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Footer Meta Item",
+ "type": "object",
+ "required": ["terms_conditions", "logo"],
+ "properties": {
+ "terms_conditions": {
+ "$ref": "/patterns/atoms_components/link.schema.json"
+ },
+ "logo": {
+ "$ref": "/patterns/atoms_components/avatar.schema.json"
+ }
+ }
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/organisms_landmarks/footer.schema.json b/design_decisions/patterns/organisms_landmarks/footer.schema.json
new file mode 100644
index 0000000..f441caf
--- /dev/null
+++ b/design_decisions/patterns/organisms_landmarks/footer.schema.json
@@ -0,0 +1,16 @@
+{
+ "$id": "organisms_landmarks/footer.schema",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Footer",
+ "type": "object",
+ "required": ["meta"],
+ "properties": {
+ "meta": {
+ "$ref": "/patterns/molecules_regions/footer-meta-item.schema.json"
+ },
+ "navigation": {
+ "type": "array",
+ "items": { "$ref": "/patterns/atoms_components/navigation.schema.json" }
+ }
+ }
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/organisms_landmarks/header.schema.json b/design_decisions/patterns/organisms_landmarks/header.schema.json
new file mode 100644
index 0000000..59a6171
--- /dev/null
+++ b/design_decisions/patterns/organisms_landmarks/header.schema.json
@@ -0,0 +1,21 @@
+{
+ "$id": "organisms_landmarks/header",
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "title": "Header",
+ "type": "object",
+ "required": ["render_auth"],
+ "properties": {
+ "render_auth": {
+ "type": "object"
+ },
+ "render_menu": {
+ "type": "object"
+ },
+ "image_logo": {
+ "$ref": "/patterns/atoms_components/link.schema.json"
+ },
+ "render_search_bar": {
+ "type": "object"
+ }
+ }
+}
\ No newline at end of file
diff --git a/design_decisions/patterns/pages/footer-data.json b/design_decisions/patterns/pages/footer-data.json
new file mode 100644
index 0000000..660ca09
--- /dev/null
+++ b/design_decisions/patterns/pages/footer-data.json
@@ -0,0 +1,82 @@
+{
+ "meta": {
+ "terms_conditions": {
+ "url": "/terms-and-conditions",
+ "children": {
+ "text": "Terms & Conditions"
+ }
+ },
+ "logo": {
+ "src": "/assets/images/company-logo-light.svg",
+ "alt": "Acme Corporation Logo",
+ "width": 180,
+ "height": 48
+ },
+ "variant": "dark-mode"
+ },
+ "navigation": [
+ {
+ "renderTitle": {
+ "text": "Products"
+ },
+ "renderLinks": {
+ "items": [
+ {
+ "url": "/products/platform",
+ "children": { "text": "Our Platform" }
+ },
+ {
+ "url": "/products/pricing",
+ "children": { "text": "Pricing" }
+ },
+ {
+ "url": "/products/integrations",
+ "children": { "text": "Integrations" }
+ }
+ ]
+ }
+ },
+ {
+ "renderTitle": {
+ "text": "Resources"
+ },
+ "renderLinks": {
+ "items": [
+ {
+ "url": "/blog",
+ "children": { "text": "Blog" }
+ },
+ {
+ "url": "/documentation",
+ "children": { "text": "Documentation" }
+ },
+ {
+ "url": "/community",
+ "children": { "text": "Community Forum" }
+ }
+ ]
+ }
+ },
+ {
+ "renderTitle": {
+ "text": "Company"
+ },
+ "renderLinks": {
+ "items": [
+ {
+ "url": "/about",
+ "children": { "text": "About Us" }
+ },
+ {
+ "url": "/careers",
+ "children": { "text": "Careers" }
+ },
+ {
+ "url": "/contact",
+ "children": { "text": "Contact Us" }
+ }
+ ]
+ }
+ }
+ ]
+}
diff --git a/design_decisions/patterns/templates/figma.md b/design_decisions/patterns/templates/figma.md
new file mode 100644
index 0000000..4d236c5
--- /dev/null
+++ b/design_decisions/patterns/templates/figma.md
@@ -0,0 +1,39 @@
+# Header Template
+## Checklist
+
+| Safety item | Rationale |
+| -------- | -------- |
+| Has Skip Link | Skip links can help users quickly move past blocks of content they do not want to navigate through. |
+| Has Signature Link | The home icon link is the first element a visitor sees. |
+| Has French link | Required by the Official Languages Act. |
+| Has authentication | PCGL uses CILogon / COmanage to manage users for all portals and services. |
+| Has nav | Do we need it? |
+| Has menu | Do we need it? |
+| Has breadcrumbs | Do we need it? |
+
+
+[](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0)
+
+_PCGL research portal header based on DACO designs_
+
+[](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0)
+
+_Government of Canada header design without the Signature Link_
+
+
+# Footer Template
+## Checklist
+
+
+| Safety item | Rationale |
+| -------- | -------- |
+| Has meta info | Marks the end of the page and displays site metadata. |
+| Has Signature Mark | Required to acknowledge CIHR support and promote research. |
+| Has main band | Identifies links to common PCGL themes or services. |
+| Has contextual band | Do we need specific links to the site or product? |
+
+
+
+[](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1)
+
+_Example including the meta item and DACO designs_