Experimental Design [Subtle text highlight]

[skylerschain]

What

A pattern that gives medium prominence to text (e.g. confirmation message, warning message).

Purpose

In our CST work, we discovered a need a need for a pattern that gives prominence to important text but avoids the overuse of cards and doesn't need to be as visually strong as the featured content pattern.

Usage

Any time there is important information on the page that should be visually separated from the rest of the paragraph text, but doesn't need to be the primary focus of the page.

Behavior

This doesn't need to be an interactive component. It could be dynamic to represent various states a user could be in (e.g. a zero state or confirmation message when the user doesn't have any action they need to take).

Examples

Some inspiration from GOV.UK

• Inset text
• Warning text

2 OPTIONS. In CST, this pattern would be used when the Veteran doesn't have to take any action to advance their claim and we want to reassure them of that fact.

OPTION 1

OPTION 2

Accessibility

TBD. We can adjust these if there are any a11y considerations we haven't thought of.

Guidance

Use this if there is a text-based message you want to elevate above the rest of the text on the page, but doesn't need to be the primary focus of the page and doesn't require explicit user action.

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Code (optional)

Include any existing code.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

This will be on the agenda for the 8/25 DSC meeting.

[caw310]

@skylerschain We aren't having a meeting on 8/25. We will convene after labor day on Friday, Sept 8. This will be on the agenda. Sorry for the mix up.

[skylerschain]

Just wanted to give a quick update on this, and provide another option for the discussion tomorrow.

In the latest version of these designs, we are taking a more conservative approach and just using paragraph text in the empty state. It doesn't have the same visual prominence as the options above, so we might still want to explore something new.

[humancompanion-usds]

@skylerschain - Where did you end up with this? Is the paragraph text what you ended up shipping?

[humancompanion-usds]

Inset text is intriguing. I can see some uses for that. The plain text seems to work here but there are other instances where inset text would be useful. We'll keep that in our back pocket to explain to a team that needs it.