-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2922eab
commit 65a92be
Showing
25 changed files
with
283 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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">}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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">}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.