# Guide de style Front-end

## Mise en page

Les maquettes ont été conçues selon les largeurs suivantes :

- Mobile : 375px  
- Desktop : 1440px  

> 💡 Ce sont uniquement les tailles de conception. Assurez-vous que le contenu est réactif et respecte les exigences WCAG en testant sur toute la gamme de tailles d’écran, de 320px aux grands écrans.

## Couleurs

- Blanc : hsl(0, 0%, 100%)  

- Ardoise 300 : hsl(212, 45%, 89%)  
- Ardoise 500 : hsl(216, 15%, 48%)  
- Ardoise 900 : hsl(218, 44%, 22%)  

## Typographie

### Texte principal

- Taille de police (paragraphe) : 15px  

### Police

- Famille : [Outfit](https://fonts.google.com/specimen/Outfit)  
- Graisses : 400, 700  

> 💎 Il s'agit d'un défi gratuit+. Si vous souhaitez voir tous les détails du design et vous exercer avec des outils professionnels comme Figma, vous pouvez télécharger le fichier de conception à partir de la même source que le code de départ.

---
VERSION ORIGINALE ENGLISH

# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.

## Colors

- White: hsl(0, 0%, 100%)

- Slate 300: hsl(212, 45%, 89%)
- Slate 500: hsl(216, 15%, 48%)
- Slate 900: hsl(218, 44%, 22%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 700

> 💎 This is a free+ challenge. So, if you want to see all the design details and practice working with professional tools like Figma, you can download the design file from where you downloaded the starter code.
