HospitalRun design

Structure

What you can find in this repo:

• Social media avatar and covers
• Logo files
  • .png, .jpg, .svg
  • Native logo artwork files
• Common images
• UI
  • color palette (scss, png, svg)
• All assets of v1.0.0-beta
  • avatar
  • beta
  • email
  • images
• Marketing
  • Stickers (157mmx30 mm and 47mmx50mm) print with stickerrmule
  • Slides
• UI design files (Sketch file, mocks of various screens)

What we plan to add:

• New frontend mockups
• New HR marketing photos
• Brand guide
• HospitalRun frontend CSS styleguide
• HospitalRun frontend pattern library

Contributing

Contributions are always welcome. If you’re serious about contributing, we also encourage you to join our Slack, where the majority of the project communication happens.

Read carefully before committing!

This repo use Git Large File Storage (LFS) that replaces large files with text pointers inside Git, while storing the file contents on a remote server like GitHub.com.

Currently, the associated files are:

• psd
• ai
• sketch

If you add a new file format, you need to associate it with a large file in this repository. You need Git LFS, if you don't have it, follow this guide. To associate a file type in your repository with Git LFS, enter git lfs track followed by the name of the file extension you want to automatically upload to Git LFS.

For example, to associate a .psd file, enter the following command:

$ git lfs track "*.psd"
> Adding path *.psd

Every file type you want to associate with Git LFS will need to be added with git lfs track. This command amends your repository's .gitattributes file and associates large files with Git LFS.

Further reading

Branding

Default logo:

Logo on navy bg:

Logo with transparent bg:

Color palette

Here you can find an initial reference of the official HospitalRun colours.

Hexadecimal

#1abc9c
#009b9e
#273647
#011627
#fdfffc

SCSS

/* HSL */
$color1: hsla(168%, 76%, 42%, 1);
$color2: hsla(181%, 100%, 31%, 1);
$color3: hsla(212%, 29%, 22%, 1);
$color4: hsla(207%, 95%, 8%, 1);
$color5: hsla(100%, 100%, 99%, 1);

/* RGB */
$color1: rgba(26, 188, 156, 1);
$color2: rgba(0, 155, 158, 1);
$color3: rgba(39, 54, 71, 1);
$color4: rgba(1, 22, 39, 1);
$color5: rgba(253, 255, 252, 1);

Typefaces

• Titles: Kanit

• Body text: Montserrat