Use the Curved Horizon as a breaker or to introduce the next block of content. It consists of a circle inside a mask.

Examples

Bow

As the bow is only available in 100% of the viewport width, it is not possible to preview it “inline” — please see a full screen preview

<div class="ys-bow"></div>

As the bow is only available in 100% of the viewport width, it is not possible to preview it “inline” — please see a full screen preview

<div class="ys-bow ys-bow--midnight-green"></div>

In the TOP Tile / Hero Image (to add a clear separation of content)
In the Footer (to state the end of the page)
The Bow should always be as wide as the entire viewport and never be used inside smaller components

Don’t over use it. No page should contain more than 3 bows.