Med & component library
Every color token, type style and component used across this site — the single source of truth for the Med & interface.
Color Tokens
CSS variables — used everywhere via var(--token)
Brand Blue
--brand-blue
#26a9e0
Brand Green
--brand-green
#8dc63f
Blue Dark
--brand-blue-dark
#1580b3
Green Dark
--brand-green-dark
#6ba32a
Blue Soft
--brand-blue-soft
#e6f5fc
Green Soft
--brand-green-soft
#f1f8e6
Ink
--ink
#0b2230
Ink Soft
--ink-soft
#47606e
Brand Gradient — top → bottom
linear-gradient(180deg, #26a9e0, #8dc63f)
Typography
Outfit (display) + Plus Jakarta Sans (body)
Display Heading — Outfit Bold
Gradient Text Heading
Body large — Plus Jakarta Sans for comfortable long-form reading across the site.
Body small — used in card descriptions and secondary content.
Eyebrow Label StyleButtons
Pills & Tags
Icon Badges & Icon Set
Stroke icons on gradient badges
Healix Stat Feature Card
Title + Explore pill, hairline, icon circle + big number
Two-Tone Heading
Second half fades to gray
See how Med & connects quality products with the people who need them
FAQ Accordion
Soft container · left intro · plus-icon accordion
Frequently asked questions
Component demo with two sample items.
One item opens at a time; the plus rotates 45° into a close icon with a smooth height animation.
Feature Card
Green Tint Variant
The badge gradient flips direction for visual rhythm across grids.
Compact Variant
Works without a link for informational grids.
List Card
Checklist card used for divisions & product categories
Stat & Step Cards
Stat card with gradient number
Without an icon it tightens up
of 2
Step Card
Circular gradient progress ring, numeral centered, 'Step X of N' label below.
of 2
Sequence Ready
Designed to sit in 5-across process rows.
Gradient Usage
Brand gradient lives on buttons and small accents only — never on card surfaces
Animated gradient button
Gradient accents
Gradient text & ring
Reserved for highlight moments.
Marquee
Auto-scrolling pill track — pauses on hover