Summary

Goal

Reduce the dominant headings in Elastic product UIs.

Problem

The current ‘Amsterdam’ EUI theme has been around for several years and brings with it large, heavy-weighted headings of prior trends. As a result, page titles, modals, flyouts, and tabs - to name a few components - can eat up a relatively large amount of screen real estate while also being visually loud.

Project stakeholders

Design proposals

Both near-term and long-term changes are based upon design work from the EUI Refresh project.

Near-term

Make this iterative change to reduce the topmost font sizes and font weights in EUI.

• Reducing the topmost font sizes primarily affects titles which appear atop pages, modals, and flyouts.
• Reducing the topmost font weights affects all headings (h1-h6) which appear in many more places such as cards, dashboard panels, tabs, etc.

🔬Preview typography changes (this PR) in Kibana

• https://ryankeairns-pr-190579-esql-menu-popover.kbndev.co/app/home#/
• (un: elastic pw: changeme)

Sample before and after from EUI docs

Sample before and after from Kibana test environment

→ More side-by-side Kibana comparisons can be found in this Figma file

Longer-term

TBD by the new theme project. Further refinements might include:

• Introduction of an additional monospace font for visualizations (number values, axes, etc.)
• Reduce the overall number of text styles provided by EuiText
• On the Kibana side, evaluate the usage of larger size/titles (more semantic; less large)

Implementation notes

Changes would be made directly to EUI - in alignment with new theme efforts - and are not expected to produce many, if any, downstream impacts to product teams. Once merged, the changes would be applied via the next EUI upgrade of Kibana.

We would proactively inform teams of the pending change to reduce potential surprise or questions once the changes land.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)