Introduction

The NAEP Style Guide provides guidance and specifications for the presentation of NAEP’s student-facing user interface (UI) elements.

This guide is a living document. It will evolve as NAEP continues to gather information from external research, experts in the field, and its own studies and administrations.

The change log for the style guide can be found on the Version History page.

Scope

The style guide covers the visual styles and core behaviors of student-facing user interface (UI) elements in the eNAEP delivery platform. It includes information about UI elements in:

  • Discrete items
  • Scenario-based tasks (SBTs)
  • Interactive item components (IICs)

The style guide does not cover styles or conventions for all item content. Item content styles not covered in this resource include:

  • The appearance of reading passages or other stimuli
  • Colors, layout, and other visual details of tables, charts, and other images embedded in item content
  • Use of text styling (i.e., bolding, italics, underline), lists, line and paragraph breaks, etc.

This style guide is informing the development of the Benchmark design system. Benchmark will expand on the conventions of the style guide as it will continue to promote a consistent look and feel across all NAEP item content.

Features

The style guide provides three key features to supplement the textual descriptions of UI styles and behaviors.

  • Each UI element has either a static or interactive demo showing how the element functions.
  • The Change Themes button (at the upper right) is activated on the style guide. Use the button to see how different color theming affects sample content throughout the style guide. Please note that not every page of the style guide has sample content that will react to color theming.
  • The Text-to-speech button (also at the upper right) is activated on the style guide. Use the button to see how TTS-speakable content is flagged for text-to-speech functionality. Please note that the style guide does not have an activated text-to-speech audio feature.

Scenario-based Task Styles

SBTs engage students with a particular context and ask them to complete a series of activities in service of a larger purpose or task. To achieve those design goals, SBTs often have custom interactions and styling. UI elements and conventions found only in SBTs are covered in the SBT-specific pages. In addition, headings with a blue asterisk icon elsewhere in the style guide describe styles and conventions that are specific to SBTs.