Curves
Drawn from the asymmetrical curves that make up the Portal, curves are a unique brand device used to add character to a page. These should be used extremely sparingly, and treated with the same prestige as the Portal.
Shapes of the curve
Curves are drawn from a specific point, referred to as the from attribute. The allows values are:
- top
- topLeft
- topRight
- bottom
- bottomLeft
- bottomRight
Each curve variant comes in small, medium and large sizes.
Top
Top Left
Top Right
Bottom
Bottom Left
Bottom Right
Components
SiteFooter component
The SiteFooter component features a built-in curve; account for this when adding more curves to your page.
In Figma
Use the Curve component to add curves to your page.
View the Figma setup guideUsage guidelines
Use curves as a brand device
Use curve for the most important elements on the page. This is normally the page hero and footer.
Avoid using curves everywhere
Stick to 1 or 2 curves on most pages. For longer pages, a mid-page curve may be appropriate. If you're using Arc's SiteFooter, this will count as one of your curves.
Don't introduce new curve variants
Curves are drawn from the Portal device. Introducing new curve variants breaks this connection and should be avoided.
Only use curves on page-width content
Curves should be reserved for content that runs across the width of the page, like heroes, sections and footers. Avoid using it in other components.
