[landing] introduce new typography design system
ClosedPublic
Actions

Authored by ginsu on May 9 2023, 5:29 AM.

Details

Reviewers

atul
kamil

Commits

rCOMMea8e888d9e6c: [landing] introduce new typography design system

Summary

Introduce a more designer friendly typography design system. The goal of this is to create a very clear source of truth between ted/future designers and any dev when it comes to which typogprahy we use in our designs and code. This file was built by using Ted's new typography design system in the figma.

linear task: https://linear.app/comm/issue/ENG-3830/create-a-tokenized-typography-design-system

Test Plan

Had Ted review this, and got his stamp of approval, and I also locally tested every typography and made sure that they matched what was in the designs

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.May 9 2023, 5:29 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 9 2023, 5:29 AM

ginsu edited the summary of this revision. (Show Details)May 9 2023, 5:31 AM

ginsu added reviewers: atul, kamil.

ginsu edited the summary of this revision. (Show Details)

ginsu edited the summary of this revision. (Show Details)May 9 2023, 5:36 AM

Harbormaster completed remote builds in B19195: Diff 26286.May 9 2023, 5:47 AM

ginsu requested review of this revision.May 9 2023, 5:47 AM

ginsu added a child revision: D7756: [landing] introduce colors from design system.May 9 2023, 5:58 AM

I also locally tested every typography and made sure that they matched what was in the designs

Would be good to test this sort of thing in a couple of browsers (I usually do Safari/Chrome/FireFox). It's probably totally fine, but just to make sure there's no inconsistency

landing/typography.css
71–90 ↗	(On Diff #26286)	(Having three "levels" of paragraph seems weird to me. Especially since we've left `h5` and `h6` on the table.)

This revision is now accepted and ready to land.May 10 2023, 5:21 AM

Would be good to test this sort of thing in a couple of browsers (I usually do Safari/Chrome/FireFox). It's probably totally fine, but just to make sure there's no inconsistency

Good shout. Will double check this

landing/typography.css
71–90 ↗	(On Diff #26286)	I can speak to Ted about this if you feel strongly, but these are just arbitrary variable names that Ted picked out. These names shouldn't be coupled with any html text elements as any text element should be able to use these values

Would be good to test this sort of thing in a couple of browsers (I usually do Safari/Chrome/FireFox). It's probably totally fine, but just to make sure there's no inconsistency

Double checked this and there are no inconsistencies. This diff should now be good to land

landing/typography.css
71–90 ↗	(On Diff #26286)	Spoke to @ted (oh nice ted has a phab profile now!) about this yesterday and we both agree we should keep it like this to match his design system he created in Figma. But if we ever want to change a value or a name in this file in the future it should not be difficult to do.