Documentation for logo and design

content/docs/guides/design/index.en.md

@@ -0,0 +1,15 @@
+---
+title: "OSRD's design"
+linkTitle: "OSRD's design"
+weight: 10
+description: Colours, fonts, uses...
+resources:
+- src: "design.webp"
+  title: "OSRD's design"
+---
+
+Everything is presented on a dedicated website https://design.osrd.fr
+
+A "design system" is being developed.
+
+{{< figure src="images/design.webp" link="https://design.osrd.fr">}}

content/docs/guides/design/index.fr.md

@@ -0,0 +1,15 @@
+---
+title: "Le design d'OSRD"
+linkTitle: "Le design d'OSRD"
+weight: 10
+description: Les couleurs, la police, les usages...
+resources:
+- src: "design.webp"
+  title: "Le design d'OSRD"
+---
+
+Tout est présenté dans un site dédié https://design.osrd.fr
+
+Un « design system » est en cours d'élaboration.
+
+{{< figure src="images/design.webp" link="https://design.osrd.fr">}}

content/docs/guides/logo/index.en.md

@@ -0,0 +1,117 @@
+---
+title: "Logo"
+linkTitle: "Logo"
+weight: 10
+description: The OSRD logo, its variants, and its use
+resources:
+- src: "**.svg"
+---
+
+You can download each logo independently by clicking directly on it, or <a href="pictures/logo-osrd.zip">all the logos compressed into a zip file</a>.
+
+It is advisable to carefully choose the logo you want to use, depending on the background on which you want to display it.
+
+Modification, addition or deletion of the **shading** other than as presented in the logos **are not authorised** (this applies more generally throughout the design, the choice to use _drop shadows_ is part of the design considerations, it is not a variable element).
+
+
+### Official
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/logo-osrd-color-black.svg">
+    <img src="pictures/logo-osrd-color-black.svg" width=256>
+  </a>
+</div>
+
+### Official for dark backgrounds
+<div style="display:inline-block;padding:16px;background-color:#333">
+  <a target="_blank" href="pictures/logo-osrd-color-white.svg">
+    <img src="pictures/logo-osrd-color-white.svg" width=256>
+  </a>
+</div>
+
+### White
+<div style="display:inline-block;padding:16px;background-color:#333">
+  <a target="_blank" href="pictures/logo-osrd-white.svg">
+    <img src="pictures/logo-osrd-white.svg" width=256>
+  </a>
+</div>
+
+### Black
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/logo-osrd-black.svg">
+    <img src="pictures/logo-osrd-black.svg" width=256>
+  </a>
+</div>
+
+### Favicons, logo without text
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/fav-osrd-color.svg">
+    <img src="pictures/fav-osrd-color.svg" width=64>
+  </a>
+</div>
+<div style="display:inline-block;padding:16px;background-color:white;margin-left:16px">
+  <a target="_blank" href="pictures/fav-osrd-black.svg">
+    <img src="pictures/fav-osrd-black.svg" width=64>
+  </a>
+</div>
+<div style="display:inline-block;padding:16px;background-color:#333;margin-left:16px">
+  <a target="_blank" href="pictures/fav-osrd-white.svg">
+    <img src="pictures/fav-osrd-white.svg" width=64>
+  </a>
+</div>
+
+## 🚫 What you can't do
+
+#### Too small (< 16px height)
+<img src="pictures/dont/dont5.svg" style="height:32px">
+
+#### Disproportion
+<img src="pictures/dont/dont1.svg" style="margin-left:16px;height:64px">
+
+#### Change the text colour or drop shadow
+<img src="pictures/dont/dont2.svg" style="height:64px">
+
+#### Changing direction
+<img src="pictures/dont/dont3.svg" style="margin-left:16px;height:64px">
+
+#### Deformation
+<img src="pictures/dont/dont4.svg" style="height:64px">
+
+
+## ✅ What you can do
+
+#### Changing the internal colour for a specific event
+<div>
+  <a style="display:inline-block;padding:8px;background-color:white;" href="pictures/events/xmas-fav-osrd-color.svg" target="_blank">
+    <img src="pictures/events/xmas-fav-osrd-color.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:white;" href="pictures/events/xmas-logo-osrd-color-black.svg" target="_blank">
+    <img src="pictures/events/xmas-logo-osrd-color-black.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:#333" href="pictures/events/xmas-logo-osrd-color-white.svg">
+    <img src="pictures/events/xmas-logo-osrd-color-white.svg" style="height:32px">
+  </a>
+</div>
+
+<div style="margin-top:8px">
+  <a style="display:inline-block;padding:8px;background-color:white;" href="pictures/events/proud-fav-osrd-color.svg" target="_blank">
+    <img src="pictures/events/proud-fav-osrd-color.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:white;" href="pictures/events/proud-logo-osrd-color-black.svg" target="_blank">
+    <img src="pictures/events/proud-logo-osrd-color-black.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:#333" href="pictures/events/proud-logo-osrd-color-white.svg">
+    <img src="pictures/events/proud-logo-osrd-color-white.svg" style="height:32px">
+  </a>
+</div>
+
+#### Use of logo only (without text)
+<div style="display:inline-block">
+  <img src="pictures/fav-osrd-color.svg" style="height:64px">
+</div>
+
+## Colors
+
+> These colours are **those of the logo** and should not be confused with those of the overall design of the OSRD interface.
+
+<span style="display:inline-block;background-color:#786abf;width:128px;height:128px;color:white;font-weight:bold;padding:16px;margin-top:16px">#786ABF</span>
+<span style="display:inline-block;background-color:#c7b2de;width:128px;height:128px;color:white;font-weight:bold;padding:16px;margin-top:16px;margin-left:16px">#C7B2DE</span>

content/docs/guides/logo/index.fr.md

@@ -0,0 +1,117 @@
+---
+title: "Le logo"
+linkTitle: "Le logo"
+weight: 10
+description: Le logo d'OSRD, ses variantes, et son usage
+resources:
+- src: "**.svg"
+---
+
+Vous pouvez télécharger chaque logo indépendamment en cliquant directement dessus, ou <a href="pictures/logo-osrd.zip">tous les logos compressés dans un fichier zip</a>.
+
+Il est conseillé de bien choisir le logo à utiliser en fonction du fond sur lequel vous voulez l'afficher.
+
+La modification, ajout ou suppression de l'**ombrage** autre que tel que présenté dans les logos **ne sont pas autorisés** (cela est valable plus globalement dans tout le design, le choix de mettre des ombres portées fait partie des réflexions de design, ce n'est pas un élément variable).
+
+
+### Officiel
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/logo-osrd-color-black.svg">
+    <img src="pictures/logo-osrd-color-black.svg" width=256>
+  </a>
+</div>
+
+### Officiel pour les fonds sombres
+<div style="display:inline-block;padding:16px;background-color:#333">
+  <a target="_blank" href="pictures/logo-osrd-color-white.svg">
+    <img src="pictures/logo-osrd-color-white.svg" width=256>
+  </a>
+</div>
+
+### Blanc
+<div style="display:inline-block;padding:16px;background-color:#333">
+  <a target="_blank" href="pictures/logo-osrd-white.svg">
+    <img src="pictures/logo-osrd-white.svg" width=256>
+  </a>
+</div>
+
+### Noir
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/logo-osrd-black.svg">
+    <img src="pictures/logo-osrd-black.svg" width=256>
+  </a>
+</div>
+
+### Favicons, logos seuls
+<div style="display:inline-block;padding:16px;background-color:white">
+  <a target="_blank" href="pictures/fav-osrd-color.svg">
+    <img src="pictures/fav-osrd-color.svg" width=64>
+  </a>
+</div>
+<div style="display:inline-block;padding:16px;background-color:white;margin-left:16px">
+  <a target="_blank" href="pictures/fav-osrd-black.svg">
+    <img src="pictures/fav-osrd-black.svg" width=64>
+  </a>
+</div>
+<div style="display:inline-block;padding:16px;background-color:#333;margin-left:16px">
+  <a target="_blank" href="pictures/fav-osrd-white.svg">
+    <img src="pictures/fav-osrd-white.svg" width=64>
+  </a>
+</div>
+
+## 🚫 Ce qu'on ne doit **pas** faire
+
+#### Trop petit (< 16px de hauteur)
+<img src="pictures/dont/dont5.svg" style="height:32px">
+
+#### Disproportion
+<img src="pictures/dont/dont1.svg" style="margin-left:16px;height:64px">
+
+#### Changer la couleur du texte ou l'ombre portée
+<img src="pictures/dont/dont2.svg" style="height:64px">
+
+#### Changer le sens
+<img src="pictures/dont/dont3.svg" style="margin-left:16px;height:64px">
+
+#### Déformation
+<img src="pictures/dont/dont4.svg" style="height:64px">
+
+
+## ✅ Ce qu'on peut faire
+
+#### Modification de la couleur interne pour un évènement
+<div>
+  <a style="display:inline-block;padding:8px;background-color:white;" href="pictures/events/xmas-fav-osrd-color.svg" target="_blank">
+    <img src="pictures/events/xmas-fav-osrd-color.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:white;" href="pictures/events/xmas-logo-osrd-color-black.svg" target="_blank">
+    <img src="pictures/events/xmas-logo-osrd-color-black.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:#333" href="pictures/events/xmas-logo-osrd-color-white.svg">
+    <img src="pictures/events/xmas-logo-osrd-color-white.svg" style="height:32px">
+  </a>
+</div>
+
+<div style="margin-top:8px">
+  <a style="display:inline-block;padding:8px;background-color:white;" href="pictures/events/proud-fav-osrd-color.svg" target="_blank">
+    <img src="pictures/events/proud-fav-osrd-color.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:white;" href="pictures/events/proud-logo-osrd-color-black.svg" target="_blank">
+    <img src="pictures/events/proud-logo-osrd-color-black.svg" style="height:32px">
+  </a>
+  <a style="display:inline-block;margin-left:8px;padding:8px;background-color:#333" href="pictures/events/proud-logo-osrd-color-white.svg">
+    <img src="pictures/events/proud-logo-osrd-color-white.svg" style="height:32px">
+  </a>
+</div>
+
+#### Utilisation seule du logo (sans le texte)
+<div style="display:inline-block">
+  <img src="pictures/fav-osrd-color.svg" style="height:64px">
+</div>
+
+## Les couleurs
+
+> Ces couleurs sont **celles du logo**, elles ne sont pas à confondre avec celles du design global de l'interface d'OSRD.
+
+<span style="display:inline-block;background-color:#786abf;width:128px;height:128px;color:white;font-weight:bold;padding:16px;margin-top:16px">#786ABF</span>
+<span style="display:inline-block;background-color:#c7b2de;width:128px;height:128px;color:white;font-weight:bold;padding:16px;margin-top:16px;margin-left:16px">#C7B2DE</span>