Page MenuHomePhabricator

Improve the visual hierarchy between sections in Codex
Closed, ResolvedPublic1 Estimated Story Points

Description

Background/Goal

The padding between some sections in Codex is not enough. E.g. in the Contributing design the padding between h4 sections and h3-h4 is not enough and these sections seem to be too close.

Captura de Pantalla 2022-12-13 a las 12.51.14.png (1×2 px, 618 KB)
Captura de Pantalla 2022-12-13 a las 12.49.03.png (1×2 px, 1 MB)
Separation between h4 (3.2.1, 3.2.2...) is not enoughSeparation between h4 and h3 (3.2.3 and 3.3) is not enough

User stories

As a user I need to visually understand the sections in each Codex page.

Proposal

New padding_01_B.png (5×2 px, 789 KB)

Acceptance criteria (or Done)

  • Update the spacing between sections in Codex
    • H1 - Body: 20px
    • H1 section - Divider: 48px
    • Divider - h2: 48px
    • H2 - H3: 32px
    • H2 sections padding: 32px
    • H3 - Body: 16px
    • H3 sections padding: 32px
    • H3 - H4: 24px
    • H4 - Body: 12px
  • Update heading formats (h2, h3, h4) from Semibold to Bold

Design Review

  • Separation between h4 (4.2.1, 4.2.2, 4.2.3) should be 24px
  • Separation between h4 and body should be 12px

Event Timeline

bmartinezcalvo renamed this task from Increase the padding between sections in Codex to Improve the visual hierarchy between sections in Codex.Dec 13 2022, 1:20 PM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)

@bmartinezcalvo - can you please put an initial/proposed priority level on this task and move it to the Backlog column?
DST prioritization guidance

bmartinezcalvo moved this task from Inbox to Backlog on the Design-System-Team board.

@bmartinezcalvo This should be revisited with latest https://www.figma.com/file/X8pKlndyPaqZg4I3GubQs6/Font?node-id=886%3A5584&t=x4PMQlilFRWk8d37-0
We've got differences here with the Figma font tokens in line-height for example. Also VitePress features letter-spacing out of box, which I assume we should not feature in our styling, but haven't made any note on the Figma typography styles? cc: @Sarai-WMDE

Change 888290 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Refine visual hierarchy and use Codex tokens

https://gerrit.wikimedia.org/r/888290

Change 888290 merged by jenkins-bot:

[design/codex@main] docs: Refine visual hierarchy and use Codex tokens

https://gerrit.wikimedia.org/r/888290

Change 889216 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Refine visual hierarchy and use design-first heading styles

https://gerrit.wikimedia.org/r/889216

Change 889216 merged by jenkins-bot:

[design/codex@main] docs: Refine visual hierarchy and use design-first heading styles

https://gerrit.wikimedia.org/r/889216

Restricted Application raised the priority of this task from Low to High. · View Herald TranscriptFeb 14 2023, 8:56 PM
Volker_E set the point value for this task to 1.

Change 889230 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.5.0 to v0.6.0

https://gerrit.wikimedia.org/r/889230

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/66d018802f/w

Change 889230 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.5.0 to v0.6.0

https://gerrit.wikimedia.org/r/889230

Design sign-off done. Adding some things to fix:

  1. Separation between h4 (4.2.1, 4.2.2, 4.2.3) should be 24px instead (currently is 20px). The rest is ok.

Captura de Pantalla 2023-02-15 a las 12.50.31.png (1×2 px, 470 KB)

  1. Separation between h4 and body should be 12px instead (currently is 16px).

{F36845680}

@Volker_E moving the task to Ready for Development so you can fix it.

Change 890511 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Refine visual hierarchy and use Codex tokens (continued)

https://gerrit.wikimedia.org/r/890511

Change 890511 merged by jenkins-bot:

[design/codex@main] docs: Refine visual hierarchy and use Codex tokens (continued)

https://gerrit.wikimedia.org/r/890511

Change 893051 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

https://gerrit.wikimedia.org/r/893051

Change 893051 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

https://gerrit.wikimedia.org/r/893051

For Codex demo improvements under a certain significance of change like this one, it makes sense to skip QTE sign-off.

Volker_E claimed this task.
Volker_E updated the task description. (Show Details)

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/66d018802f/w/