✓ Production · SVG Canonical
ref: DESIGN_LANGUAGE.md
Frame QA Comparison
180px preview · 5 tiers + progress + locked · 3 frame types · 2 backgrounds
Grid View
Evaluate
Shape silhouette
Metal colour richness
Tier differentiation
Teal glass depth
Frame thickness
Specular highlights
Locked desaturation
Progress arc visibility
Dark bg contrast
Light bg contrast
Premium / prestige feel
Brand alignment
● Dark Background
SummitMedalFrame
bronze completed
silver completed
gold completed
platinum completed
legendary completed
progress 60%
locked
ShieldFrame
bronze completed
silver completed
gold completed
platinum completed
legendary completed
progress 60%
locked
CompassFrame
N
E
S
W
bronze completed
N
E
S
W
silver completed
N
E
S
W
gold completed
N
E
S
W
platinum completed
N
E
S
W
legendary completed
N
E
S
W
progress 60%
N
E
S
W
locked
○ Light Background
SummitMedalFrame
bronze completed
silver completed
gold completed
platinum completed
legendary completed
progress 60%
locked
ShieldFrame
bronze completed
silver completed
gold completed
platinum completed
legendary completed
progress 60%
locked
CompassFrame
N
E
S
W
bronze completed
N
E
S
W
silver completed
N
E
S
W
gold completed
N
E
S
W
platinum completed
N
E
S
W
legendary completed
N
E
S
W
progress 60%
N
E
S
W
locked
Side-by-Side: Gold Completed (all frames)
SummitMedal
Shield
N
E
S
W
Compass
Tier Gradient Strip (Medal only — metal quality check)
bronze
silver
gold
platinum
legendary