Typography and button style guidelines for Lumos

Configure your typography and the style of your buttons and cards from Themes > [Theme name] > Global > [Light/Dark mode] > General.

Corner curvature

Corner curvature affects how round the corners are for various elements, such as film posters, buttons, form field boxes, and background cards.

Corner curvature	Example
Straight
Rounded
Full rounded

Typography

• Body text is displayed in:
  • Paragraphs
  • Supporting text
  • Labels
  • Buttons
• Headings and body text can have different fonts.
• 'Secondary text' generally refers to supporting text that is not a data point, or data that needs less emphasis, such as repeated instructional text or refunded item lines.

  Note: We recommend you use #5A5D66 for dark mode and #C9CDD6 for light mode.

• 'Label text' generally refers to text that accompanies a data point, such as fields or tables. This should have a heavier font weight than paragraph text.
• 'Paragraph text' generally refers to blocks of body text, such as descriptions or full sentences.

Examples of different text in Lumos

You can select from a pre-approved list of font families or upload your own custom font family.

Pre-approved font families

• Arial (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Times New Roman (serif)
• Trebuchet MS (sans-serif)
• Verdana (sans-serif)

Pre-approved font weights

• Thin
• Extra Light
• Light
• Normal (regular)
• Medium
• Semi-Bold
• Bold
• Extra Bold
• Black (heavy)
• Extra Black

Buttons

Ensure you have sufficient contrast between the text and background of your buttons. For example, if your primary colour is dark and the text colour of your primary button is black, this may reduce the readability of the button. Instead, choose a light colour for the primary button text.

Button	Description	Example
Primary button	Primary buttons are used to draw attention to the main call to action, such as Proceed in the ticketing flow. Tip: Use the Fill style. Use the Primary colour.
Secondary button	Secondary buttons are interactive but not highlighted as predominantly as primary buttons. Tip: Use the Border style which results in a transparent background and border outline.

Card

Cards are elements on your website, similar to buttons, but containing more information, and often containing an image.

See also:

• Image guidelines for Lumos
• Colour guidelines for Lumos