OudsDisplayText class

OUDS Display Design Guidelines

Reference design version : 1.0.0

Display styles are intended for high-impact content such as landing pages, marketing campaigns, and key messages. Their large type sizes help capture attention and establish strong visual emphasis. Variants automatically adapt across breakpoints to maintain a consistent visual hierarchy on every screen size. Use them sparingly to preserve their impact and effectiveness.

Use this widget instead of a plain Text with a hardcoded TextStyle so the text always renders with the token defined by the active theme.

OudsDisplayText(
  text: 'Welcome',
  size: OudsDisplayTextSize.large
)

A color override can be provided when the default theme color is not suitable, for example when the text is displayed on a colored surface:

OudsDisplayText(
  text: 'Welcome',
  size: OudsDisplayTextSize.large,
  color: OudsTheme.of(context).colorScheme(context).contentDefault,
)

Multiple colors can be used simultaneously within the same text. The .rich constructor (OudsDisplayText.rich) is exposed to color only part of the text. Build the .rich constructor's text argument with buildOudsAnnotatedText.

The user must ensure that the contrast between the colors used meets current accessibility standards and that the colors align with the brand’s and its entity’s visual identity.

OudsDisplayText.rich(
  text: buildOudsAnnotatedText((builder) {
    builder.append('Welcome ');
    builder.withColor((context) => color, () => builder.append('back'));
  }),
)