Harmonize visual identity across connected applications

[j08lue]

There are a few applications that are connected to the GHG Center, which could benefit from using the same visual identity of the (re-styled) GHG Center dashboard.

• Docs https://us-ghg-center.github.io/ghgc-docs/
• JupyterHub https://hub.ghg.center/
• Public GitHub Org https://github.com/US-GHG-Center
• Cloud Browse UI https://d36s2ep3ahcq5b.cloudfront.net/browseui/#ch4_inverse_flux/

In the new style, the visual identity is rather neutral without a logo, to give full attention to the constituting agencies.

Let us come up with a way to use the same identity on the connected applications.

Acceptance criteria

• [x] Decided on a design
• [x] Implemented design in docs
• [x] Implemented design in JupyterHub page https://github.com/US-GHG-Center/ghgc-architecture/issues/20
• [x] Implemented design in GitHub org
• [ ] Implemented design in Cloud Browse UI
• [x] Updated JupyterHub page style again https://github.com/US-GHG-Center/ghgc-architecture/issues/23

[j08lue]

We could re-open this for a more ambitious round of harmonization, comparing with similar platforms.

For example, the Copernicus Data Space Ecosystem (CDSE) has a similar set of components, similarly implemented, and did a nice job on making things coherent, if only through colors and fonts:

• Homepage (Drupal): https://dataspace.copernicus.eu
• Docs (quarto): https://documentation.dataspace.copernicus.eu
• Hub (JupyterHub): https://jupyterhub.dataspace.copernicus.eu/

Same with Planetary Computer.

• Homepage: https://planetarycomputer.microsoft.com/
• Docs: https://planetarycomputer.microsoft.com/docs
• Hub: https://planetarycomputer.microsoft.com/compute

[faustoperez]

Reopening, will take a look.

[faustoperez]

Here's the revised DOCS design.

On the current site, there's a toggle for dark/light mode but I think it's safe to remove that functionality, as we don't have it on the main site and it's overkill to create a 2nd palette. Other than that, no major changes, just updating the font and color styles.

I have put the global links and search bar at the top of the content section, I think the hierarchy is clearer this way and the sidebar is less crowded.

Mockup:

Link to Figma file 👉 https://www.figma.com/file/9INQauBWhiRxvOWDGhRrxO/US-GHG-Center?type=design&node-id=431%3A1245&mode=design&t=pJ2zWr0qib0pVaM4-1