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.
Les pictogrammes svg, ou "artwork", sont disponibles dans le dossier dist/artwork/pictograms.
Contrairement aux icônes, les pictogrammes sont composés de 3 couleurs : "decorative", "minor", "major".
La couleur mineure peut être modifiée par un modificateur d'accentuation (ex: fr-artwork--green-emeraude)
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-major"></use>
</svg>
<svg aria-hidden="true" class="fr-artwork fr-artwork--green-emeraude" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/moon.svg#artwork-major"></use>
</svg>
Pour fonctionner en accord avec les couleurs du design system, les fichiers SVG doivent être formatés de cette façon :
<svg width="80px" height="80px" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<style>
.fr-artwork-decorative {
fill: #ECECFF;
}
.fr-artwork-minor {
fill: #E1000F;
}
.fr-artwork-major {
fill: #000091;
}
</style>
<g class="fr-artwork-decorative" id="artwork-decorative">
<path d="M67,16c-0.5514,0-1-0.4486-1-1s0.4486-1,1-1s1,0.4486,1,1S67.5514,16,67,16z M19,72c-0.5514,0-1-0.4486-1-1
s0.4486-1,1-1s1,0.4486,1,1S19.5514,72,19,72z M31,10c-0.5514,0-1-0.4486-1-1c0-0.55145,0.4486-1,1-1s1,0.44855,1,1
C32,9.5514,31.5514,10,31,10z M69,60c-0.5514,0-1-0.4486-1-1s0.4486-1,1-1s1,0.4486,1,1S69.5514,60,69,60z M45,70
c-0.5514,0-1-0.4486-1-1s0.4486-1,1-1s1,0.4486,1,1S45.5514,70,45,70z M9,32c-0.5514,0-1-0.4486-1-1s0.4486-1,1-1s1,0.4486,1,1
S9.5514,32,9,32z" />
</g>
<g class="fr-artwork-minor" id="artwork-minor">
<path d="M41,30c-0.5523,0-1,0.4477-1,1s0.4477,1,1,1s1-0.4477,1-1S41.5523,30,41,30z M59,38c-0.5523,0-1,0.4477-1,1
s0.4477,1,1,1s1-0.4477,1-1S59.5523,38,59,38z M55,38c0.5523,0,1,0.4477,1,1c0,0.5128-0.386,0.9355-0.8834,0.9933L55,40h-2
c-0.5523,0-1-0.4477-1-1c0-0.5128,0.386-0.9355,0.8834-0.9933L53,38H55z M48,31c0-0.5523-0.4477-1-1-1h-2l-0.1166,0.0067
C44.386,30.0645,44,30.4872,44,31c0,0.5523,0.4477,1,1,1h2l0.1166-0.0067C47.614,31.9355,48,31.5128,48,31z" />
</g>
<g class="fr-artwork-major" id="artwork-major">
<path d="M59.90668,47.08899c-2.4024,7.6662-9.49188,12.91333-17.52948,12.91333
c-10.14819,0-18.37512-8.26733-18.37512-18.46643c0-7.85461,4.93793-14.82916,12.2738-17.42346
c1.87921-0.66461,3.32355,1.68457,1.9613,3.1073c-2.30841,2.41095-3.5921,5.59399-3.5921,8.95575
c0,6.76794,5.2041,12.37939,11.8927,12.89435c0.5506,0.04236,0.96271,0.52319,0.92035,1.07379
c-0.04242,0.55066-0.52325,0.96271-1.07385,0.92029c-7.72986-0.59503-13.7392-7.07483-13.7392-14.88843
c0-3.61078,1.28583-7.04816,3.61322-9.75067l0.22668-0.25684L36.2854,26.2464c-6.06519,2.4425-10.13849,8.30981-10.2796,14.9339
l-0.00372,0.35559c0,9.09668,7.33374,16.46643,16.37512,16.46643c6.92578,0,13.0639-4.375,15.39703-10.84619l0.06879-0.19916
l-0.19684,0.18811c-1.96747,1.82373-4.37738,3.07861-6.99451,3.63629l-0.39404,0.07843
c-0.54303,0.1004-1.0647-0.25842-1.1651-0.80151c-0.10052-0.54309,0.25836-1.0647,0.80145-1.16516
c2.62329-0.48511,5.02313-1.77515,6.89282-3.70404C58.17792,43.75378,60.4975,45.2038,59.90668,47.08899z M15,58
c-0.55231,0-1,0.44769-1,1s0.44769,1,1,1s1-0.44769,1-1S15.55231,58,15,58z M55,28h2l0.11658-0.00671
C57.61401,27.93549,58,27.51282,58,27c0-0.55231-0.44769-1-1-1h-2l-0.11658,0.00671C54.38599,26.06451,54,26.48718,54,27
C54,27.55231,54.44769,28,55,28z M23,58h-4l-0.11658,0.00671C18.38599,58.06451,18,58.48718,18,59c0,0.55231,0.44769,1,1,1h4
l0.11658-0.00671C23.61401,59.93549,24,59.51282,24,59C24,58.44769,23.55231,58,23,58z" />
</g>
</svg>