The separator component is used to have a wavy transfer between sections. It uses an svg that's can be places at the top or the bottom of a section. By adding the correct modifiers you can adjust the colors so they match the previous or next section. That way it looks like there is a smooth transition between them. The default behaviour places the separator at the top of the section.
<div class="c-separator ">
<svg class="c-separator__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1439.2 73.2" width="1439.2" height="73.2" preserveAspectRatio="none">
<path d="M1439.2,19.1C1163.9,109,885.1,0,624.9,0C381.8,0,302.1,73.2,0,73.2V0c145.6,0,625.3,0,1439.2,0V19.1z" />
</svg>
</div>
c-separator--bottom:
This places the separator at the bottom of the section
c-separator--primary:
This makes sure the fill of the separator uses the primary color
c-separator--secondary:
This makes sure the fill of the separator uses the secondary color