Documentation du design system de huitquatre
Dernière mise à jour du : 30/12/22 13:45
Sommaire
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.
La logomark fait apparaitre le "h" et le "4" de huitquatre dans l'espace négatif.
Le logotype peut être placé en dessous ou à côté de la logomark (version large).
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.
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.
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.
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
Figure du mage -> Alchimiste
Transmute la matière, change le monde
Réinvente le web pour un "brand new web"
COULEURS
Palettes possibles
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 :
Si l'on souhaite un thème aux couleurs plus marquées, il suffit d'utiliser pantoned5 et pantoned2 en fond. Par exemple :
Les couleurs pantoned3-4 servent d'accent pour établir une hierarchie ou différencier certains contenus. Par exemple :