Bienvenue à Code Blue

Guide de style

Cette page présente les styles et les normes en vigueur pour le nouveau site web de Code Blue.

Couleurs

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

Action

Action

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Comp

Primaire

Primaire

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Comp

Secondaire

Secondaire

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Comp

Accent

Accent

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Comp

Base

Base

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Comp

Ombre

Ombre

Ultra léger

Lumière

Moyen

Sombre

Ultra foncé

Action

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primaire

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Secondaire

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Accent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Base

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Ombre

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Succès

Succès

Success Light

Succès Noir

Succès au survol

Danger

Danger

Feu de détresse

Danger Dark

Danger Hover

Avertissement

Avertissement

Voyant d'avertissement

Warning Dark

Avertissement en survol

info

Info

Info Light

Info Dark

Info Hover

Boutons

Les boutons pleins et les boutons à contour sont disponibles dans tous les jeux de couleurs, y compris le noir et le blanc.

BOUTONS SUR FOND CLAIR

ActionSchéma d'actionPrimaireSchéma primaireSecondaireSchéma secondaireAccentAccent OutlineBaseBase Outline

BOUTONS SUR FOND SOMBRE

ActionSchéma d'actionPrimaireSchéma primaireSecondaireSchéma secondaireAccentAccent OutlineBlancContour blanc
Échelle des boutons
Bouton XS
btn--primary / btn--xs
Bouton S
btn--primary / btn--s
Bouton M
btn--primary / btn--m
Bouton L
btn--primary / btn--l
Bouton XL
btn--primary / btn--xl
Bouton XXL
btn--primary / btn--xxl

Typographie

Vous trouverez ci-dessous un aperçu des tailles et des graisses de la typographie réactive pour ce site. Ils sont calculés à partir d'une taille de base et d'une échelle mathématique.
Rubriques
H1 (--xxl)

Rubrique 1 Regular

Rubrique 1 Moyenne

Titre 1 gras

H2 (--xl)

Titre 2 Regular

Rubrique 2 Moyenne

Titre 2 gras

H3 (--l)

Rubrique 3 Regular

Rubrique 3 Moyenne

Titre 3 gras

H4 (--m)

Rubrique 4 Regular

Rubrique 4 Moyenne

Titre 4 gras

H5 (--s)
Rubrique 5 Regular
Rubrique 5 Moyenne
Intitulé 5 gras
H6 (--xs)
Rubrique 6 Regular
Rubrique 6 Moyenne
Intitulé 6 gras
Corps de texte
TEXTE DU CORPS (--m)
Texte m Régulier
Texte m Moyen
Texte m Gras
PETIT TEXTE (--s)
Texte s Régulier
Texte s Moyen
Texte s Gras
TEXTE TRÈS PETIT (--xs)
Texte xs Regular
Texte xs Moyen
Texte xs Bold
Exemples

Rubrique 1 (H1)

Il s'agit d'un texte de grande taille. 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 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 3 (H3)

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 4 (H4)

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 5 (H5)
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 6 (H6)
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.

Largeurs

Vous pouvez utiliser six valeurs pour contrôler la largeur des éléments. Elles sont automatiquement réactives.
--largeur-xs
--largeur-s
--largeur-m
--largeur-l
--largeur-xl
--largeur-xxl

Remplissage de la 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éactifs calculés à partir d'une taille de base et d'une échelle mathématique. Cela permet de s'assurer que les marges, le rembourrage et les espaces correspondent parfaitement.
--space-xs
--espace-s
--space-m
--space-l
--space-xl
--space-xxl

Rembourrage des éléments

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

Carte

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

Carte

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

Carte

Il s'agit d'une carte avec un rembourrage M. Elle dispose d'une marge de manœuvre standard.

Carte

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

Carte

Il s'agit d'une carte avec un rembourrage XL. Elle dispose d'une grande marge de manœuvre.

Carte

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

Ombres

Vous avez le choix entre trois ombres de boîte multicouches.
Boîte d'ombre M
Boîte d'ombre L
Boîte d'ombrage XL

Rayon de la bordure

Il existe six valeurs de rayon de bordure calculées à partir d'une taille de base et d'une échelle mathématique.
Arrondi XS
Arrondi S
Arrondi M
L arrondi
Arrondi XL
Arrondi XXL