posit-dev / brand-yml

Unified branding with a single yaml file.
https://posit-dev.github.io/brand-yml/
MIT License
33 stars 4 forks source link

NHS England brand #53

Open send2dan opened 1 week ago

send2dan commented 1 week ago

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

gadenbuie commented 6 days ago

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 commented 5 days ago

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 commented 5 days ago

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 commented 5 days ago

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 commented 5 days ago

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?

Lextuga007 commented 2 days ago

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! 🥇