Page MenuHomePhabricator

EditCheck + Suggestions: Update description to @color-subtle
Open, Needs TriagePublic

Description

Background

At the moment, the description text color for Edit Check and Suggestions doesn’t match the design. It currently uses color-base, which makes the description too prominent and the card's content heavy. It should use instead color-subtle in both desktop (card) and mobile (bottom sheet) versions as specified in the designs. The question before buttons (if appearing) should also be color-subtle.

Captura de pantalla 2026-03-14 a las 10.18.59.png (334×540 px, 30 KB)
image.png (424×640 px, 92 KB)
Current colorExpected color

Acceptance criteria (or Done)

  • Update the description's color to color-subtle in both desktop and mobile

Event Timeline

I think we should keep dark text:

  • Lighter text would be inconsistent with other contextual boxes, e.g link context
  • The check description is arguably the most important part of EditCheck: it's the first thing the user sees when encountering a check and it's how we communicate the most critical information to the user.

+1 Ed. We don't want any newcomers who are looking at these for the first time, to skip that text. It is crucial that they understand what they are doing, and that they feel strongly encouraged to read further into any linked-documentation.

I would recommend using color-subtle for both the description and the question text before the buttons in order to create clear visual hierarchy within the card. Currently, when the title, description, and other text all use color-base, everything has the same visual weight, which makes the card feel visually heavier and harder to scan and with visual saturation.

Using color-subtle for description helps structure the content in the card more clearly:

  • Title (color-base) → communicates the task or issue
  • Description (color-subtle) → provides supporting explanation
  • Question text (color-subtle) → additional guidance before actions
  • Buttons (color-base) → actions to solve/decline the card

In addition, color-subtle is still highly visible and accessible: on a white background it provides 7.09:1 contrast, which comfortably meets WCAG requirements for normal text. So readability is preserved while reducing visual saturation and making the card easier to scan.

If we would like to be consistent with Codex patterns, we could do the following:

  • Desktop (card): use color-subtle as in the existing existing Codex[[ https://doc.wikimedia.org/codex/latest/components/demos/card.html | Card component ]] where the title uses color-base while the description uses color-subtle, reinforcing a clear hierarchy between primary and supporting information.
  • Mobile (bottom sheet): use color-base for the body text as in the existing Popover and Dialog components.

I agree with Esanders and Quiddity -- making the description easier to skip over doesn't seem like it helps. The description/question are vital context for the buttons, and you can't really use the buttons without knowing what they'll do.