Style Guide

Dans le respect du design atomique, ce style guide est le répertoire, la bibliothèque concrète, de tout ce joyeux petit bazar.

Retour au site

1. Couleurs

Toutes les couleurs utilisées par l'interface du site.

primary : #5863f8
secondary : #3a3a4f
success : #3adb76
warning : #ffae00
alert : #cc4b37
light-gray : #e6e6e6
medium-gray : #9d9da9
dark-gray : #555566
black : #22222d
white : #fefefe

2. Typographie

Cette charte utilise la typographie Inter UI pour les titres et paragraphes.

Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

Heading Level 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

Heading Level 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

Heading Level 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum. This is a link.

3. Boutons

Les boutons se décomposent en deux familles : les "primary" et les "secondary"

3.1 Primary

Ce sont les boutons principaux de chaque page. Leur taille peut être ajustée avec les classes .tiny, .small, and .large.

<a href="#" class="primary large button">Large button</a>
<a href="#" class="primary button">Regular button</a>
<a href="#" class="primary small button">Small button</a>
<a href="#" class="primary tiny button">Tiny button</a>

3.2 Secondary

Ces boutons sont dédiés aux actions secondaires sur les pages.

<a href="#" class="secondary large button">Large button</a>
<a href="#" class="secondary button">Regular button</a>
<a href="#" class="secondary small button">Small button</a>
<a href="#" class="secondary tiny button">Tiny button</a>

4. Callout

Les callouts sont des encarts de contenus simples, traditionnellement délimités par une bordure et/ou un fond.

<div class="callout">
  <h2>Callout title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisi eros. Phasellus mattis nisi a tempor rutrum. Vivamus elementum eget nisl in scelerisque. Vestibulum interdum justo ante, eleifend volutpat turpis dignissim quis. Aliquam mollis ante lacinia nisl auctor, ut iaculis urna commodo. Morbi ornare viverra bibendum. Donec varius arcu a bibendum pellentesque. Aliquam congue massa eu elementum gravida.</p>
</div>

Callout title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisi eros. Phasellus mattis nisi a tempor rutrum. Vivamus elementum eget nisl in scelerisque. Vestibulum interdum justo ante, eleifend volutpat turpis dignissim quis. Aliquam mollis ante lacinia nisl auctor, ut iaculis urna commodo. Morbi ornare viverra bibendum. Donec varius arcu a bibendum pellentesque. Aliquam congue massa eu elementum gravida.

5. Cards

Les cards allient image et texte. Présentes en grilles, elles servent généralement de point d'accès visuel vers d'autres pages.

<div class="grid-container">

  <div class="grid-x grid-margin-x grid-margin-y">

    <a href="#" class="medium-6 cell">
      <div class="card">
        <div class="card-images">
          <img src="http://via.placeholder.com/200x200?text=Logo" class="project-logo" alt="">
          <img src="http://via.placeholder.com/800x600?text=Image" class="project-thumbnail" alt="Project title">
        </div>
        <div class="card-section">
          <h2>Card title<span class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 -2 22 18" class="icon-arrow-right"><polygon points="20.3 7 14.2 0.9 12.4 2.7 15.5 5.8 1.7 5.8 1.7 8.3 15.5 8.3 12.4 11.3 14.2 13.1 20.3 7 20.3 7 " fill="#FFF"/></svg></span></h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </a>

    <a href="#" class="medium-6 cell">
      <div class="card">
        <div class="card-images">
          <img src="http://via.placeholder.com/200x200?text=Logo" class="project-logo" alt="">
          <img src="http://via.placeholder.com/800x600?text=Image" class="project-thumbnail" alt="Project title">
        </div>
        <div class="card-section">
          <h2>Card title<span class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 -2 22 18" class="icon-arrow-right"><polygon points="20.3 7 14.2 0.9 12.4 2.7 15.5 5.8 1.7 5.8 1.7 8.3 15.5 8.3 12.4 11.3 14.2 13.1 20.3 7 20.3 7 " fill="#FFF"/></svg></span></h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </a>

  </div>

</div>