Brand colours are admin-controlled (ThemeConfig.primaryColor); every shade is derived with color-mix(). Sage always pairs with deep forest ink; white text sits only on forest.
Headings and hero statements in Instrument Serif. Buttons, labels, prices and navigation in Manrope. Bengali falls back to Hind Siliguri in both stacks. Long strings are designed for +40%.
{{ s.n }}{{ s.spec }}{{ s.sample }}
Aa AaAa
Instrument Serif 400 · 400 italic
AaAaAaAa
Manrope 400 · 600 · 700 · 800
সততায় বেড়ে ওঠা সুস্থতা
Hind Siliguri · Bengali (_bn fields)
03 · Buttons
Actions, every state
52px default / 44px compact touch targets. Pill radius. 300ms ease on colour; 2px lift on hero CTAs.
{{ sn }}{{ row.name }}
Live:
04 · Inputs & controls
Forms that stay calm
{{ qty }}
05 · Badges, chips & trust
Small signals
{{ b.t }}
← ingredient tooltips (hover / focus / tap)
{{ ci.label }}{{ ci.sublabel }}
06 · Product card
Default · hover · out of stock · sale
Hover swaps the pack shot for an ingredient close-up, lifts 4px and reveals quick-add + quick-view. Edge cases: 60-character name, 1-word name, ৳12,450 price, zero reviews.