removed FDP and added context for chart colours

docs/index.md

@@ -1,4 +1,4 @@
-#Build user centred products for the NHS Federated Data Platform
+#Build user centred products for the Data Platform
 ##How to use this guide
 By using this guide, you can ensure that the user of your product encounters a familiar and easy-to-use interface, and will find it similar to other FDP products they use.
 
@@ -143,10 +143,14 @@ Our content is factual, neutral and unambiguous. We do not use metaphors - we sa
 - every chart or other visualization must have a title. This benefits all users, and particularly those using a screen-reader. [type size medium]
 - keep axis titles as short as possible [type size medium]
 - category names on a chart axis or in a legend should be clear and concise [type size medium]
-- for data from two or more time periods, put the older values before the newer values 
+- for data from two or more time periods, put the older values before the newer values
+- always include some written explanation for the chart and an accompanying table for those who cannot use the data visualisation
+- include a source so that a user can track back to the original data
 
 ### Chart colours 
-To be used in this order (if more than 12 then start again from the first colour):
+We recommend to stick to no more than five different variables (colours or tints) on a graph or other chart type, otherwise your visualisation will be confusing. If you need to plot more than 5 variables, you should consider alternative ways to visualise this information.
+
+For any reasons, if we have to use more than five colours in a visualisation then use the colours listed below, in this order:
 
 - <p class="inline-container">One colour chart<span class="colour-rect" style="--colour: #005EB8; --txt_clr: white">#005EB8</span></p> 	
 - <p class="inline-container">Two colour chart<span class="colour-rect" style="--colour: #41B6E6; --txt_clr: white">#41B6E6</span></p> 

mkdocs.yml

@@ -1,4 +1,4 @@
-site_name: Federated Data Platform | Design guide
+site_name: Data platform | Developers design guide
 # site_url: https://example.com
 repo_url: https://github.com/baracoffice/pagetest
 repo_name: Design guide page test

site/index.html

@@ -549,12 +549,12 @@ <h3 id="1-core-colours">1. Core colours</h3>
 <h3 id="2-type-sizes">2.   Type sizes</h3>
 <ul>
 <li>the FDP uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users, therefore would recommend only using Medium and Large</li>
-<li>if specifying text in points or pixels, the optimal default paragraph font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
+<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
 </ul>
 <h3 id="3-using-colours">3.   Using colours</h3>
 <p>Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration.</p>
 <ul>
-<li>follow the colour guidance below to ensure consistent experience for users across all products </li>
+<li>see the section on Guidance on use of colour - to ensure consistent experience for users across all products </li>
 <li>a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: <ul>
 <li>ensure that the contrast between colours is high enough using a colour tool</li>
 <li>word things differently</li>
@@ -579,7 +579,7 @@ <h3 id="5-links">5.   Links</h3>
 <li>when a link will open a new tab for the user, add the words “opens in new tab” (or window) to the line</li>
 </ul>
 <h2 id="guidance-on-use-of-colour">Guidance on use of colour</h2>
-<p>Users find colours indicative of meaning, therefore, we need to use colour intentionally, for specific actions and consistently</p>
+<p>Users find colours indicative of meaning, therefore, we need to use colour intentionally and consistently</p>
 <ul>
 <li><strong>Accessibility:</strong> make sure that what the colour is "saying" is available in other ways. To communicate with people who cannot see well or distinguish colours, you may need to:<ul>
 <li>word things differently </li>
@@ -649,9 +649,9 @@ <h3 id="tone-of-voice">Tone of voice</h3>
 <h2 id="numbers-dates-and-time">Numbers, Dates and time</h2>
 <ul>
 <li>we use numerals for numbers (including 1 and 2)</li>
-<li>for numbers over 999, use a comma for clarity – for example, 1,000</li>
-<li>always start with zero for values less than 1 (Example: 0.75 not .75)</li>
-<li>ensure negative values are indicated by a minus sign (Example: -65)</li>
+<li>for numbers over 999, use a comma for clarity (for example, 1,000)</li>
+<li>always start with zero for values less than 1 (for example: 0.75 not .75)</li>
+<li>ensure negative values are indicated by a minus sign (for example: -65)</li>
 <li>we spell out "one" when it means "a" or to avoid repeating a word</li>
 </ul>
 <h3 id="dates">Dates</h3>
@@ -672,7 +672,7 @@ <h2 id="images">Images</h2>
 <h3 id="informative-images">Informative images</h3>
 <ul>
 <li>do not use text in images </li>
-<li>provide alt-text when images convey meaning or information.  If decorative, use an empty alt-text tag [“”]</li>
+<li>provide alt-text when images convey meaning or information.</li>
 <li>keep alt-text to around 125 characters or 2 sentences </li>
 <li>if there's important information that you cannot fit in 125 characters (for example, you're describing a complex chart), include this information in the alt-text or consider linking to more information for screen reader users. </li>
 </ul>
@@ -684,7 +684,6 @@ <h3 id="decorative-images">Decorative images</h3>
 <h3 id="product-tiles">Product tiles</h3>
 <ul>
 <li>if there is a need to add an image to a product tile, ensure that it is a copyright free image that is meaningful to users, and not a screengrab of a product page</li>
-<li>look out for more guidance on how to ensure that product tiles are accessbile for those using screen-readers - in a future release</li>
 </ul>
 <h2 id="data-visualisations">Data Visualisations</h2>
 <ul>