MEB-132: Added MetaBrainz and MusicBrainz guidelines to discuss

guidelines/design-guidelines.md

@@ -1 +1,248 @@
+For external sharing, and additional project-specific details, please use the PDF guidelines:</br>
+<a href="/MetaBrainz design guidelines.pdf">MetaBrainz Guidelines</a> | <a href="/MusicBrainz design guidelines.pdf">MusicBrainz Guidelines</a>
 
+## Table of contents
+
+1. [Logo](#logo)
+2. [Colours](#colours)
+3. [Typefaces](#typefaces)
+4. [Design Guidance](#design-guidance)
+5. [Accessibility](#accessibility)
+6. [Page Elements](#page-elements)
+
+## Logo
+
+Use logos and logo sizes consistently across projects.</br>
+For instance, Brainz logo mini is used as the top left logo across all MB database project pages.
+</br>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.
+
+><img src="../brand/logos/MetaBrainz/SVG/MetaBrainz_logo_icon.svg" alt="MetaBrainz icon" height="24px"> / <img src="../brand/logos/MetaBrainz/SVG/MetaBrainz_logo_mini.svg" alt="MetaBrainz logo mini" height="23px"></br>
+>*Brainz icon / Brainz logo mini*</br>
+>No minimum
+
+><img src="../brand/icons/metabrainz-icon-detail.svg" alt="MetaBrainz icon detail" height="34px"> / <img src="../brand/logos/MetaBrainz/SVG/MetaBrainz_logo_small.svg" alt="MetaBrainz logo small" height="32px"></br>
+>*Brainz icon detail / Brainz logo small*</br>
+>Minimum height: 32px/12mm</br>
+>Under this size details can get unclear and distracting, particularly for visually impaired users.
+
+><img src="../brand/logos/MetaBrainz/SVG/MetaBrainz_logo_no_text.svg" alt="MetaBrainz logo no text" height="58px"> / <img src="../brand/logos/MetaBrainz/SVG/MetaBrainz_logo.svg" alt="MetaBrainz logo" height="55px"></br>
+>*Brainz logo no text / Brainz logo*</br>
+>Minimum height: 55px/20mm</br>
+>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
+
+><img src="../documentation/images/logo_margin.png" alt="logo with margin guide" height="137px"></br>
+>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.</br>
+>Clear space on all sides of the logo is one ‘half honeycomb’.
+
+###### Logo don'ts
+
+><img src="../documentation/images/dont_stretch.png" alt="stretched logo" height="33px"></br>
+>*Don't* stretch the logo.
+
+><img src="../documentation/images/dont_effects.png" alt="logo with drop shadow effect added" height="33px"></br>
+>*Don't* alter the logo or add effects such as drop shadows, embossing, etc.
+
+><img src="../documentation/images/dont_opacity.png" alt="logo at half opacity" height="33px"></br>
+>*Don't* change the logo opacity
+
+><img src="../documentation/images/dont_background.png" alt="logo with checkered background" height="33px"></br>
+>*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.</br>
+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.</br>
+This includes for web use, for instance all headers and body text should be set to #1e1e1e.</br>
+A non-full black is easier to read against a white background, including for most visual impairments.
+
+###### MetaBrainz colours
+
+>![#eb743b](https://via.placeholder.com/15/eb743b/eb743b.png) MetaBrainz orange</br>
+>`R 235, G 116, B 59` `C 4, M 67, Y 87, K 0` `#eb743b` `PANTONE:1575 C`
+
+>![#1e1e1e](https://via.placeholder.com/15/1e1e1e/1e1e1e.png) MetaBrainz black (not full black)</br>
+>`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.</br>
+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).</br>
+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.</br>
+When in doubt, leave it out.
+
+###### MetaBrainz sub-brand colours
+
+>![#5aa854](https://via.placeholder.com/15/5aa854/5aa854.png) MetaBrainz</br>
+>`R 90, G 168, B 84` `C 69, M 11, Y 90, K 0` `#5aa854` `PANTONE: 7738 C`
+
+>![#3b9766](https://via.placeholder.com/15/3b9766/3b9766.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) MetaBrainz gradient</br>
+>`#3b9766` > `#ffa500 (web orange)`
+
+###### MusicBrainz sub-brand colours
+
+>![#ba478f](https://via.placeholder.com/15/ba478f/ba478f.png) MusicBrainz</br>
+>`R 186, G 71, B 143` `C 27, M 86, Y 9, K 0` `#ba478f` `PANTONE: 674 C`
+
+>![#800080](https://via.placeholder.com/15/800080/800080.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) MusicBrainz gradient</br>
+>`#800080 (web purple)` > `#ffa500 (web orange)`
+
+###### AcousticBrainz sub-brand colours
+
+>![#4e7ec2](https://via.placeholder.com/15/4e7ec2/4e7ec2.png) AcousticBrainz</br>
+>`R 78, G 126, B 194` `C 72, M 46, Y 0, K 0` `#4e7ec2` `PANTONE: 660 C`
+
+>![#4e7ec2](https://via.placeholder.com/15/4e7ec2/4e7ec2.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) AcousticBrainz gradient</br>
+>`#4e7ec2` > `#ffa500 (web orange)`
+
+###### MessyBrainz sub-brand colours
+
+>![#b50437](https://via.placeholder.com/15/b50437/b50437.png) AcousticBrainz</br>
+>`R 181, G 4, B 55` `C 20, M 100, Y 78, K 11` `#b50437` `PANTONE: 200 C`
+
+>![#b50437](https://via.placeholder.com/15/b50437/b50437.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) AcousticBrainz gradient</br>
+>`#b50437` > `#ffa500 (web orange)`
+
+###### CritiqueBrainz sub-brand colours
+
+>![#36b5b2](https://via.placeholder.com/15/36b5b2/36b5b2.png) CritiqueBrainz</br>
+>`R 54, G 181, B 178` `C 71, M 5, Y 35, K 0` `#36b5b2` `PANTONE: 7465 C`
+
+>![#36b5b2](https://via.placeholder.com/15/36b5b2/36b5b2.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) CritiqueBrainz gradient</br>
+>`#36b5b2` > `#ffa500 (web orange)`
+
+###### ListenBrainz sub-brand colours
+
+>![#353070](https://via.placeholder.com/15/353070/353070.png) ListenBrainz</br>
+>`R 53, G 48, B 112` `C 95, M 95, Y 24, K 12` `#353070` `PANTONE: 274 C`
+
+>![#353070](https://via.placeholder.com/15/353070/353070.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) ListenBrainz gradient</br>
+>`#353070` > `#ffa500 (web orange)`
+
+###### BookBrainz sub-brand colours
+
+>![#754e37](https://via.placeholder.com/15/754e37/754e37.png) BookBrainz</br>
+>`R 78, G 126, B 194` `C 72, M 46, Y 0, K 0` `#754e37` `PANTONE: 660 C`
+
+>![#754e37](https://via.placeholder.com/15/754e37/754e37.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) BookBrainz gradient</br>
+>`#754e37` > `#ffa500 (web orange)`
+
+###### Picard sub-brand colours
+
+>![#771b85](https://via.placeholder.com/15/771b85/771b85.png) Picard</br>
+>`R 119, G 27, B 133` `C 66, M 100, Y 9, K 2` `#771b85` `PANTONE: 7588 C`
+
+>![#771b85](https://via.placeholder.com/15/771b85/771b85.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) Picard gradient</br>
+>`#771b85` > `#ffa500 (web orange)`
+
+###### Cover Art Archive sub-brand colours
+
+>![#20656c](https://via.placeholder.com/15/20656c/20656c.png) Cover Art Archive</br>
+>`R 32, G 101, B 108` `C 87, M 45, Y 49, K 20` `#20656c` `PANTONE: 5473 C`
+
+>![#771b85](https://via.placeholder.com/15/771b85/771b85.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) Cover Art Archive gradient</br>
+>`#20656c` > `#ffa500 (web orange)`
+
+###### OfficeBrainz sub-brand colours
+
+>![#ffde00](https://via.placeholder.com/15/ffde00/ffde00.png) OfficeBrainz</br>
+>`R 255, G 222, B 0` `C 2, M 9, Y 100, K 20` `#ffde00` `PANTONE: Yellow C`
+
+>![#ffde00](https://via.placeholder.com/15/ffde00/ffde00.png) ![#ffa500](https://via.placeholder.com/15/ffa500/ffa500.png) OfficeBrainz gradient</br>
+>`#ffde00` > `#ffa500 (web orange)`
+
+## Typefaces
+
+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.</br>
+It is also our preferred display font (e.g. for headers) across
+print and web.
+
+For content* use Sintony, across print and web.</br>
+*body, field, table and menu text.
+
+###### Typeface styles
+
+>Header 1 (h1)</br>
+>`Roboto` `Bold / 700` `48pt`</br>
+>Only for the boldest of display purposes. Suitable for a home page, potentially on a gradient.
+
+>Header 2 (h2)</br>
+>`Roboto` `Bold / 700` `32pt`</br>
+>Suitable for a page or panel title. Use very sparingly.
+
+>Header 3 (h3)</br>
+>`Roboto` `Regular / 400` `26pt`</br>
+>Use when dividing page content up into distinct sections.
+
+>Title</br>
+>`Sintony` `Bold / 700` `17pt / 18 pt*`</br>
+>For titles within the content/content sections.
+
+>Paragraph (p)</br>
+>`Sintony` `Regular / 400` `14pt / 15 pt*`</br>
+>Our standard content font.
+
+>Small print</br>
+>`Sintony` `Regular / 400` `12pt / 13 pt*`</br>
+>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)</br>
+Add emphasis (good location, style, colour, imagery, etc) to elements at the top of the hierarchy.</br>
+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.</br>
+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.</br>
+Make a users path clear, then get them there quick.
+
+###### Mobile-first? 
+Not always: Assess the audience for a page/site.</br>
+The nature of some MetaBrainz data-entry orientated projects means that users may primarily use a desktop.</br>
+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.</br>
+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.</br>
+Alternate Text describes an image for people using screen readers, or who cannot display images for another reason.</br>
+Images should accompany, not replace, important text, otherwise consider repeating the information as text.
+
+>Font/text size: </br>
+>No smaller than 12-14pt (1-1.2em / 16-19px)</br>
+>‘Small print’ can be reduced down to 9pt
+
+>Contrast: </br>
+>Use sufficient contrast levels between background and text.</br>
+>Use a contrast checker to assess this: https://webaim.org/resources/contrastchecker/</br>
+>Your type/background combination should achieve a ratio of 4+ on the checker.
+
+>Contrast 2: </br>
+>Extreme contrast is also to be avoided.</br>
+>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.