Design System

Colors

Blue/Light

#9DD3FF

Blue/Original

#003EDC

Green/Light

#CFEBEC

Green/Dark

#116B6F

Background/Light

#F0F4FA

Dark

#37352F

White

#FFFFFF

Typography Dark

Headings

Blue / Dark

h2 L

h2 C

h2 R

h2: Left, Center and Right. 32/40 on Desktop and 24/32 on mobile.

h3 L

h3 C

h3 R

h3: Left, Center and Right. 24/32 on Desktop and 20/28 on mobile.

h4 L

h4 C

h4 R

h4: Left, Center and Right. 16/24 on Desktop and mobile.

h5 L
h5 C
h5 R

h5: Left, Center and Right. 16/24 on Desktop and mobile.

Blue / Original

h4 L

h4 C

h4 R

h5 L
h5 C
h5 R

Paragraph

body L

body C

body R

bodyStrong L

bodyStrong C

bodyStrong R

bodySmall L

bodySmall C

bodySmall R

bodySmallStrong L

bodySmallStrong C

bodySmallStrong R

bodyBig L

bodyBig C

bodyBig R

bodyBigStrong L

bodyBigStrong C

bodyBigStrong R

Links

Lists

  • ul__list
  • ul__list
  • ul__list
  • ul__list-small
  • ul__list-small
  • ul__list-small

Typography Light

White text values.

Headings

h1 L

h1 C

h1 R

h1: Left, Center and Right. 40/48 on Desktop and 32/40 on mobile.

h2 L

h2 C

h2 R

h2: Left, Center and Right. 32/40 on Desktop and 24/32 on mobile.

h3 L

h3 C

h3 R

h3: Left, Center and Right. 24/32 on Desktop and 20/28 on mobile.

h4 L

h4 C

h4 R

h4: Left, Center and Right. 16/24 on Desktop and mobile.

Paragraph

p L

p C

p R

p: Left, Center and Right. 16/24.

p L

p C

p R

pSmall: Left, Center and Right. 14/18.

Lists

  • ul__list
  • ul__list
  • ul__list
  • ul__list-small
  • ul__list-small
  • ul__list-small

Components

Buttons

Large

Label

btn-primary

Label

btn-secondary

© 2020 Aurélie Brébant