Update with new HM branding

[CoreyBenefiel]

Description We have new branding from the HM website to add to the library. See sketch file.

Background: The full HM website rebrand includes: Logo Colours Spacing and Grid UI Elements Typography

Long term, we would need to determine which elements would be added to the Pattern Library. This also determines what tools can use the Pattern Library as it's a one size fits all approach.

Another consideration is the new font is a Google font which would have to be self-hosted and we need to determine where this would be hosted and ensure a solution was in place that doesn't adversely impact other sites if the font is changed in the future.

Immediate deliverable:

In the immediate, we have agreed to update the Pattern Library with only the brand colours (including applying them to the logo). These changes to the library need to be recorded as a minor release with no breaking changes. This will enable sites using the Pattern library (Engineering Handbook, Company Handbook and H2 ) to update automatically.

Once the library is updated, sites using the library should be checked and any styling issues resulting from the rebranding need to to be fixed.

Acceptance Criteria:

1. Long form and short form logo colours are updated https://www.sketch.com/s/d8053156-0933-4e9d-8b52-a5d3f9a752ed/a/L03mbq4
2. Branding colour palette added to the library https://www.sketch.com/s/d8053156-0933-4e9d-8b52-a5d3f9a752ed/a/R1zxoe8
3. Changes to library recorded as a minor release with no breaking changes. This will enable sites using the Pattern library to update automatically.
4. All sites using the Pattern Library accept the changes and do not have broken styling.

[CoreyBenefiel]

I've added @fsylum to the team on https://dashboard.altis-dxp.com/i/human-made-network which house all our sies https://handbook.hmn.md/wp-admin/ https://makeh2.hmn.md/wp-admin/ https://engineering.hmn.md/wp-admin/

Required repos include: https://github.com/humanmade/hm-pattern-library https://github.com/humanmade/h2 https://github.com/humanmade/Engineering-Handbook https://github.com/humanmade/hm-handbook-theme

You can ask specific pattern library questions in #hm-pattern-library. Sam Miller and Matt Haines-Young are the custodians of that channel.

[CoreyBenefiel]

Hi @fathanfis I've added you to the team on https://dashboard.altis-dxp.com/i/human-made-network which house all our sites https://handbook.hmn.md/wp-admin/ https://makeh2.hmn.md/wp-admin/ https://engineering.hmn.md/wp-admin/

Required repos include: https://github.com/humanmade/hm-pattern-library https://github.com/humanmade/h2 https://github.com/humanmade/Engineering-Handbook https://github.com/humanmade/hm-handbook-theme

You can ask specific pattern library questions in #hm-pattern-library. Sam Miller and Matt Haines-Young are the custodians of that channel.

I don't know if you have worked on the internal network previously, but just a heads up that once you've logged in to https://dashboard.altis-dxp.com/i/human-made-network and selected the humanmade-prod-01 environment and then selected hmn.md, you will be taken to Network Admin. At this point you will need to be proxied with Perimeter81 before selecting Network Admin to view all the sites on the network.

[ntwb]

FYI:

The below repos will also potentially be impacted by the changes in this issue: - https://github.com/humanmade/altis-cli/search?q=hm-pattern-library - https://github.com/humanmade/altis-demo/search?q=hm-pattern-library - https://github.com/humanmade/altis-marketing-site/search?q=hm-pattern-library - https://github.com/humanmade/cli/search?q=hm-pattern-library - https://github.com/humanmade/feelingrestful/search?q=hm-pattern-library

• https://github.com/humanmade/hmn.md/search?q=hm-pattern-library
• https://github.com/humanmade/home/search?q=hm-pattern-library
• https://github.com/humanmade/red-book/search?q=hm-pattern-library

[CoreyBenefiel]

@rmccue we're trying to update the HM Handbook, Engineering Handbook and H2 with the new branding (colours only).

We did believe these were the only sites referencing the Pattern Library where we are making the changes, but as you can see from Stephen's message above it looks there's more sites referencing the Pattern Library.

Can you confirm if the altis demo and altis marketing sites are actually using the pattern library and if you think they would be impacted? The links above highlight the mentions within each repo.

[rmccue]

I have no idea, sorry!

[gemplank]

@CoreyBenefiel we don't use the pattern library no 👍🏼

[CoreyBenefiel]

Phew! Thanks for confirming @gemplank.

[CoreyBenefiel]

https://github.com/humanmade/red-book/search?q=hm-pattern-library The engineering handbook uses the RedBook theme so I expect this would be impacted.

https://github.com/humanmade/home/search?q=hm-pattern-library If it updates home that's a bonus.

https://github.com/humanmade/hmn.md/search?q=hm-pattern-library I would expect this.

[CoreyBenefiel]

If we can't be certain about the impact this might have on other sites - are we able to roll back the minor release in the pattern library if there's an unintended outcome @fathanfis?

[ntwb]

If we can't be certain about the impact this might have on other sites - are we able to roll back the minor release in the pattern library if there's an unintended outcome @fathanfis?

Yes, we can revert the PR https://github.com/humanmade/hm-pattern-library/pull/174 after it's merged "if we have to rollback", ideally anything would be minor and possibly fixing any issues discovered would be the more beneficial approach, but will depend on complexity for sure

[CoreyBenefiel]

Thanks @ntwb. I also assume anything would be minor and we'd just deal with it individually rather than rolling back. Afterall, we're talking about some colour changes.

[fathanfis]

Apologize to not make it in time. Since, my day is end today, so I'll wrap all things up here.

The code is basically try to changing the colour (can be automatically updated via gitmodules) but then I found out that project using hm-pattern-library used different kinds of method (maybe I'm wrong).

Ways to use this library

1. H2 using manual way (downloaded folder)

   

2. Home using gitmodules

   

3. Red Book using gitmodules

   

What still outstanding?

1. Tested on local three of sites are working as expected, but haven't deploy it to development for each sites/projects
2. For project using manual way (download & replace), for example H2, need to create PR since a lot of changes from old version (maybe I'm wrong here, please re-check).

Steps to do

1. Create branch (maybe develop) in hm-pattern-library and merge this code. or deploy it using this version.
2. Update Home and Red Book branch gitmodule for hm-pattern-library, create PR and try it on development server
3. Download generated hm-pattern-library (build) to H2 src/pattern-library folder, create PR and try it on development server
4. So once it's done, we need to re-review all code, changes in projects that using H2, Home and Red Book Theme.

Please re-review all the process, steps todo and task that still outstanding @ntwb @CoreyBenefiel . Thanks and wish you all the best

[kadamwhite]

We stopped using this subrepo in H2 a while back https://github.com/humanmade/h2/commit/f7d9fc0f8f9b9507ef8239b1d5debcd69e2f5540 because we'd come to the conclusion that this repo was unmaintained. So changes here at present will not make their way through to H2.

[CoreyBenefiel]

That explains why it's a manual update for H2, unlike the others.

[ntwb]

Hi @fathanfis I've added you to the team on https://dashboard.altis-dxp.com/i/human-made-network which house all our sites https://handbook.hmn.md/wp-admin/ https://makeh2.hmn.md/wp-admin/ https://engineering.hmn.md/wp-admin/

Required repos include: https://github.com/humanmade/hm-pattern-library https://github.com/humanmade/h2 https://github.com/humanmade/Engineering-Handbook https://github.com/humanmade/hm-handbook-theme

You can ask specific pattern library questions in #hm-pattern-library. Sam Miller and Matt Haines-Young are the custodians of that channel.

I don't know if you have worked on the internal network previously, but just a heads up that once you've logged in to https://dashboard.altis-dxp.com/i/human-made-network and selected the humanmade-prod-01 environment and then selected hmn.md, you will be taken to Network Admin. At this point you will need to be proxied with Perimeter81 before selecting Network Admin to view all the sites on the network.

@CoreyBenefiel Could you set @abhishek-kaushik & I ( @ntwb ) to the above please, Abhi & I will try and tag-team work on this together this week (or next week)

[CoreyBenefiel]

Hey @ntwb, I added you both as Admins last week. https://github.com/humanmade/agency/issues/1235#issuecomment-1273207659

[CoreyBenefiel]

Hey @kadamwhite, I didn't pick this up when you asked to me to only review H2 in staging, but this change was intended to impact the Company handbook and Engineering handbook as well. In fact, they're are the important ones as they are public facing.

You might have lost this in the above conversation, but they required a different update approach to the H2 by using the pattern library.

[kadamwhite]

I did indeed miss that, @CoreyBenefiel, but I'll get on that today.

[CoreyBenefiel]

@kadamwhite copying this over from Slack for you here.

The accessibility police are on to us! https://hmn.slack.com/archives/C1P50S6E7/p1669841230482809 To be fair, the HM Website team didn't actually test this red (Furthermore kept changing it in the designs without telling us), but as you point out, it fails with regular text, and as Sam points out, we're going to use it in the public Handbooks. It'll only pass accessibility if we make the text bold and 14 point or larger. Can we please update and go with your original experiment using the Playbook blue for all the links. It will give us alignment across the HM site, and Playbook, and while red isn't used a huge amount in the Company Handbook it will address the issue there. Sorry for the additional hassle. I know it would have been ideal to resolve this at the start of your allocation, not after you've finished. I'll update the ticket with this as well.

[CoreyBenefiel]

@kadamwhite also copying this over from Slack for you here.

https://hmn.slack.com/archives/C2CD12K6K/p1670418522347749

[CoreyBenefiel]

Confirming the outstanding tasks to close this issue:

• [ ] Address the H2 accessibility issue with links by changing them to the same blue as Playbook.
• [ ] Investigate and (if needed) rectify the difference between H2 desktop and mobile font.
• [ ] Update the Human Made Handbook with branding colour changes, including links.

Note: Given we will be moving away from the Engineering Handbook in February I don't see any need to put the effort in to change the branding here. If it changes automatically as a result of the Pattern library update, then we should ensure it works.

[kadamwhite]

HM Handbook has been updated with the new theme: https://handbook.hmn-dev.altis.cloud/ available for testing on the dev site. I'll plan to deploy this to production tomorrow.

[kadamwhite]

H2 updates are also now available to test, at https://updates.hmn-dev.altis.cloud

I looked into the engineering handbook but the required v8js extension is not present on the local server or in the hmn-dev network, so there is no way to test or debug theme code in any environment but production. I prepared an updated version of the theme with the new brand colors from the pattern library, and tried a 2-minute hot-swap of those themes in production to see if it would "just work," but it did not—so in the interest of time, I abandoned work on the red-book theme used by the engineering handbook.

Note: If we wanted to, for branding consistency, we could switch the engineering handbook to use the same theme as the handbook.hmn.md site until we finish the switchover to playbook.

[CoreyBenefiel]

Thanks @kadamwhite, the Handbook and H2 look great.

I'm happy to push both to production along with the font styling change for H2.

Question: Is the Handbook using the same approach for font styles as you're proposing to implement in H2? I'm keen to get some consistency across our tools as well, so if we can take the same approach for the Handbook and H2 (and it doesn't make the Handbook look horrendous), I think we should. After you have pushed the above changes to production, I'd like to see what that H2 font styling approach would look like on Handbook Dev.

I'm happy to leave the Engineering Handbook as is for now. If in the new year, the DRIs indicate they won't be ready for the Playbook going public in first week of Feb then we can revisit the idea of swapping the theme.