Updated Badge Architecture Preview
Permanent bean certifications (FTO, Organic) moved to the bottom-right corner, while temporary status remains top-left and merchandising callouts (★ Best Seller, Featured) sit proudly top-right.
Top-Left: Roasting Status (Lifecycle)
Top-Right: Best Seller / Featured (Promotional)
Bottom-Right: FTO / Organic (Permanent Bean Traits)
Part 1: In-Context Catalog Cards
Hover over any card to see how certifications smoothly fade out so the hover overlay text is 100% clean and unobstructed.
Talon Pull
Both Top Pills
Status on left ("Just Hatched"), Best Seller on right. Both pills are now identically aligned vertically at
top: 1rem with matching 1.45rem height.★ Best Seller
Talon Pull
★ Best Seller
$12
Sumatra Mandheling
Best Seller + FTO
Top-right Best Seller gold pill, and permanent FTO badge cleanly in the bottom-right corner.
★ Best Seller
FTO
Sumatra Mandheling Fair Trade Organic
★ Best Seller
$12
Feather Soot
Best Seller
Classic dark blend with prominent Best Seller callout in the top-right corner.
Part 2: On Individual Roast Detail Page Header
Rendered directly above the roast title on /roasts/early-bird/.
★ Best Seller
Early Bird
Nest Blend
Mid-Molt
Current Roast Batch
milk chocolate · caramel · smooth body
Part 3: List View Placement Options
In List View, the thumbnail is 4.75rem square so the badge is removed from the image. Here are the two ways to display it on the right side of the roast:
Option 1: Directly Next to Roast Title
Recommended
Immediately follows the coffee name inline on the right side of the roast.
Option 2: Far Right Side of Row (Meta Column)
Right Aligned
Placed on the far right edge of the roast row, above the roast descriptors.