0 Variables globales

# 0-1 Facteurs globaux

size-factor

space-factor

rounded-factor

# 0-2 Fonts

font-family-text

font-family-title

font-weight-text

font-weight-title

# 0-3 Transitions

animation-factor

transition-timing-function

# 0-4 Palette de couleurs

Color-high

Color-front

Color-quiet

Color-link

Color-important

Color-main

Color-back

Color-back-alternate

Color-border

Color-back-hover

Color-info-front

Color-success-front

Color-warning-front

Color-error-front

Color-disabled-front

Color-info-back

Color-success-back

Color-warning-back

Color-error-back

Color-disabled-back

Color-style-1

Color-style-2

Color-style-3

Color-style-4

Color-style-5

Color-style-6

Color-style-7

Color-style-8

Color-style-9

Color-style-10

Color-contrasted-light

Color-contrasted-dark

# 0-5 Cohérence

Color-front :

Color-quiet :

Color-high :

Color-link :

Color-important :

Color-front :

Color-quiet :

Color-high :

Color-link :

Color-important :

Color-main-contrasted :

Color-disabled-front :

Color-error-front :

Color-main-contrasted :

1 Admin

# 1-1 AdminAction

Actions admin

# 1-2 AdminPlaceholder

Placeholder admin

2 Base

# 2-1 IconSvg

Faire correspondre à la taille d'un text ou d'un titre size + sizeFit

fit Text tiny

fit Text small

fit Text medium

fit Text big

fit Text large

fit Text extra

fit Title tiny

fit Title small

fit Title medium

fit Title big

fit Title large

fit Title extra

Mode de rendu et Couleur mode +/- ( style / status / weight )

Weights	faded	framed	filled
quiet
normal
highlight

Status	faded	framed	filled
info
success
warning
error
disabled

Styles	faded	framed	filled
1
2
3
4
5
6
7
8
9
10

Taille et padding prédéfini size +/- padded

tiny

small

medium

big

large

extra

size

size + spaced

Taille custom en px size

# 2-2 Image

# 2-3 Link

Figma

lien discret lien discret hover

lien normal lien normal hover

lien mis en avant lien mis en avant hover

Tous les états

( quiet )> Ceci est un lien ( normal )> Ceci est un lien ( highlight )> Ceci est un lien

# 2-4 ListHtml

Listes simples

Liste non ordonnée

Contenu 1
Contenu 2

Lorem ipsum (texte en dessous)

Liste ordonnée

Contenu 1
Contenu 2

Lorem ipsum (texte en dessous)

Figma

Lorem ipsum dolor
Lorem ipsum dolor
- Lorem ipsum dolor
- Lorem ipsum dolor

Lorem ipsum dolor
Lorem ipsum dolor
1. Lorem ipsum dolor
2. Lorem ipsum dolor

Listes imbriquées

Listes imbriquées non ordonnées

Contenu 1
Contenu 2
- Contenu 2.1
- Contenu 2.2
- Contenu 2.3
Contenu 3

Lorem ipsum (texte en dessous)

Listes imbriquées ordonnées

Contenu 1
Contenu 2
1. Contenu 2.1
2. Contenu 2.2
3. Contenu 2.3
Contenu 3

Lorem ipsum (texte en dessous)

# 2-5 Separator

Separateur

# 2-6 Table

FIGMA

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

Tableau avec et sans mode alternate

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

Matrice de Rendu des Tables

Weightsfadedframedfilledquiet

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

normal

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

highlight

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

En-tête	En-tête
Ligne normale	Ligne normale
Ligne alternée	Ligne alternée
pied	pied

# 2-7 Text

Tous les états

( quiet )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

( quiet + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

( quiet + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

( quiet + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Casing(text-transform):

TeXt MoDiFiEd! (<=default value)

TeXt MoDiFiEd! (lowercase)

TeXt MoDiFiEd! (uppercase)

TeXt MoDiFiEd! (capitalize)

Taille de texte:

tiny

small

medium

big

large

extra

Mode de rendu et Couleur mode +/- ( style / status / weight )

Weights	faded	framed	filled
quiet	texte	texte	texte
normal	texte	texte	texte
highlight	texte	texte	texte

Status	faded	framed	filled
info	texte	texte	texte
success	texte	texte	texte
warning	texte	texte	texte
error	texte	texte	texte
disabled	texte	texte	texte

Styles	faded	framed	filled
1	texte	texte	texte
2	texte	texte	texte
3	texte	texte	texte
4	texte	texte	texte
5	texte	texte	texte
6	texte	texte	texte
7	texte	texte	texte
8	texte	texte	texte
9	texte	texte	texte
10	texte	texte	texte

# 2-8 Title

Casing(Title-transform):

tItLe MoDiFiEd! (<=default value)

tItLe MoDiFiEd! (lowercase)

tItLe MoDiFiEd! (uppercase)

tItLe MoDiFiEd! (capitalize)

Positions

A gauche

Centré

A droite

Types et déclinaisons

Faux Titre H1Faux Titre H2Faux Titre H3Faux Titre H4Faux Titre H5Faux Titre H6

Vraie H1 Minuscule

Vraie H2 Petit

Vraie H3 Moyen

Vraie H4 Gros

Vraie H5 Large

Vraie H6 Extra

Types et déclinaisons

Titre H1 quiet

Titre H2 quiet

Titre H3 quiet

Titre H4 quiet

Titre H5 quiet

Titre H6 quiet

Titre H1 normal

Titre H2 normal

Titre H3 normal

Titre H4 normal

Titre H5 normal

Titre H6 normal

Titre H1 highlight

Titre H2 highlight

Titre H3 highlight

Titre H4 highlight

Titre H5 highlight

Titre H6 highlight

Avec îcones

Titre H1 normal

Titre H2 normal

Titre H3 normal

Titre H4 normal

Titre H5 normal

Titre H6 normal

3 Card

# 3-1 ActionListItem

Action List Item

ActionListItem

en mode normal

ActionListItem

en mode normal

mode grid off

ActionListItem en mode normal avec grand titre

subtitle

Petit titre

subtitle

contenu random

mode grid on

ActionListItem en mode normal avec grand titre

subtitle

Petit titre

subtitle

contenu random

# 3-2 Card

Mode de rendu et Couleur mode +/- ( style / status / weight )

Weights	faded	framed	filled
quiet	Card	Card	Card
normal	Card	Card	Card
highlight	Card	Card	Card

Status	faded	framed	filled
info	Card	Card	Card
success	Card	Card	Card
warning	Card	Card	Card
error	Card	Card	Card
disabled	Card	Card	Card

Styles	faded	framed	filled
1	Card	Card	Card
2	Card	Card	Card
3	Card	Card	Card
4	Card	Card	Card
5	Card	Card	Card
6	Card	Card	Card
7	Card	Card	Card
8	Card	Card	Card
9	Card	Card	Card
10	Card	Card	Card

# 3-3 CardHover

Exemple CardHover

Card Hover

color: quiet

Card Hover

color: normal

Card Hover

color: highlight

Card Hover

color: info

Card Hover

color: success

Card Hover

color: warning

Card Hover

color: error

Card Hover

color: disabled

Card Hover

color: 1

Card Hover

color: 2

Card Hover

color: 3

Card Hover

color: 4

Card Hover

color: 5

Card Hover

color: 6

Card Hover

color: 7

Card Hover

color: 8

Card Hover

color: 9

Card Hover

color: 10

Card Hover

sans image

# 3-4 KeyFigure

Design des chiffres clés

20 000

Visiteurs

20 000 000

€

Chiffre d'affaire

400

Exposant

6,3

Rendez-vous par jour

20 000

m²

de surface d'exposition

20 000

Avec lien

20 000

Visiteurs

20 000

Visiteurs

20 000

Visiteurs

20 000

Visiteurs

20 000

Visiteurs

# 3-5 NavElem

Design des cards "éléments de navigation"

Avec icône non entouré

Description : + liste de 2 items + 2 boutons + alignement à gauche

Bouton 1 Bouton 2

Avec icône entouré

Description : + liste de 2 items + 2 boutons + alignement au centre

Bouton 1 Bouton 2

Avec image non cerclée

Description : + liste de 2 items + 2 boutons + alignement à droite

Bouton 1 Bouton 2

Avec image cerclée

Description : et lien global

Désactivé

Description : et lien global

Design des cards "éléments de navigation", tests de tailles d'images

400 x 300 px pour visuel 150px

400 x 300 px pour visuel cerclée 150px

200 x 300 px pour visuel 150px

200 x 300 px pour visuel cerclée 150px

50 x 50 px pour visuel 150px

50 x 50 px pour visuel cerclée 150px

400 x 100 px pour visuel 150px

400 x 100 px pour visuel cerclée 150px

100 x 400 px pour visuel 150px

100 x 400 px pour visuel cerclée 150px

Design des cards "éléments de navigation"

Weights	faded	framed	filled
quiet	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
normal	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
highlight	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2

Status	faded	framed	filled
info	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
success	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
warning	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
error	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
disabled	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2

Styles	faded	framed	filled
1	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
3	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
4	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
5	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
6	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
7	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
8	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
9	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2
10	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2	Avec icône non entouré Description : + liste de 2 items + 2 boutons + alignement à gauche Liste item 1 Liste item 2 Bouton 1 Bouton 2

# 3-6 Product

Options ImageFit Produit

cover: image couvre toute la zone visuel du produit, quitte a être coupé (option par default)

product 500*500

123456789

Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

44,99 €