Retour

Fondamentaux (core)

Le package core est utilisé comme fondation du Design System, il contient plusieurs éléments fondamentaux.

### Typographie

Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l'État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.

### Icônes

Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.

### Icônes de favoris - Favicon

L’icône de favoris est un petit icône associé à un site web. Il permet à l’utilisateur de repérer qu’il se trouve sur un site de l'état.

### Medias

Les médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.

### Grille

La grille proposée par le design system vous permet de structurer vos pages et vos contenus simplement.

Documentation

Snippet à inclure dans 

<meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
<link rel="apple-touch-icon" href="../../../dist/favicon/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="../../../dist/favicon/favicon.svg" type="image/svg+xml">
<!-- si favicon.ico peut etre placé à la racine du serveur, retirer la ligne ci-dessous -->
<link rel="shortcut icon" href="../../../dist/favicon/favicon.ico" type="image/x-icon"><!-- 32×32 -->
<link rel="manifest" href="../../../dist/favicon/manifest.webmanifest" crossorigin="use-credentials">
<!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
<!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->

Tailles et formats

L'icône de favori (favicon) du design système est disponible sous différents formats et tailles pour correspondre aux différents supports.

favicon.ico (32px)

favicon svg

favicon.svg

favicon svg

apple-touch-icon.png (180px)

apple-touch-icon png

Chrome / Android icons (importées depuis le nanifest.webmanifest)
android-chrome-192x192.png (192px)

Chrome / Android icon 192

android-chrome-512xx512.png (512px)

Chrome / Android icon 512

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.