Style Guide de Tilli

Commentaires Généraux

Le design actuel a une largeur fixe de 1180px sur desktop qui est Ă©galement le threshold en px pour passer du design desktop au design mobile (vice-versa).

Couleurs

Couleurs principales

#172c42Bleu marine
Couleur principale : texte, bordure, icĂ´nes, logos, footer
#F7F7F7Gris clair
Couleur des bordures des menus deroulants
#FFFFFFBlanc
Couleur de fond des blocks, des textes sur fond Bleu marine

Polices

Gotham

Gotham Medium // Utilisation : sous titres

Gotham Bold // Utilisation : titres

Roboto

Roboto Regular // Utilisation : sous titres, paragraphes

Roboto Bold // Utilisation : paragraphes

Tailles

taille S 14px - font Regular

taille M 18px - font Regular

taille L 22px - font Regular

taille XL 26px - font Regular

taille 2XL 32px - font Regular

taille 3XL 48px - font Regular

taille 4XL 60px - font Regular

Titres

Titre de niveau 1 - page



Titre de niveau 2 - block

Ceci est un sous titre
niveau 2 - block

Titre de niveau 3 - paragraphe

Ceci est un sous titre niveau 3 - paragraphe
et bien sûr pas un sous titre niveau 28

Textes

Paragraphe

Lucas ipsum dolor sit amet lars grievous maul ben gamorrean ewok darth antilles yoda darth. Yavin lando amidala c-3po jango maul vader dooku. Organa ewok endor vader jade secura hoth zabrak. Hutt solo aayla tatooine ackbar windu. Wedge jabba skywalker darth mon mon. C-3po bespin kamino leia yoda darth. Mothma ahsoka obi-wan qui-gon wicket moff. Skywalker leia calrissian jinn obi-wan dagobah. Droid mothma jawa windu padmé han calrissian solo. Utapau sebulba dooku skywalker r2-d2 wicket darth tusken raider moff.

Marges

Marges de 15px




Marges de 30px




Marges de 44px




Logos

Logo principal

logo principal bleu

Alternative

logo principal blanc

Images

Tier de la largeur

Image sur le tier de la largeur

Moitié de la largeur

Image sur moitié de la largeur

Toute la largeur

Image sur toute la largeur

Éléments graphiques

Flèches

Flèches defilant les images

flèche blanche gaucheflèche blanche droite
flèche bleu marine gaucheflèche bleu marine droite

Autres flèches

flèche en L blanche droite
flèche en L blanche gauche

Points

Points fins
Points Ă©pais

Boutons

Normaux

Lien

Lien

Commentaires

Modal et popup

IcĂ´nes

Set Tilli v2

Set Tilli v1

Autres

TODO

  • Style d'Ă©criture: majuscule, voix/ton
  • Slogans Tilli
  • Formulaire : form/input