Variables CSS

Liste des variables CSS employées au sein de France Travail, classées par catégories.

Pour chaque variable, il est possible de copier son code CSS.

Sommaire :

  1. Couleurs
  2. Textes
  3. Espacements
  4. Tailles d'éléments
  5. Bords arrondis

Couleurs

Variable CSS Web Outils agent
--ft-color-background-error-default
 #ba251a #ba251a
--ft-color-background-error-strong
 #91170e #91170e
--ft-color-background-error-weaker
 #f8dcda #f8dcda
--ft-color-background-error-weakest
 #ffeceb #ffeceb
--ft-color-background-info-default
 #2c74ff #2c74ff
--ft-color-background-info-strong
 #043392 #043392
--ft-color-background-info-weaker
 #dfe9ff #dfe9ff
--ft-color-background-info-weakest
 #eff4ff #eff4ff
--ft-color-background-layout-body
 #ffffff #dbe3ff
--ft-color-background-neutral-dark
 #0a0a0a #0a0a0a
--ft-color-background-neutral-default
 #888b99 #8fa1c0
--ft-color-background-neutral-light
 #ffffff #ffffff
--ft-color-background-neutral-strong
 #5b5d65 #5c6e83
--ft-color-background-neutral-stronger
 #44454b #45505c
--ft-color-background-neutral-strongest
 #121212 #262527
--ft-color-background-neutral-weak
 #cdcfd8 #d2dae8
--ft-color-background-neutral-weaker
 #e6e7ec #e7ebf1
--ft-color-background-neutral-weakest
 #f5f5f8 #f2f4fb
--ft-color-background-opacity-dark-opacity
 rgba(18, 20, 55, 0.4) rgba(18, 20, 55, 0.4)
--ft-color-background-opacity-default-opacity
 rgba(18, 20, 55, 0.05) rgba(18, 20, 55, 0.05)
--ft-color-background-opacity-light-opacity
 rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15)
--ft-color-background-primary-active
 #0f1438 #43548d
--ft-color-background-primary-default
 #283276 #406bde
--ft-color-background-primary-hover
 #1b2256 #2a4fb7
--ft-color-background-primary-weaker
 #cdd2ff #dbe3ff
--ft-color-background-primary-weakest
 #eaecfb #edf1ff
--ft-color-background-secondary-active
 #44454b #44454b
--ft-color-background-secondary-default
 #ffffff #ffffff
--ft-color-background-secondary-hover
 #5b5d65 #5b5d65
--ft-color-background-success-default
 #068148 #068148
--ft-color-background-success-strong
 #046136 #046136
--ft-color-background-success-weak
 #09aa5f #09aa5f
--ft-color-background-success-weaker
 #d9f6e8 #d9f6e8
--ft-color-background-success-weakest
 #ecfdf3 #ecfdf3
--ft-color-background-tertiary-active
 rgba(18, 20, 55, 0.8) rgba(18, 20, 55, 0.8)
--ft-color-background-tertiary-dark
 rgba(18, 20, 55, 0.2) rgba(18, 20, 55, 0.2)
--ft-color-background-tertiary-default
 rgba(18, 20, 55, 0.05) rgba(18, 20, 55, 0.05)
--ft-color-background-tertiary-hover
 rgba(18, 20, 55, 0.7) rgba(18, 20, 55, 0.7)
--ft-color-background-tertiary-light
 rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15)
--ft-color-background-warning-default
 #ae6200 #ae6200
--ft-color-background-warning-strong
 #7c4701 #7c4701
--ft-color-background-warning-weak
 #f79009 #f79009
--ft-color-background-warning-weaker
 #f8f0d6 #f8f0d6
--ft-color-background-warning-weakest
 #fffaeb #fffaeb
--ft-color-border-error-default
 #ba251a #ba251a
--ft-color-border-error-weak
 #f8dcda #f8dcda
--ft-color-border-info-default
 #2c74ff #2c74ff
--ft-color-border-info-weak
 #dfe9ff #dfe9ff
--ft-color-border-neutral-default
 #cdcfd8 #cdcfd8
--ft-color-border-neutral-light
 #ffffff #ffffff
--ft-color-border-neutral-strong
 #b5b8c5 #b5b8c5
--ft-color-border-neutral-stronger
 #888b99 #888b99
--ft-color-border-neutral-strongest
 #5b5d65 #5b5d65
--ft-color-border-neutral-weak
 #e6e7ec #e6e7ec
--ft-color-border-neutral-weaker
 #f5f5f8 #f5f5f8
--ft-color-border-primary-default
 #283276 #355eca
--ft-color-border-secondary-default
 #5b5d65 #5b5d65
--ft-color-border-success-default
 #09aa5f #09aa5f
--ft-color-border-success-weak
 #d9f6e8 #d9f6e8
--ft-color-border-tertiary-default
 rgba(18, 20, 55, 0.1) rgba(18, 20, 55, 0.1)
--ft-color-border-warning-default
 #f79009 #f79009
--ft-color-border-warning-weak
 #f8f0d6 #f8f0d6
--ft-color-decorative-blue-default
 #406bde #406bde
--ft-color-decorative-blue-strong
 #0d1440 #0d1440
--ft-color-decorative-blue-weak
 #b0bff0 #b0bff0
--ft-color-decorative-blue-weaker
 #dbe3ff #dbe3ff
--ft-color-decorative-blue-weakest
 #edf1ff #edf1ff
--ft-color-decorative-gray-default
 #b5b8c5 #b5b8c5
--ft-color-decorative-gray-strong
 #888b99 #888b99
--ft-color-decorative-gray-weak
 #cdcfd8 #cdcfd8
--ft-color-decorative-gray-weaker
 #e6e7ec #e6e7ec
--ft-color-decorative-gray-weakest
 #f5f5f8 #f5f5f8
--ft-color-decorative-pink-default
 #eb94c2 #eb94c2
--ft-color-decorative-pink-strong
 #944f74 #944f74
--ft-color-decorative-pink-weak
 #f0c9de #f0c9de
--ft-color-decorative-pink-weaker
 #fce5f2 #fce5f2
--ft-color-decorative-pink-weakest
 #fdf2f9 #fdf2f9
--ft-color-decorative-purple-default
 #69408c #69408c
--ft-color-decorative-purple-strong
 #4a3773 #4a3773
--ft-color-decorative-purple-weak
 #d9c9e5 #d9c9e5
--ft-color-decorative-purple-weaker
 #f0e3fa #f0e3fa
--ft-color-decorative-purple-weakest
 #f4ebfb #f4ebfb
--ft-color-decorative-red-default
 #eb6366 #eb6366
--ft-color-decorative-red-strong
 #d92424 #d92424
--ft-color-decorative-red-stronger
 #be1616 #be1616
--ft-color-decorative-red-weak
 #f5a39e #f5a39e
--ft-color-decorative-red-weaker
 #fad9d6 #fad9d6
--ft-color-decorative-red-weakest
 #fdeceb #fdeceb
--ft-color-decorative-sand-default
 #cbc4b8 #cbc4b8
--ft-color-decorative-sand-strong
 #70675a #70675a
--ft-color-decorative-sand-weak
 #e6e1d8 #e6e1d8
--ft-color-decorative-sand-weaker
 #f5f2ee #f5f2ee
--ft-color-decorative-sand-weakest
 #faf9f7 #faf9f7
--ft-color-decorative-yellow-default
 #ffcc52 #ffcc52
--ft-color-decorative-yellow-strong
 #dc6d00 #dc6d00
--ft-color-decorative-yellow-stronger
 #af5a07 #af5a07
--ft-color-decorative-yellow-weak
 #ffde8c #ffde8c
--ft-color-decorative-yellow-weaker
 #fff0c7 #fff0c7
--ft-color-decorative-yellow-weakest
 #fff7e3 #fff7e3
--ft-color-icon-error-default
 #f04438 #f04438
--ft-color-icon-info-default
 #2c74ff #2c74ff
--ft-color-icon-link-default
 #2458e5 #2458e5
--ft-color-icon-link-visited
 #69408c #69408c
--ft-color-icon-neutral-dark
 #121212 #121212
--ft-color-icon-neutral-default
 #2e2e31 #2e2e31
--ft-color-icon-neutral-light
 #ffffff #ffffff
--ft-color-icon-neutral-weak
 #5b5d65 #5b5d65
--ft-color-icon-neutral-weaker
 #9ea2b3 #9ea2b3
--ft-color-icon-primary-default
 #283276 #355eca
--ft-color-icon-primary-strong
 #0f1438 #203879
--ft-color-icon-success-default
 #09aa5f #09aa5f
--ft-color-icon-warning-default
 #f79009 #f79009
--ft-color-text-content-default
 #2e2e31 #2e2e31
--ft-color-text-content-light
 #ffffff #ffffff
--ft-color-text-content-strong
 #121212 #121212
--ft-color-text-content-weak
 #5b5d65 #5b5d65
--ft-color-text-content-weaker
 #71747f #71747f
--ft-color-text-error-default
 #ba251a #ba251a
--ft-color-text-info-default
 #043392 #043392
--ft-color-text-link-default
 #2458e5 #2458e5
--ft-color-text-link-visited
 #69408c #69408c
--ft-color-text-primary-default
 #283276 #355eca
--ft-color-text-primary-strong
 #0f1438 #203879
--ft-color-text-success-default
 #068148 #068148
--ft-color-text-warning-default
 #7c4701 #7c4701

Textes

Variable CSS Web Outils agent
--ft-font-family-body
 system-ui, sans-serif system-ui, sans-serif
--ft-font-family-monospace
 ‘Courier New’, monospace ‘Courier New’, monospace
--ft-font-family-title
 Marianne, system-ui, sans-serif Marianne, system-ui, sans-serif
--ft-font-line-height-display-1
 3rem (48px) 3.0625rem (49px)
--ft-font-line-height-display-2
 2.75rem (44px) 2.625rem (42px)
--ft-font-line-height-display-3
 2.375rem (38px) 2.375rem (38px)
--ft-font-line-height-display-4
 2.125rem (34px) 2.0625rem (33px)
--ft-font-line-height-h1
 1.75rem (28px) 1.75rem (28px)
--ft-font-line-height-h2
 1.625rem (26px) 1.3125rem (21px)
--ft-font-line-height-h3
 1.5rem (24px) 1.1875rem (19px)
--ft-font-line-height-h4
 1.375rem (22px) 1rem (16px)
--ft-font-line-height-h5
 1.25rem (20px) 0.9375rem (15px)
--ft-font-line-height-text
 1.375rem (22px) 1.125rem (18px)
--ft-font-line-height-text-small
 1.25rem (20px) 1rem (16px)
--ft-font-line-height-text-xsmall
 1rem (16px) 0.875rem (14px)
--ft-font-line-height-text-xxsmall
 0.75rem (12px) 0.75rem (12px)
--ft-font-line-height-text-xxxsmall
 0.6875rem (11px) 0.6875rem (11px)
--ft-font-size-display-1
 2.5rem (40px) 2.625rem (42px)
--ft-font-size-display-2
 2.25rem (36px) 2.25rem (36px)
--ft-font-size-display-3
 2rem (32px) 2rem (32px)
--ft-font-size-display-4
 1.75rem (28px) 1.75rem (28px)
--ft-font-size-h1
 1.5rem (24px) 1.5rem (24px)
--ft-font-size-h2
 1.375rem (22px) 1.125rem (18px)
--ft-font-size-h3
 1.25rem (20px) 1rem (16px)
--ft-font-size-h4
 1.125rem (18px) 0.875rem (14px)
--ft-font-size-h5
 1rem (16px) 0.8125rem (13px)
--ft-font-size-text
 1rem (16px) 0.875rem (14px)
--ft-font-size-text-small
 0.875rem (14px) 0.75rem (12px)
--ft-font-size-text-xsmall
 0.75rem (12px) 0.6875rem (11px)
--ft-font-size-text-xxsmall
 0.6875rem (11px) 0.625rem (10px)
--ft-font-size-text-xxxsmall
 0.625rem (10px) 0.5625rem (9px)
--ft-font-size-text-xxxxsmall
 0.5625rem (9px) 0.5rem (8px)
--ft-font-weight-bold
 700 700
--ft-font-weight-medium
 500 500
--ft-font-weight-normal
 400 400

Espacements

Variable CSS Web Outils agent
--ft-spacer-l1
 2rem (32px) 2rem (32px)
--ft-spacer-l2
 2.5rem (40px) 2.5rem (40px)
--ft-spacer-l3
 3rem (48px) 3rem (48px)
--ft-spacer-l4
 4rem (64px) 4rem (64px)
--ft-spacer-m1
 1.25rem (20px) 1.25rem (20px)
--ft-spacer-m2
 1.5rem (24px) 1.5rem (24px)
--ft-spacer-s1
 0.75rem (12px) 0.75rem (12px)
--ft-spacer-s2
 1rem (16px) 1rem (16px)
--ft-spacer-xl
 5rem (80px) 5rem (80px)
--ft-spacer-xs1
 0.25rem (4px) 0.25rem (4px)
--ft-spacer-xs2
 0.5rem (8px) 0.5rem (8px)
--ft-spacer-xxs
 0.125rem (2px) 0.125rem (2px)

Tailles d’éléments

Variable CSS Web Outils agent
--ft-size-icon-lg
 1.5rem (24px) 1.5rem (24px)
--ft-size-icon-md
 1rem (16px) 1rem (16px)
--ft-size-icon-sm
 0.75rem (12px) 0.75rem (12px)
--ft-size-icon-xl
 2.5rem (40px) 2.5rem (40px)
--ft-size-illustration-lg
 7.5rem (120px) 7.5rem (120px)
--ft-size-illustration-md
 5rem (80px) 5rem (80px)
--ft-size-illustration-sm
 4rem (64px) 4rem (64px)
--ft-size-illustration-xl
 10rem (160px) 10rem (160px)
--ft-size-illustration-xs
 3rem (48px) 3rem (48px)

Bords arrondis

Variable CSS Web Outils agent
--ft-radius-default
 0.75rem (12px) 0.75rem (12px)