...

In LUX, large numbers may be represented using K for thousands and M for millions, which is the common practice in most countries.Thousands of millions may be represented using B (billions) or G (gigas), depending on context.

Text Expansion

Always design with text expansion in mind. When English text gets translated into another language, the translated text can be as much as 3x longer. Make UI components expandable whenever possible. Do not assign a fixed width or height to your UI component unless you have a good reason to.

...

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h1 style="font-family: 'Inter', arial; margin: 0; font-size: 32px;">Huge Header</h1>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h2 style="font-family: 'Inter', arial; margin: 0;  font-size: 24px;">Large Header</h2>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h3 style="font-family: 'Inter', arial; margin: 0;  font-size: 16px;">Medium Header</h3>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h4 style="font-family: 'Inter', arial; margin: 0;  font-size: 12px;">Small Header</h4>

<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<h5 style="font-family: 'Inter', arial; margin: 0;  font-size: 8px;">Tiny Header</h5>

Accessibility

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

For accessible header, you should also follow these additional requirements:

...

Not skip HTML heading hierarchy levels in order to comply with screen reader guidelines.

...

Labels

Effective form labelling helps users to understand which information to enter into a form input.

• A common method of space saving is using placeholder text as a label. However, this is not recommended because it hides context and can present accessibility issues. The use of placeholder labels should be restricted to forms where the field purpose is a universal standard, and where accessibility can be guaranteed, e.g. login forms.

• Provide a text label, above or next to its associated field and left aligned to its associated field. Checkboxes and Radio Buttons are exceptions to this rule.

• In situations where horizontal UI space is limited, or responsive design is used, render the label above its associated field.

• Ensure that all labels and associated fields are vertically aligned as columns in a table.

...

Required fields

All required fields should be marked with an asterisk in close proximity to its associated label.

...

...

Use the Verint error color with the star symbol to identify its necessity.

...

Accessibility

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

• Use the appropriate HTML <label> element and label for attribute.

• Labels must remain visible when an input is focused.

• Labels must be announced to the screen reader on focus.

• Ensure the help text which appears underneath an input is read when an assistive technology user stops at an input using ARIA.

• Use sentence case capitalization (see the Capitalization section below under Text Formats).
  

Capitalization

• We use different capitalization styles for different types of content to improve scannability, organize information, and guide users to key actions.

• When building new LUX applications, also align capitalization practices with platform conventions to match user expectations (e.g. specific iOS conventions).

...

Examples

...

Form	Message popup
Image Added	Image Added