[Epic] Define the system's typographic styles and scale
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Sarai-WMDE
	Dec 3 2021, 11:43 AM

Description

Background/Goal

We need to make sure to define and document all the system compliant typographic styles.
The properties of the defined typographic styles and scale will be translated into our font design tokens.

Codex Figma exploration on typography tokens.

User stories

As a designer, I need to have access to the system's typographic scale, so I'm aware of which font styles I can apply, and where, when creating system compliant designs.

Considerations

We should evaluate the need and advantages of distributing Codex text styles as mixins. This effort would be captured in the AC list below and in a separate task.

Acceptance criteria (or Done)

As an outcome of this task, the system's typographic styles and their properties will be defined:

Typefaces “aka font families” (T305920)
- Document typefaces used for Figma as Codex tokens T313693
- Provide font families as Codex tokens
Font sizes and line-heights (typographic scale) (T305947)
Font weights
- Add font-weight to Codex tokens, this has happened already in first iteration of Codex tokens in Iceb311148e19174bd26afd34e5639caf28f8cd08
Text decoration
- Provide none, line-through and underline as Codex tokens T318023
Codex typographic styles (a combination of font family, font size and line-height) are captured as text styles in our Figma library (T295606)

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		• STH	T302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
Invalid		None	T302025 Upgrade Codex to Beta version
Resolved		Volker_E	T293127 [EPIC] Design System Foundation: Design and define design tokens
Resolved		None	T314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
Resolved		bmartinezcalvo	T295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
Resolved		Volker_E	T296995 Define the system's color palette
Resolved		Volker_E	T297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
Resolved		Volker_E	T305236 Create visited red link color token
Resolved		Volker_E	T313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
Resolved		ldelench_wmf	T322833 Update Yellow 600 for warning color
Resolved		Volker_E	T324449 Add new colors used in Message component and update border colors to the darkest tone
Resolved		• EUdoh-WMF	T322960 Define `accent-color` design token
Resolved		Sarai-WMDE	T296998 [Epic] Define the system's typographic styles and scale
Resolved		DAbad	T305920 Define the system's sans, serif and monospace typefaces
Resolved		Volker_E	T305947 Define the system's typographic scale (font sizes and line-heights)
Resolved		bmartinezcalvo	T321470 Use the system's typographic scale tokens (font size and line-heights)
Resolved		• KieranMcCann	T303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
Open		None	T331612 Document internationalization limitations of Figma font selection in Typography guidelines
Duplicate		None	T309158 Update Wikimedia Design Style Guide with typeface choices
Resolved		Volker_E	T313693 Implement system typeface choices in Codex tokens
Resolved		DAbad	T318023 Define the system's typographic styles on text decoration
Resolved		Volker_E	T322707 Provide `tab-size` option and decision token
Resolved		DAbad	T322811 Provide (legacy) font families as Codex tokens
Resolved		Sarai-WMDE	T297000 Define the design system's size and spacing scale
Resolved		Catrope	T324367 Enable Codex tokens to work with different font sizes
Open		None	T326900 Vertical centering issues of text/multiline text and icons in several components
Resolved		ovasileva	T328053 Verify impact of Design Systems Team's Codex Update on Web properties
Resolved	BUG REPORT	Volker_E	T329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
Resolved		Volker_E	T297001 Define the system's opacities
Resolved		Volker_E	T305084 Add 0.3 opacity
Resolved		Volker_E	T297003 Define the system's box shadow styles
Resolved		Volker_E	T310409 Button: Simplify focus styles application including `box-shadow`
Resolved		Sarai-WMDE	T297007 Define the system's iconography
Resolved		Volker_E	T300562 Define Border tokens
Resolved		bmartinezcalvo	T302181 Define the system's cursors
Resolved		Catrope	T304443 Document Motion tokens (animations and transitions)
Resolved		DAbad	T303522 Decide on CSS breakpoints for the design system
Resolved		Volker_E	T322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Sarai-WMDE created this task.Dec 3 2021, 11:43 AM

Sarai-WMDE mentioned this in T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma.

Sarai-WMDE renamed this task from Define the system's Typographic styles and scale to Define the system's typographic styles and scale.Dec 3 2021, 2:11 PM

Volker_E added a project: Design.Dec 8 2021, 6:34 AM

Volker_E subscribed.

Sarai-WMDE updated the task description. (Show Details)Jan 10 2022, 10:37 AM

egardner moved this task from Incoming/Requests to Needs Design on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.Feb 15 2022, 10:49 PM

egardner moved this task from Inbox to Planned New Components on the Codex board.Feb 15 2022, 11:08 PM

Sarai-WMDE mentioned this in T302889: Define the design system's approach to responsiveness.Mar 3 2022, 5:54 PM

Sarai-WMDE claimed this task.Mar 16 2022, 3:57 PM

Sarai-WMDE moved this task from Needs Design to Doing on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.

Sarai-WMDE edited projects, added Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint); removed Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board).Mar 16 2022, 5:36 PM

Sarai-WMDE moved this task from Research to In Development on the Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint) board.

Sarai-WMDE updated the task description. (Show Details)Mar 16 2022, 5:52 PM

Sarai-WMDE moved this task from In Development to Ready for Design on the Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint) board.Mar 30 2022, 4:38 PM

AnneT subscribed.Apr 4 2022, 9:12 PM

Sarai-WMDE updated the task description. (Show Details)Apr 12 2022, 2:20 PM

Sarai-WMDE updated the task description. (Show Details)

• STH edited projects, added Design-System-Team; removed Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint).Apr 15 2022, 9:35 PM

ldelench_wmf moved this task from Planned New Components to Inbox on the Codex board.Apr 22 2022, 8:52 PM

• STH moved this task from Inbox to Backlog on the Design-System-Team board.Apr 30 2022, 4:32 PM

• STH triaged this task as High priority.May 1 2022, 1:20 PM

• STH moved this task from Backlog to Up Next on the Design-System-Team board.May 17 2022, 5:17 PM

• STH moved this task from Up Next to Needs Refinement on the Design-System-Team board.May 17 2022, 9:17 PM

bmartinezcalvo mentioned this in T305920: Define the system's sans, serif and monospace typefaces.May 31 2022, 11:30 AM

Sarai-WMDE updated the task description. (Show Details)May 31 2022, 1:05 PM

Volker_E mentioned this in T176963: Upstream typography scale variables to WikimediaUI Base.Jun 9 2022, 10:02 PM

DAbad closed subtask T305920: Define the system's sans, serif and monospace typefaces as Resolved.Jun 13 2022, 4:00 PM

Sarai-WMDE updated the task description. (Show Details)Jun 21 2022, 4:24 PM

Volker_E updated the task description. (Show Details)Jul 26 2022, 6:17 PM

Related, but not blocking is T309158: Update Wikimedia Design Style Guide with typeface choices

DAbad added a parent task: T314086: Design System Foundation: Define & Implement Critical "Global" Visual Styles.Jul 28 2022, 10:27 PM

DAbad moved this task from Needs Refinement to Up Next on the Design-System-Team board.

bmartinezcalvo mentioned this in T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries.Aug 16 2022, 2:25 PM

Sarai-WMDE updated the task description. (Show Details)Sep 9 2022, 9:39 AM

@Sarai-WMDE do you think we should convert this to an epic? Given that there are already many related subtasks, it seems to already be functioning as an epic. Let me know if that's not the case, though.

+1 to an Epic here.

Sarai-WMDE renamed this task from Define the system's typographic styles and scale to [Epic] Define the system's typographic styles and scale.Sep 13 2022, 5:32 PM

Sarai-WMDE added a project: Epic.

Sarai-WMDE updated the task description. (Show Details)

In T296998#8229688, @ldelench_wmf wrote:

@Sarai-WMDE do you think we should convert this to an epic? Given that there are already many related subtasks, it seems to already be functioning as an epic. Let me know if that's not the case, though.

Done! I think 😄

Volker_E updated the task description. (Show Details)Sep 13 2022, 7:04 PM

Thanks all! Adding to roadmap board.

ldelench_wmf moved this task from Now to Later on the Design-System-Team (Design-System-Product-Roadmap) board.Sep 14 2022, 3:40 PM

Volker_E changed the status of subtask T318023: Define the system's typographic styles on text decoration from Open to In Progress.Sep 23 2022, 12:15 AM

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap). · View Herald TranscriptSep 23 2022, 12:15 AM

ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.Sep 26 2022, 3:22 PM

Sarai-WMDE updated the task description. (Show Details)Sep 26 2022, 4:22 PM

Catrope closed subtask T318023: Define the system's typographic styles on text decoration as Resolved.Oct 25 2022, 11:39 PM

Volker_E updated the task description. (Show Details)Nov 10 2022, 12:03 AM

ldelench_wmf closed subtask T322811: Provide (legacy) font families as Codex tokens as Resolved.Dec 7 2022, 9:54 PM

Volker_E closed subtask T322707: Provide `tab-size` option and decision token as Resolved.Dec 8 2022, 12:00 AM

Volker_E updated the task description. (Show Details)Jan 31 2023, 7:03 AM

@Sarai-WMDE @bmartinezcalvo What's holding us back from resolving this task?
“Codex typographic styles (a combination of font family, font size and line-height) are captured as text styles in our Figma library” is the open point on top.

@CCiufo-WMF Would you help signing-off T305947?

Update: Ahead of today's planning meeting have resolved T305947 as all changes have made it already to Codex v0.3.0 there.

In T296998#8607253, @Volker_E wrote:

@Sarai-WMDE @bmartinezcalvo What's holding us back from resolving this task?

The task related to the last, uncheck AC (T295606) is currently in design review.

Volker_E updated the task description. (Show Details)Feb 13 2023, 3:35 PM

This is also blocking resolving T314086

ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap).Feb 18 2023, 12:41 AM

Volker_E closed this task as Resolved.Feb 23 2023, 6:23 PM

Volker_E updated the task description. (Show Details)

This comment was removed by Volker_E.

Sub task T321470 hasn't made it through design sign-off yet. All task in description are done though.

AnneT moved this task from Inbox to Infrastructure on the Codex board.Mar 1 2023, 4:36 PM

Volker_E mentioned this in T333890: Implement typographic public mixin.Apr 3 2023, 9:54 PM

@Sarai-WMDE @Volker_E can we close this task? :)

Resolving this task based on our latest discussion during Design sync. All the initial typography tokens have been defined, and the first iteration of the styles has been completed. In next steps, we'll keep validating and fine-tuning the styles and make sure to document them consistently in Codex's Style Guide (see T338598: Update Typography guidelines in Codex Style guide).

[Epic] Define the system's typographic styles and scaleClosed, ResolvedPublicActions