MetaMask / MetaMask/metamask-extension

[EXT] Add DisplayLG text variant from design-tokens

Open
#28,085 0 comments 0 reactions 0 assignees View on GitHub
INVALID-ISSUE-TEMPLATE team-design-system
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### **Description**

We need to add a `DisplayLG` typography token to the extension repository. This token will be used across the design system for large display typography, ensuring consistency in the typographic styles for larger screens.

### **Technical Details**

- Create a new `DisplayLG` typography token in the extension repository.
- Reference the following resources for the specific typography styles:
- Figma File: [DS Typography / Large Screen](https://www.figma.com/design/likmuA72JatXDKDChibHBG/DS-Typography-%2F-Large-Screen?node-id=0-1&t=QhahIunb9CH4PfFL-1)
- Figma File: [DS Typography / Small Screen](https://www.figma.com/design/Na8UKll7g12UywIPGEVLvX/DS-Typography-%2F-Small-Screen?m=auto&node-id=0-1&t=2EAwp5DP5nWGUTbK-1)
- Insight Report: [Typography Audit](https://www.figma.com/design/MObd9JM3xkqwD4wHu7I5DX/Typography-Audit?node-id=0-1&t=09x3QsgwDSrtwOTj-1)

### **Acceptance Criteria**

- Add the `DisplayLG` typography token with the correct styling for large screens based on the Figma design files.
- Validate the new token across different platforms to ensure consistency in typography rendering.
- Update documentation

### **References**

- Design Ticket: [MetaMask Planning Issue #3244](https://app.zenhub.com/workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/gh/metamask/metamask-planning/3244)
- Figma File: [DS Typography / Large Screen](https://www.figma.com/design/likmuA72JatXDKDChibHBG/DS-Typography-%2F-Large-Screen?node-id=0-1&t=QhahIunb9CH4PfFL-1)
- Figma File: [DS Typography / Small Screen](https://www.figma.com/design/Na8UKll7g12UywIPGEVLvX/DS-Typography-%2F-Small-Screen?m=auto&node-id=0-1&t=2EAwp5DP5nWGUTbK-1)
- Insight Report: [Typography Audit](https://www.figma.com/design/MObd9JM3xkqwD4wHu7I5DX/Typography-Audit?node-id=0-1&t=09x3QsgwDSrtwOTj-1)

Contributor guide

Open the contributing guide

Research direction

Start by locating the existing typography tokens in the MetaMask extension repository, then compare their structure with the DS Typography / Large Screen and Small Screen Figma files and the Typography Audit. The work is done when DisplayLG has the specified large-screen styling, is validated across platforms, and the relevant documentation is updated.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma, typescript
Domain
design
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.