Généralités

Les couleurs définies servent à la reconnaissance des sites Internet fédéraux, à la distinction d’éléments et interactions spécifiques ainsi qu’à l’orientation. La palette de couleurs utilisée est un élément de marque: son utilisation est obligatoire.

Trois couleurs sont utilisées: le ton rouge du logo fédéral, qui est complété par un ton rouge plus clair, un ton bleu et une palette de tons gris.

On retrouve le rouge dans la ligne rouge qui souligne l’en-tête et comme couleur de sélection dans la navigation et lorsque la souris passe sur un lien (mouseover). A part cela, on travaille avec différents tons gris. Ainsi, les titres et le corps du texte sont par exemple mis en œuvre dans un ton gris sombre.

#DC0018

$venetian-red

#F7001D

$red

#006699

$cerulean

#E7EDEF

$solitude

#F2F7F9

$clear-day

#FFFAB2

$mocassin

#D8E8EF

$pattens-blue

#66AFE9

$malibu

#000000

$black

#333333

$night-rider

#454545

$coal

#757575

$empress

#CCCCCC

$silver

#D5D5D5

$light-grey

#E5E5E5

$gainsboro

#F5F5F5

$smoke

#FFFFFF

$white

Un ton gris clair est utilisé comme couleur d’arrière-plan. Il est appliqué automatiquement à <body>.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.

Le rapport des côtés des images en format paysage est de 16:10 (format paysage complet – nombre d’or) ou de 16:5 (demi format paysage). Les images en format portrait ne possèdent aucun rapport spécifique des côtés. Cependant, un rapport de 2:3 est recommandé.

image description
image description
Caption content
Example Usage
image description Title + Image (16:10)
image description Title + Image 1/2 (16:5)
image description Video (16:9)
image description Teaser 2/4 (16:10)
image description Teaser 1/3 (16:10)
image description Teaser 1/4 (16:10)
image description Teaser Aside
image description Teaser Aside
image description Standard image + text / Standard infobox
image description Standard image + text / Standard infobox
image description Navigation teaser (16:10)
image description Teaser list

Icônes

FLEX

Les icônes utilisées sont conçues de manière monochrome et plate. Elles sont stockées sous forme de polices web et se trouvent dans les ressources comme polices TrueType.

Si l’élément est composé d’une seule icône, la classe est définie dans un conteneur <span>. Dans ce cas, la fonction de l’icône doit être expliquée dans un texte «alt». Communiqué: <span class="" alt="vorwärts">...</span>

Accessibilité

Afin que l’élément d’icône puisse être lu par un lecteur d’écran et/ou s’il possède une importance du point de vue sémantique, il doit être muni de l’attribut «aria» approprié. Sinon, on ajoutera un attribut aria-hidden="true". Selon les besoins, on peut également utiliser <span class="sr-only">icon description</span>.

My document

Icon Class
icon--exclam
icon--info
icon--arrow-right
icon--arrow-left
icon--arrow-top
icon--arrow-bottom
icon--left
icon--right
icon--top
icon--bottom
icon--screen
icon--notebook
icon--tablet-portrait
icon--tablet-landscape
icon--smartphone-portrait
icon--smartphone-landscape
icon--eye
icon--trash
icon--cart
icon--star
icon--tools
icon--settings
icon--list
icon--list-alt
icon--menu
icon--message
icon--print
icon--search
icon--doc
icon--pdf
icon--word
icon--excel
icon--calendar
icon--rss
icon--external
icon--facebook-light
icon--facebook
icon--instagram
icon--whatsapp
icon--linkedin
icon--linkedin-box
icon--xing
icon--xing-box
icon--pinterest
icon--youtube
icon--twitter
icon--google
icon--play
icon--pause
icon--backward
icon--forward
icon--step-backward
icon--step-forward
icon--fast-backward
icon--fast-forward
icon--corner
icon--square
icon--disc
icon--less
icon--greater
icon--power
icon--root
icon--close