Page MenuHomePhabricator

Create design prototype for how to display tokens in Codex documentation
Open, Needs TriagePublic

Description

Background/Goal

Currently our Codex tokens demo doesn't have a visual differentiation between global and decision tokens. It mixes global and decision tokens with the same visual resources, so users might be confused trying to understand this demo. Our Codex demo should be a bit more similar to our visual proposal in Figma, visually separating the global and decision tokens so that it is very easy to understand what each one is.

Captura de pantalla 2022-02-21 a las 12.51.43.png (1×2 px, 1 MB)

Captura de pantalla 2022-02-21 a las 12.52.09.png (1×2 px, 1 MB)

We need to conduct a design review of how tokens are displayed in Codex documentation and provide feedback for improving organization and readability.

User stories

As a demo user, I need to differentiate which are global and which are decision tokens.

Acceptance criteria (or Done)

Design

  • Create a visual proposal for Codex tokens demo

Codex

  • Apply proposal in our Codex demos

Event Timeline

Is this about a design review for the initial version of tokens display established in T295843?
I've been reaching out to @bmartinezcalvo on a tokens representation review as well.

Is this about a design review for the initial version of tokens display established in T295843?
I've been reaching out to @bmartinezcalvo on a tokens representation review as well.

Hey @Volker_E this task is to have some time to update our Codex tokens demo, trying to bring the visual design of the tokens a bit closer to our Figma proposal since currently our Codex tokens demo doesn't have a visual differentiation between global and decision tokens (it mixes all of them with the same visual resources) so users might be confused trying to understand this demo.

Captura de pantalla 2022-02-21 a las 12.51.43.png (1×2 px, 1 MB)
Captura de pantalla 2022-02-21 a las 12.52.09.png (1×2 px, 1 MB)

We should design a visual proposal for the Codex demo page to separate them visually.