Design LGTM 👍🏼

@christin I noticed we currently have three sizes for the avatar, and I’m wondering if we should add another size for pages like this one—the template page—where the avatar is quite large (48px).

@chrifro @jaaydenh I noticed we’re currently using numeric values as the "size ID" for components. Do we want to stick with this approach, or should we switch to using aliases like xs, sm, md, lg, etc.?

Numeric Example:

<Avatar size={18} />

Alias Example:

<Avatar size="sm" />

I think aliases will be better so we can stick to a standard set of sizes.

Should this set of sizes be specific to the component or more broadly defined? For example, would the sm unit always be 18 for other components as well, or just for the avatar? In my opinion, it makes sense for the sizes to be component-specific, but I just want to make sure we’re aligned.

I think component specific makes sense also for consistency we should probably keep the Tailwind naming conventions of "xs","sm","md","lg","xl", etc

I think component specific makes sense also for consistency we should probably keep the Tailwind naming conventions of "xs","sm","md","lg","xl", etc

Sounds good, I updated the component naming in Figma accordingly (see component)

@christin I noticed we currently have three sizes for the avatar, and I’m wondering if we should add another size for pages like this one—the template page—where the avatar is quite large (48px).

Good catch! I created a quick mockup and it seems like the lg size (40px) fits great also in this context

Just sharing my status. It’s been more work than I initially thought. I didn’t realize how many different places were using the Avatar component with custom styles applied. I’ve managed to get the new design in place, but a few components need extra work to look good with the changes.

Chromatic flagged 254 affected snapshots, and I’m reviewing them one by one to ensure everything is in place and looks professional.