Best way to structure reusable Figma components for a skincare product page and educational blog?

Hi everyone,

I'm working on a mobile-first Figma design system for a kids' skincare and wellness website. I want to make the product pages and educational blog layouts consistent without creating an overly complicated component library.

The design needs to support product information, ingredient lists, usage instructions, FAQs, and educational articles that help parents understand basic skincare topics.

What I've built so far

• A product card using Auto Layout with nested badge components

• Basic text styles and color variables

• Three product pages using the same base template

Where I'm stuck

1. Variants vs. separate components

For elements such as ingredient lists, age-suitability badges, and product availability labels, would you use component variants or separate components? My variant combinations are growing as I add different product sizes and bundles.

2. Long-form educational content

What's your preferred approach for designing reusable FAQ accordions, ingredient callouts, and comparison tables? How do you keep educational content readable on mobile without making the layout feel overwhelming?

3. Shared components

Would you keep trust badges, safety notes, and educational callouts in a shared component library or build them directly into individual page templates?

4. Accessible color palettes

For a soft, child-friendly skincare website, how do you maintain WCAG AA text contrast while keeping the visual design gentle? Do you use Figma Variables to manage color tokens?

5. Developer handoff

If you're handing designs over to Shopify or Webflow developers, how do you keep spacing, typography, and color tokens consistent between Figma and the final website?

I've tried nesting most elements inside one large component, but managing overrides quickly became difficult. I'm now considering smaller components, such as badges, list items, and accordion rows, that can be reused across product and article layouts.

For those who have built similar design systems, how do you decide which elements deserve variants and which should remain independent components?

I'd appreciate any practical examples, component naming conventions, or community files you can share.

Thanks!