browse page user experience (excluding filters)

[susanev]

overview

this issue defines the specifics of the user experience on the browse page (excluding the filters)
this is intended to describe the entire user experience related to filters, not make any claims about which pieces of work should be in which pr
if you are unsure how to get style info from figma, pls reach out to @susanev they are super happy to help

design details

general

ux designs in figma

text styles

• all general dark text should be #131314, currently, our descriptions are showing as a much lighter gray color, also the sub-heading at the top of the page is also using a much lighter gray color
• descriptions should only be shown on the featured cards
• descriptions should be using Gilroy medium
• view package should be using Inter bold 18px
• the filters heading should not be an h6 as this breaks out of the heading order that's required for accessibility it should be an h2 (no change to style info, only semantics)
• the page heading of pulumi packages should not be an h4 as the page needs an h1 (no change to style info, only semantics)
• the featured cloud providers and a-z package heading should be h2s (no change to style info, only semantics)
• the all packages heading should be A – Z Packages
• individual package cards, should be using h3 for the card headings (no change to style info, only semantics)

package meta data

• adjust the date and published by message into one line, and add version number, e.g., v4.20.0 published on September, 10th 2021 by Pulumi

view package interaction

• view package was designed as a tertiary button, states on are in this figma frame for view package style info; though if folks feel strongly, we can use the current underline style instead

package logos

• we need to have a max-width on the logos, that never exceeds more than 50% of the card width; so default to a height of 3rem (or 2rem) but reduce that if the logo width ever exceeds 50% of the card width
• lets reduce the height of non-featured packages to 2rem so there is more significant difference between the featured and non-featured packages

section headers (featured, a-z)

• display badge next to featured and a-z headings display the count of those items, see figma frame for heading badge styles for style info
• these numbers should adjust based on filters
• if there are no featured packages with the current state of the filters, that heading should be hidden entirely
• if there are no a-z packages with applied filters, display the empty message Looks like we don't have any packages that match your filters. Adjust or clear the filters and try again. with a primary button of Clear all filters
  • primary button colors are a background color of #4d5bd9 and text color of #fff

[cnunciato]

all general dark text should be #131314

Little request: If you could express these kinds of things in terms of the palette (so in this case, "gray 900" or similar), it'd keep us from having to look up what the corresponding palette values are.