Documentation du design system de huitquatre

Dernière mise à jour du : 30/12/22 13:45

Sommaire

  1. Valeurs - WHY
  2. Logos
  3. Spacing
  4. Typographie
  5. Elements de langage, ton, registre
  6. Couleurs
  7. Icônes

Nos valeurs

  • Modernité

    "Brand new web"

  • Efficience

    "Less is more"

  • Accessibilité

    "Pour tou·tes"


  • Why ?

    Changer les mentalités sur l'approche des technologies

  • How ?

    Montrer qu'il est possible de faire autrement

  • What ?

    Des sites écologiques, accessibles, performants et créatifs


Message

Le web est à votre service et n'est pas un outil d'asservissement.

Slogan

C'est bien fait pour vous !

Logotype / Logomark

Origines - explications

Le logotype est simplement "huitquatre" avec Libre Franklin en 900.

huitquatre

La logomark fait apparaitre le "h" et le "4" de huitquatre dans l'espace négatif.

logo logo logo

Le logotype peut être placé en dessous ou à côté de la logomark (version large).

logo logo

Les élèments de la logomark doivent être tintés de manière à créer un gradient où le contraste est maximal en bas à gauche et minimal en haut à droite. Le logotype est toujours affiché avec le contraste maximum.

logo logo

Placement du logo : clearspace - espace libre

Passez la souris / cliquez sur le logo

Cupcake ipsum dolor sit amet croissant marzipan liquorice. Lemon drops cake chupa chups macaroon cotton candy I love sweet roll. Cake chupa chups I love sweet roll jelly cake cake chocolate bar caramels.

I love gummi bears marzipan macaroon donut sweet roll oat cake lollipop. Icing cheesecake marzipan bear claw I love. Lemon drops sweet roll tart caramels macaroon candy biscuit sweet roll. Pie I love pie sweet candy canes I love I love.

I love apple pie I love wafer dessert dessert tiramisu liquorice. Jelly gingerbread sugar plum I love lemon drops halvah cotton candy dessert icing. Halvah sweet roll pudding liquorice jelly beans.

Cupcake ipsum dolor sit amet croissant marzipan liquorice. Lemon drops cake chupa chups macaroon cotton candy I love sweet roll. Cake chupa chups I love sweet roll jelly cake cake chocolate bar caramels.

I love gummi bears marzipan macaroon donut sweet roll oat cake lollipop. Icing cheesecake marzipan bear claw I love. Lemon drops sweet roll tart caramels macaroon candy biscuit sweet roll. Pie I love pie sweet candy canes I love I love.

I love apple pie I love wafer dessert dessert tiramisu liquorice. Jelly gingerbread sugar plum I love lemon drops halvah cotton candy dessert icing. Halvah sweet roll pudding liquorice jelly beans.

On doit respecter un espacement d'au moins la petite largeur d'un rectangle du logo

<div class="logo">
  <img class="w-64 logo-normal-margin"/>
</div>
<div class="logo">
  <img class="w-64 logo-large-margin"/>
</div>

Cupcake ipsum dolor sit amet croissant marzipan liquorice. Lemon drops cake chupa chups macaroon cotton candy I love sweet roll. Cake chupa chups I love sweet roll jelly cake cake chocolate bar caramels.

I love gummi bears marzipan macaroon donut sweet roll oat cake lollipop. Icing cheesecake marzipan bear claw I love. Lemon drops sweet roll tart caramels macaroon candy biscuit sweet roll. Pie I love pie sweet candy canes I love I love.

I love apple pie I love wafer dessert dessert tiramisu liquorice. Jelly gingerbread sugar plum I love lemon drops halvah cotton candy dessert icing. Halvah sweet roll pudding liquorice jelly beans.

Cupcake ipsum dolor sit amet croissant marzipan liquorice. Lemon drops cake chupa chups macaroon cotton candy I love sweet roll. Cake chupa chups I love sweet roll jelly cake cake chocolate bar caramels.

I love gummi bears marzipan macaroon donut sweet roll oat cake lollipop. Icing cheesecake marzipan bear claw I love. Lemon drops sweet roll tart caramels macaroon candy biscuit sweet roll. Pie I love pie sweet candy canes I love I love.

I love apple pie I love wafer dessert dessert tiramisu liquorice. Jelly gingerbread sugar plum I love lemon drops halvah cotton candy dessert icing. Halvah sweet roll pudding liquorice jelly beans.

Téléchargement

version web en SVG, manipulable via CSS

Cliquez sur l'image que vous souhaitez télécharger.

#logo_normal ou #logo_large
// toujours utiliser l'ID du logo. Le style est appliqué globalement par défaut.
#id .logotype
// style du texte (logotype)
#id .logomark
// style du logo (logomark)
#id .topright/.topleft/.bottomright/.bottomleft
// style de chaque rectangle du logo
#id .util
// style du h4
#id .h
// style du h
#id .quatre
// style du 4

version thémisée, à utiliser tel quel

Cliquez sur l'image que vous souhaitez télécharger.

Viva Magenta 2023
Very Peri 2022
Ultimate Grey 2021
Illuminating 2021
Classic Blue 2020
Living Coral 2019
Ultra Violet 2018
Greenery 2017
Serenity 2016
Rose Quartz 2016
Marsala 2015
Radiant Orchid 2014
Emerald 2013
Tangerine Tango 2012
Honeysuckle 2011
Turquoise 2010
Mimosa 2009
Blue Iris 2008
Chili Pepper 2007
Sand Dollar 2006
Blue Turquoise 2005
Tigerlily 2004
Aqua Sky 2003
True Red 2002
Fuschia Rose 2001
Cerulean 2000

Spacing

Pour les blocs de textes

Largeur maximale de 50ch ou de 40ch (<1024px)

2rem entre les paragraphes ou 1rem (<640px)

p{@apply max-w-[40ch] lg:max-w-[50ch]}
.blocText{@apply space-y-4 sm:space-y-8}

Marges globales

Marges horizontales (16px / 32px / 64px)

.wrapper{px-4 sm:px-8 md:px-16}

Marges des titres

Ceci est un h1. Soufflé Cupcake ipsum dolor sit amet.

Ceci est un h2. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar.

Ceci est un h3. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer..

Ceci est un h4. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer..

Ceci est un h5. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer.I love carrot cake pastry chocolate bar cupcake.

Typographie

Libre Franklin

Cette fonte s'adapte à la fois aux textes longs et aux titres. C'est donc la seule que nous utilisons sur tous les supports.

Exception : pour l'écriture de code informatique, nous utiliserons la fonte monospace par défaut du navigateur pour ne pas augmenter inutilement le poids de la page.


Thin - weight : 100 Light - weight : 300 Regular - weight : 400 Black - weight : 900

A a ( â, À à), (Æ æ), B b, C c (Ç ç), D d, E e (É é, Ê ê, È è, Ë ë), F f, G g, H h, I i (Î î, Ï ï), J j, K k, L l, M m, N n (Ñ ñ), O o (Ô ô), (Œ œ), P p, Q q, R r, S s, T t, U u (Û û, Ù ù), V v, W w, X x, Y y (Ÿ ÿ), Z z

0123456789

" © ® ± ² ² ™ ¼ ½ ½ “ ” „ •


Paragraphes

Une succession de paragraphes doit être encapsulée dans un élement blocText.
<div class="blocText">
  <p>bla bla bla</p>
  <p>bla bla bla</p>
  <p>bla bla bla</p>
</div>

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Nous livrons des sites internet parfaitement optimisés pour le référencement naturel (SEO) et des stratégies de développement de votre trafic (suivi de mots-clés, contenus, netlinking…) en green SEO.

Spécialiste de l’Inbound Marketing, notre service de rédaction web crée des contenus puissants et pertinents pour votre cible : le SEO pour attirer, le marketing pour augmenter votre taux de conversion.

Pilier central de votre notoriété, votre identité visuelle construit votre image de marque. Créations graphiques web et print : charte graphique, logo, visuels pour les réseaux sociaux…

Titres

Ceci est un h1. Soufflé Cupcake ipsum dolor sit amet.

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Ceci est un h2. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar.

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Ceci est un h3. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer..

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Ceci est un h4. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer..

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Ceci est un h5. Cupcake ipsum dolor sit amet. Soufflé liquorice brownie liquorice sugar plum gummies dragée I love wafer.I love carrot cake pastry chocolate bar cupcake.

One Page, site vitrine ou e-commerce écologique, codé sur-mesure en JAMstack et facilement administrable. Performance, accessibilité, design unique et responsive. L’Expérience Utilisateur au cœur de notre création de site.

Éléments de langage, ton, registre

  • Pas de langage parlé sur le site, moyen sur les réseaux sociaux.
  • Langage courant avec termes techniques expliqués
  • Utilisation de mèmes
  • Fun / amusement / humour / second degré
  • Bienveillant
  • Utilisation des émojis
  • Inclusif
  • Phrases courtes
  • Vocabulaire précis
  • Accessible (glossaire)
  • Pédagogue
  • Sourcé
  • Diagrammes, inforgraphies, ...

Storytelling

Tableau l'alchimiste par David Teniers le jeune

Figure du mage -> Alchimiste

Transmute la matière, change le monde

Réinvente le web pour un "brand new web"

COULEURS

Palettes possibles

Viva Magenta - 2023
Very Peri - 2022
Ultimate Grey - 2021
Illuminating - 2021
Classic Blue - 2020
Living Coral - 2019
Ultra Violet - 2018
Greenery - 2017
Serenity - 2016
Rose Quartz - 2016
Marsala - 2015
Radiant Orchid - 2014
Emerald - 2013
Tangerine Tango - 2012
Honeysuckle - 2011
Turquoise - 2010
Mimosa - 2009
Blue Iris - 2008
Chili Pepper - 2007
Sand Dollar - 2006
Blue Turquoise - 2005
Tigerlily - 2004
Aqua Sky - 2003
True Red - 2002
Fuschia Rose - 2001
Cerulean - 2000

Codes couleurs

Passez la souris / cliquez sur une couleur

Description du système

Le système est composé de 12 "couleurs" qui permettent de couvrir un large panel de situation.

Les 12 couleurs peuvent être divisées en 2 groupes : les couleurs Pantone et les neutres. La version colorée Pantone doit être préférée à la version neutre mais la version neutre peut être utilisée dans certains cas (impression noir & blanc par exemple).

Un contraste suffisant est obtenu en utilisant pantoned6 sur pantoned1-3 (ou neutral6 sur neutral1-2) et pantoned1 sur pantoned4-6. Cela permet par exemple la création d'un thème sombre ou clair. Par exemple :

Ratio de contraste > :1

Si l'on souhaite un thème aux couleurs plus marquées, il suffit d'utiliser pantoned5 et pantoned2 en fond. Par exemple :

Ratio de contraste > :1

Les couleurs pantoned3-4 servent d'accent pour établir une hierarchie ou différencier certains contenus. Par exemple :

Ratio de contraste > :1

ICÔNES