palette
navy
navy-pale
pink
pink-pale
teal
teal-pale
green
green-pale
yellow
yellow-pale
base
Base (white)
contrast
Contrast (text)
contrast-2
Text – muted
grey-borders
grey – borders
grey-pale
Grey – pale
display
Display 1
Display 2
headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
typography
X Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum est non eros accumsan, eu pulvinar massa sollicitudin. Vestibulum porttitor enim sem, sed pulvinar massa egestas in.
Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum est non eros accumsan, eu pulvinar massa sollicitudin. Vestibulum porttitor enim sem, sed pulvinar massa egestas in.
Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque condimentum est non eros accumsan, eu pulvinar massa sollicitudin. Vestibulum porttitor enim sem, sed pulvinar massa egestas in.
Regular. Vivamus non commodo diam. Maecenas a ex volutpat, egestas lacus nec, tincidunt ipsum. Quisque vel tortor nec arcu egestas mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur pharetra sapien vel mi tincidunt, in tempus nunc consectetur. In in consectetur odio. Vivamus eu metus metus. Mauris hendrerit varius ipsum, volutpat porta tellus volutpat a. Phasellus elementum a lacus eu faucibus.
Small. Cras dictum nisi at lectus hendrerit lacinia. Sed vitae mi tortor. Maecenas maximus diam velit, imperdiet consequat magna suscipit vitae. Nullam fermentum, risus vitae scelerisque pellentesque, nulla urna pretium leo, ut luctus sem orci eget massa.
X Small. Integer dapibus, enim eu aliquet tincidunt, libero nisl ullamcorper quam, eget varius magna diam id ligula.
buttons
spacing sizes
Default content width
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim erat non mi pretium, dignissim cursus urna viverra. Donec fringilla in elit vel vulputate. Donec non mi faucibus, gravida sapien id, aliquet diam. Etiam iaculis aliquam consequat. Suspendisse potenti. Cras convallis lectus eget lectus semper vehicula. Suspendisse aliquet accumsan quam, mattis tristique elit accumsan vitae. Quisque eu sapien augue. Pellentesque posuere massa nec auctor mollis. Proin eu sapien scelerisque, egestas tellus ut, blandit purus. Donec odio turpis, porttitor vitae dictum eget, ornare vel lorem. Praesent in rutrum leo. Nullam semper magna diam. Morbi tristique tristique elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Wide content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim erat non mi pretium, dignissim cursus urna viverra. Donec fringilla in elit vel vulputate. Donec non mi faucibus, gravida sapien id, aliquet diam. Etiam iaculis aliquam consequat. Suspendisse potenti. Cras convallis lectus eget lectus semper vehicula. Suspendisse aliquet accumsan quam, mattis tristique elit accumsan vitae. Quisque eu sapien augue. Pellentesque posuere massa nec auctor mollis. Proin eu sapien scelerisque, egestas tellus ut, blandit purus. Donec odio turpis, porttitor vitae dictum eget, ornare vel lorem. Praesent in rutrum leo. Nullam semper magna diam. Morbi tristique tristique elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Full width content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim erat non mi pretium, dignissim cursus urna viverra. Donec fringilla in elit vel vulputate. Donec non mi faucibus, gravida sapien id, aliquet diam. Etiam iaculis aliquam consequat. Suspendisse potenti. Cras convallis lectus eget lectus semper vehicula. Suspendisse aliquet accumsan quam, mattis tristique elit accumsan vitae. Quisque eu sapien augue. Pellentesque posuere massa nec auctor mollis. Proin eu sapien scelerisque, egestas tellus ut, blandit purus. Donec odio turpis, porttitor vitae dictum eget, ornare vel lorem. Praesent in rutrum leo. Nullam semper magna diam. Morbi tristique tristique elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Light section
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum gravida leo sed consequat. Ut sit amet quam bibendum nibh blandit efficitur. Maecenas interdum mauris sed sem porta sagittis. Fusce dictum in justo vestibulum maximus.
Dark section
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum gravida leo sed consequat. Ut sit amet quam bibendum nibh blandit efficitur. Maecenas interdum mauris sed sem porta sagittis. Fusce dictum in justo vestibulum maximus.
Dark section
Lorem ipsum dolor sit amet consectetur elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum gravida leo sed consequat. Ut sit amet quam bibendum nibh blandit efficitur. Maecenas interdum mauris sed sem porta sagittis. Fusce dictum in justo vestibulum maximus.