design-guidelines.md

For external sharing, and additional project-specific details, please use the PDF guidelines:
MetaBrainz Guidelines | MusicBrainz Guidelines

For style (writing) guidelines, please use: Style Guidelines

Table of contents

1. Logo
2. Colours
3. Typefaces
4. Design Guidance
5. Accessibility
6. Page Elements

Logo

Logo folder

Use logos and logo sizes consistently across projects.
For instance, Brainz logo mini is used as the top left logo across all MB database project pages.
When unsure, align with other projects.

Logo size

Although the icons should never be smaller than the minimum sizes, you may increase sizes as you wish.

/
Brainz icon / Brainz logo mini
No minimum

/
Brainz icon detail / Brainz logo small
Minimum height: 32px/12mm
Under this size details can get unclear and distracting, particularly for visually impaired users.

/
Brainz logo no text / Brainz logo
Minimum height: 55px/20mm
Ideally has generous sizing and space to breathe. If the page/app/context is very busy, consider using a simpler icon instead.

A specific logo may display fine at a smaller size, but other project logos have more detail, and won’t. Smaller sizes make consistent logo display across projects difficult and are to be avoided. However there may be fringe cases where using smaller sizes is appropriate.

Logo spacing

An area of clear space must be maintained around all sides to preserve the integrity of the logo. This separation from other elements optimises visibility and recognition.
Clear space on all sides of the logo is one ‘half honeycomb’.

Logo don'ts

Don't stretch the logo.

Don't alter the logo or add effects such as drop shadows, embossing, etc.

Don't change the logo opacity

Don't use the logo on a busy or colorful background

Colours

MetaBrainz sub-brands each have their own colour, which is combined with the Metabrainz orange.
The PANTONE colour system is a way of matching print inks to a colour as closely as possible. Please use the digital colour for digital applications, the PANTONE swatch only applies to physical print items.

MetaBrainz does not use full black.
This includes for web use, for instance all headers and body text should be set to #1e1e1e.
A non-full black is easier to read against a white background, including for most visual impairments.

MetaBrainz colours

MetaBrainz orange
R 235, G 116, B 59 C 4, M 67, Y 87, K 0 #eb743b PANTONE:1575 C

MetaBrainz black (not full black)
R 30, G 30, B 30 C 72, M 66, Y 65, K 75 #1e1e1e PANTONE:Neutral Black C

Colours are to be used sparingly.

If a sub-brands colour is purple, it doesn’t mean headers should be purple - usually you should use the MB black.
Let the logo at the top of the page stand out.

Gradients are to be used sparingly.

Gradients are appropriate for backgrounds on landing pages and minimal items that are high up in the hierarchy (level of importance on the page).
It should not be used for elements that contain data/information, beyond a header. It should be used sparingly on data-centric pages, if at all.
When in doubt, leave it out.

MetaBrainz sub-brand colours

MetaBrainz
R 90, G 168, B 84 C 69, M 11, Y 90, K 0 #5aa854 PANTONE: 7738 C

MetaBrainz gradient
#3b9766 > #ffa500 (web orange)

MusicBrainz sub-brand colours

MusicBrainz
R 186, G 71, B 143 C 27, M 86, Y 9, K 0 #ba478f PANTONE: 674 C

MusicBrainz gradient
#800080 (web purple) > #ffa500 (web orange)

CritiqueBrainz sub-brand colours

CritiqueBrainz
R 54, G 181, B 178 C 71, M 5, Y 35, K 0 #36b5b2 PANTONE: 7465 C

CritiqueBrainz gradient
#36b5b2 > #ffa500 (web orange)

ListenBrainz sub-brand colours

ListenBrainz
R 53, G 48, B 112 C 95, M 95, Y 24, K 12 #353070 PANTONE: 274 C

ListenBrainz gradient
#353070 > #ffa500 (web orange)

BookBrainz sub-brand colours

BookBrainz
R 78, G 126, B 194 C 72, M 46, Y 0, K 0 #754e37 PANTONE: 660 C

BookBrainz gradient
#754e37 > #ffa500 (web orange)

Picard sub-brand colours

Picard
R 119, G 27, B 133 C 66, M 100, Y 9, K 2 #771b85 PANTONE: 7588 C

Picard gradient
#771b85 > #ffa500 (web orange)

Cover Art Archive sub-brand colours

Cover Art Archive
R 32, G 101, B 108 C 87, M 45, Y 49, K 20 #20656c PANTONE: 5473 C

Cover Art Archive gradient
#20656c > #ffa500 (web orange)

OfficeBrainz sub-brand colours

OfficeBrainz
R 255, G 222, B 0 C 2, M 9, Y 100, K 20 #ffde00 PANTONE: Yellow C

OfficeBrainz gradient
#ffde00 > #ffa500 (web orange)

Typefaces

Font folder

Note: The MetaBrainz sites are catching up, so you may see other fonts in use.

The MetaBrainz logo family uses the the Roboto Type face.
It is also our preferred display font (e.g. for headers) across print and web.

For content* use Sintony, across print and web.
*body, field, table and menu text.

Typeface styles

Header 1 (h1)
Roboto Bold / 700 48pt
Only for the boldest of display purposes. Suitable for a home page, potentially on a gradient.

Header 2 (h2)
Roboto Bold / 700 32pt
Suitable for a page or panel title. Use very sparingly.

Header 3 (h3)
Roboto Regular / 400 26pt
Use when dividing page content up into distinct sections.

Title
Sintony Bold / 700 17pt / 18 pt*
For titles within the content/content sections.

Paragraph (p)
Sintony Regular / 400 14pt / 15 pt*
Our standard content font.

Small print
Sintony Regular / 400 12pt / 13 pt*
Use sparingly. Potentially in sub-text grey (#808080)

*mobile

Design Guidance

Hierarchy

Think about the layout in terms of ‘hierarchy’. (Hierarchy: the order of importance of elements)
Add emphasis (good location, style, colour, imagery, etc) to elements at the top of the hierarchy.
De-emphasize elements at the bottom of the hierarchy.

Less is more

When using design elements - colours, space, graphics - consider how it helps users understand and use data.
Functionality first, then enhance with visual tools.

Less clicks = better

MetaBrainz users spend millions of hours entering data- this means that one more click to perform a common task can have a massive time cost.
Make a users path clear, then get them there quick.

Mobile-first?

Not always: Assess the audience for a page/site.
The nature of some MetaBrainz data-entry orientated projects means that users may primarily use a desktop.
The ultimate aim is to provide every user with a good experience, regardless of their device.

Accessibility

We aim to be accessible for all users.
Use your judgement based on the situation, and make your best effort to apply these guidelines.

Images should always have alt-text, and critical content/information be included as text.
Alternate Text describes an image for people using screen readers, or who cannot display images for another reason.
Images should accompany, not replace, important text, otherwise consider repeating the information as text.

Font/text size:
No smaller than 12-14pt (1-1.2em / 16-19px)
‘Small print’ can be reduced down to 9pt

Contrast:
Use sufficient contrast levels between background and text.
Use a contrast checker to assess this: https://webaim.org/resources/contrastchecker/
Your type/background combination should achieve a ratio of 4+ on the checker.

Contrast 2:
Extreme contrast is also to be avoided.
This is why we use #1e1e1e instead of full black, on pure white.

Page Elements

For guidance on page elements please refer to the individual project guideline PDF's.