Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NHS England brand #53

Open
send2dan opened this issue Nov 21, 2024 · 6 comments
Open

NHS England brand #53

send2dan opened this issue Nov 21, 2024 · 6 comments

Comments

@send2dan
Copy link

For the UK it would be helpful to publish branding for the National Health Service (NHS) - The UK's largest employer after all

@gadenbuie
Copy link
Collaborator

gadenbuie commented Nov 22, 2024

Great idea, thanks! I started working on this a bit, here's what I came up with. You can see it in action in this shinylive app.

meta:
  name: 
    short: NHS
    full: National Health Service
  link:
    home: https://www.nhs.uk
    brand: https://www.england.nhs.uk/nhsidentity/identity-guidelines/

# # Download the NHS logos and store them next to _brand.yml
# # You'll have to update this section with the correct file names
# logo:
#   images:
#     header: nhs-logo.svg
#     header-white: nhs-logo-white.svg
#   small: nhs-logo-icon.svg
#   medium: header
#   large: header

color:
  palette:
    # Core neutrals (Level 2)
    white: "#FFFFFF"
    black: "#231F20"
    grey-dark: "#425563"
    grey-mid: "#768692"
    grey-pale: "#E8EDEE"
    
    # Blues (Level 1)
    blue-dark: "#003087"
    blue: "#005EB8"
    blue-bright: "#0072CE"
    blue-light: "#41B6E6"
    blue-aqua: "#00A9CE"
    
    # Greens (Level 3)
    green-dark: "#006747"
    green: "#009639"
    green-light: "#78BE20"
    green-aqua: "#00A499"
    
    # Purples and Pinks
    purple: "#330072"
    pink-dark: "#7C2855"
    pink: "#AE2573"
    
    # Reds
    red-dark: "#8A1538"
    red: "#DA291C"  # Emergency Services Red
    
    # Yellows and Orange
    orange: "#ED8B00"
    yellow-warm: "#FFB81C"
    yellow: "#FAE100"
    yellow-emergency: "#FFE600"  # RAL 1016 Sulphur Yellow
    
    # Bootstrap color aliases - using closest matches without duplication
    indigo: blue-dark
    cyan: blue-aqua
    teal: green-aqua
    
  foreground: black
  background: white
  primary: blue
  secondary: grey-dark
  tertiary: grey-pale
  success: green
  danger: red
  warning: yellow-warm
  info: blue-light
  light: grey-pale
  dark: grey-dark

typography:
  fonts:
    # Note: Frutiger is a licensed font you'd have to purchase or download
    # - family: Frutiger W01
    #   source: file
    #   files: 
    #     - path: fonts/FrutigerLTW01-55Roman.ttf
    #     - path: fonts/FrutigerLTW01-65Bold.ttf
    #       weight: bold
          
    - family: Arial
      source: system
  
  base:
    family: "Arial, sans-serif"
    line-height: 1.5

  headings:
    family: "Arial, sans-serif"
    weight: 700
    line-height: 1.25
    color: blue

defaults:
  bootstrap:
    defaults:
      # NHS specific variables could be added here
      enable-rounded: false

@Lextuga007
Copy link
Contributor

This is fabulous! Thank you. We can host/use it in NHS-R Community. My attempt was rushed so only a few colours https://github.com/nhs-r-community/NHSR-presentations

@gadenbuie
Copy link
Collaborator

That's awesome! I should let you know that I used the LLM prompting I described in this article to get started. It certainly made setting up the colors much easier (I just pasted screenshots of the colors listed in the NHS brand guidelines into the chat). So please do double-check the work.

I'd be happy to include NHS in the Inspiration page if you're interested. If you want to submit a PR, great! Or you could just let me know when your _brand.yml is mostly ready and I can create the article from your example and include links to your GitHub project.

@tomjemmett
Copy link

A pedantic point, but this should be NHS England branding. The NHS is devolved to the four constituent nations, and each have their own branding rules.

(Noting this because, as an Englishman, I made this mistake once and got it pointed out by some lovely friends in Scotland!)

@Lextuga007
Copy link
Contributor

Well noted @tomjemmett NHS‐R Community uses NHS England branding and it would be good if we could submit on our community brand.yml whilst encouraging others to do that for the NHS organisations. Would that be OK @gadenbuie?

@gadenbuie gadenbuie changed the title NHS brand NHS England brand Nov 25, 2024
@Lextuga007
Copy link
Contributor

I've created an NHS-R Community brand.yml in our assets repository and applied it to some training slides to ensure it works ok. I'll do a PR here with this file and our logo.

Although the NHS branding (for England) is open under the OGL licence we have to be careful with using the NHS logo as this isn't covered under the same licence. However, anyone wishing to use the NHS England colours can use the NHS-R Community as we use all the same colours (although I did remove the yellow-emergency as it wasn't a true match on the hex) and can replace the official logo for appropriate outputs. If anyone has any queries or needs help they can get in touch with us via any of the contact details in our postcard.

Finally, thanks for this fantastic work! The _brand.yml is a dream to use! 🥇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants