Refine ProviderCard v2 — logo, price, badges, footer, unverified treatment

- Logo: circle → 64px rounded rectangle (8px radius), positioned fully
  inside image area with white border + shadow
- Footer removed — redundant since whole card is clickable and price
  is already in content area
- Price: split "Packages from" (body2) + price (h6/500wt) for lighter
  ecommerce feel, replaces blocky labelLg/700
- Verified badge bumped to medium size for visibility
- Capability badge: medium size, trailing info icon + capabilityDescription
  tooltip prop for plain-language definitions on hover
- Unverified cards: 3px top accent bar, list on neutral.50 background
- Caption/CaptionSm weight: 400 → 500 system-wide (extends D019)
- Meta row: body2 → caption size for clearer tertiary hierarchy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 18:28:28 +11:00
parent 811736dbb9
commit 891ded2fdb
9 changed files with 160 additions and 101 deletions

View File

@@ -7,26 +7,16 @@
"height": { "$value": "180px", "$description": "Fixed image height for consistent card sizing in list layouts" }
},
"logo": {
"$type": "dimension",
"$description": "Provider logo overlay dimensions.",
"size": { "$value": "56px", "$description": "Logo circle diameter — positioned bottom-left of image, overlapping content area" }
},
"footer": {
"$description": "Footer bar styling — warm beige bar with package pricing.",
"background": {
"$type": "color",
"$value": "{color.brand.100}",
"$description": "Warm beige footer — brand.100 provides subtle brand warmth"
},
"paddingX": {
"size": {
"$type": "dimension",
"$value": "{spacing.4}",
"$description": "16px horizontal padding — matches compact card padding"
"$value": "64px",
"$description": "Logo width/height — rounded rectangle, overlapping image bottom into content row"
},
"paddingY": {
"borderRadius": {
"$type": "dimension",
"$value": "{spacing.2}",
"$description": "8px vertical padding — compact footer bar"
"$value": "{borderRadius.md}",
"$description": "8px rounded rectangle — softer than circle, matches card border radius"
}
},
"content": {

View File

@@ -162,18 +162,18 @@
},
"caption": {
"$description": "Caption default — fine print, timestamps, metadata. Montserrat Regular.",
"$description": "Caption default — fine print, timestamps, metadata. Montserrat Medium.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.xs}", "$type": "dimension", "$description": "12px" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.417, "$type": "number" },
"letterSpacing": { "$value": "0.2px", "$type": "dimension" }
},
"captionSm": {
"$description": "Caption small — compact metadata, footnotes. Montserrat Regular. Min 11px for accessibility.",
"$description": "Caption small — compact metadata, footnotes. Montserrat Medium. Min 11px for accessibility.",
"fontFamily": { "$value": "{fontFamily.body}", "$type": "fontFamily" },
"fontSize": { "$value": "{fontSize.2xs}", "$type": "dimension", "$description": "11px — accessibility floor" },
"fontWeight": { "$value": "{fontWeight.regular}", "$type": "fontWeight" },
"fontWeight": { "$value": "{fontWeight.medium}", "$type": "fontWeight" },
"lineHeight": { "$value": 1.364, "$type": "number" },
"letterSpacing": { "$value": "0.2px", "$type": "dimension" }
},