Aurodesign system
OverviewUsage
page headerUsageThe Auro Design System typography includes four font groups:
  • body - used for all general / default text.
  • heading - used in the `auro-header` component and for applying to `h1`, `h2`, etc. elements directly.
  • display - used for text content that should render like a heading but is technically not a heading when considering the semantic layout of the page.
  • accent - used for other text content that should standout on the page.
ExamplesBodybody-lg
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
body-default
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
body-sm
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
body-xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
body-2xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Headingsheading-xl
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
heading-lg
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
heading-md
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
heading-sm
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
heading-xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
heading-2xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Displaydisplay-2xl
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
display-xl
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
display-lg
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
display-md
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
display-sm
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
display-xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
Accentaccent-2xl
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-xl
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-lg
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-md
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-sm
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-xs
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
accent-2xx
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...