Proposal: Display type styles above the headline tier

[Tim-UXUI]

Hi Onyx team 👋

Problem
The current type scale tops out at the headline styles. In practice, we regularly hit cases where headlines are semantically wrong or visually too small:

• Standalone numbers / KPIs — dashboard metrics, stats, counters where a single value carries the screen
• Hero / empty states — short statements that need strong visual emphasis without being a document heading
• Marketing-adjacent surfaces inside product — onboarding screens, feature announcements

Using headline styles for these cases creates two issues: the visual weight is often insufficient, and it muddies the semantic role of headlines (a KPI is not a heading).

Proposal
Introduce a dedicated display tier above the headline styles — e.g. display-sm / display-md / display-lg. This is an established pattern across major design systems: Material 3, Carbon, and Polaris all separate display from heading styles for exactly this reason.

Alternatives considered

• Scaling headline styles via existing tokens: works technically, but produces inconsistent ad-hoc sizes across teams and loses the semantic distinction. Acceptable as an interim solution, not as the long-term answer.

Open questions

• How many display sizes do we actually need? (I'd suggest starting with 2–3 based on collected use cases)
• Should display styles get their own line-height/tracking treatment, or inherit from headlines?

Thanks for looking into it and support in advance. 🙌

[larsrickert]

Hey @Tim-UXUI, technically, it is already possible for the OnyxHeadline component to define the size independantly from the semantic (h1-h6), is this what you are requesting? This example shows a h4 semantic headline that is visually displayed as h1: https://storybook.onyx.schwarz/?path=/story/navigation-headline--default&args=is:h4;showAs:h1

[Tim-UXUI]

Hey @larsrickert. Thanks for the quick response. Yep, in terms of semantics that would be the solution. But in this case I'd just like to go beyond the existing maximum defined sizes in order to be more flexible, as described in the examples above. So maybe it would be an option to extend the the showAs property with display-sm/-md/-lg?

regards