Fondation américaine du foie

Guide de style

Cette page décrit les styles et les normes actuels pour le Fondation américaine du foie en ligne.

Couleurs

Un aperçu des couleurs de la marque de ce site.

Couleurs & Nuances

Transparents

primaire

Primaire

Ultra léger

Light

Moyenne

Foncé

Ultra sombre

Maquette

secondaire

Secondaire

Ultra léger

Light

Moyenne

Foncé

Ultra sombre

Maquette

accent

Accent

Ultra léger

Light

Moyenne

Foncé

Ultra sombre

Maquette

base

Base

Ultra léger

Light

Moyenne

Foncé

Ultra sombre

Maquette

Ombre

Shade

Ultra léger

Light

Moyenne

Foncé

Ultra sombre

primaire

Transexuelle 10

Transexuelle 20

Transexuelle 40

Transexuelle 60

Transexuelle 80

Transexuelle 90

secondaire

Transexuelle 10

Transexuelle 20

Transexuelle 40

Transexuelle 60

Transexuelle 80

Transexuelle 90

accent

Transexuelle 10

Transexuelle 20

Transexuelle 40

Transexuelle 60

Transexuelle 80

Transexuelle 90

base

Transexuelle 10

Transexuelle 20

Transexuelle 40

Transexuelle 60

Transexuelle 80

Transexuelle 90

Ombre

Transexuelle 10

Transexuelle 20

Transexuelle 40

Transexuelle 60

Transexuelle 80

Transexuelle 90

Typographie

Vous trouverez ci-dessous un aperçu des tailles et des poids de typographie réactive pour ce site. Ceux-ci sont calculés à partir d'une taille de base et d'une échelle mathématique.

Rubriques

H1 (--xxl)

Rubrique 1 Régulier

Titre 1 Moyen

Titre 1 Gras

H2 (--xl)

Rubrique 2 Régulier

Titre 2 Moyen

Titre 2 Gras

H3 (--l)

Rubrique 3 Régulier

Titre moyen

Titre 3 Gras

H4 (--m)

Rubrique 4 Régulier

Titre 4 Moyen

Titre 4 Gras

H5 (--s)

Rubrique 5 Régulier

Titre moyen

Titre 5 Gras

H6 (--xs)

Rubrique 6 Régulier

Titre 6 Moyen

Titre 6 Gras

Le corps du texte

CORPS DU TEXTE (--m)

Texte m Régulier

Texte m Moyen

Texte en gras

PETIT TEXTE (--s)

Texte régulier

Texte s Médium

Texte en gras

XTRA PETIT TEXTE (--xs)

Texte xs Régulier

Texte xs moyen

Texte xs Gras

Exemples

Rubrique 1 (H1)

C'est un gros texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrique 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrique 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrique 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrique 5 (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rubrique 6 (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Boutons

Les boutons pleins et contours sont disponibles dans tous les ensembles de couleurs, y compris le noir et le blanc.

BOUTONS SUR FOND CLAIR

Primaire
Contour principal
Secondaire Contour secondaire
Accent
Contour des accents Base
Contour de base

BOUTONS SUR FOND FONCÉ

Primaire
Contour principal
Secondaire Contour secondaire
Accent
Contour des accents Blanc
Contour blanc

ÉCHELLE DES BOUTONS

btn--primaire / btn--xs

btn--primaire / btn--xs

btn--primaire / btn--m

btn--primaire / btn--l

btn--primaire / btn--xl

btn--primaire / btn--xxl

Largeurs

Il existe six valeurs que vous pouvez utiliser pour contrôler la largeur de l'élément. Ils sont automatiquement réactifs.

--largeur-xs

--largeur-s

--largeur-m

--largeur-l

--largeur-xl

--largeur-xxl

Remplissage de section

Le rembourrage des sections est réactif et basé sur un multiplicateur du système d'espacement des noyaux.

Aucun

XS

S

M

L

XL

XXL

espacement

Il existe six niveaux d'espacement réactif calculés à partir d'une taille de base et d'une échelle mathématique. Cela garantit que la marge, le rembourrage et les espaces correspondent parfaitement.

--espace-xs

--les espaces

--espace-m

--espace-l

--espace-xl

--espace-xxl

Rembourrage d'élément

Voici les six niveaux d'espacement visualisés sous forme de rembourrage.

Card

Il s'agit d'une carte avec rembourrage XS. Son contenu est assez proche des bords.

Card

Il s'agit d'une carte avec un rembourrage S. Il a un rembourrage un peu plus serré.

Card

Il s'agit d'une carte avec rembourrage M. Il a une salle de respiration standard.

Card

Il s'agit d'une carte avec un rembourrage L. Il a une marge de manœuvre supplémentaire.

Card

Il s'agit d'une carte avec rembourrage XL. Il a une marge de manœuvre importante.

Card

Il s'agit d'une carte avec rembourrage XXL. Évitez de l'utiliser dans un espace confiné.

Ombres

Vous avez le choix entre trois ombres de boîtes multicouches.

Boîte ombre M

Boîte ombre L

Boîte ombre XL

Rayon de bordure

Il existe six valeurs de rayon de bordure calculées à partir d'une taille de base et d'une échelle mathématique.

XS arrondi

S arrondi

M arrondi

L arrondi

Arrondi XL

XXL arrondi