V3 Design System Specification

Canonical visual language for the Trek360 achievement badge system.

This page defines the approved design rules. Production frames on the QA page (/dev/badges-v3-qa) should converge toward these specs.

Specificationv3.0 — May 2026

1Approved Silhouettes — Shape Authority

Each frame has one canonical silhouette. Shape is the primary identity — recognizable even as a white-on-black outline.

medalcirclePerfect circle — core achievement
compasscircle+pointsCircle with 4 directional star points — exploration
shieldtapered-shieldWide shoulders, ceremonial taper to point — guardian/safety
crownthree-tine-crownThree rising tines with concave arcs — leaderboard royalty
trophychaliceBowl + stem + base — major victory
relicteardropInverted teardrop — mythic/seasonal artifact
whanauorganic-heartSoft koru-influenced heart — connection/whānau
coincircleCircle with heavier edge — XP progression token
masterydiamond-hexagonElongated vertical emblem — full domain mastery
plaquerounded-rectTall vertical plate with generous radii — expedition honors

2Material Language — 6-Layer Forged Metal Stack

Surface TypeForged metal — directional top-lit gradient, not flat color
Layer Stack (bottom → top)
1
Drop shadow (rgba black, offset 1.5px down)
2
Primary rim gradient (directional hi→lo metal sweep)
3
Brushed radial texture (subtle center glow)
4
Top bevel catch (upper 20% light reflection)
5
Bottom bevel shadow (lower 30% depth)
6
Edge stroke (1.8px, tier edge color, 80% opacity)
Shell Rules
✓No internal fill patterns or motifs inside the shell
✓No containment rings, channels, or glass housings
✓No contour overlays or nested groove systems
✓Shell silhouette is the ONLY geometric element
✓All depth comes from gradient layering, not geometry

3Tier Progression — Bronze → Legendary

Medal — Tier Progression
bronzeForged Bronze
silverCold Steel
goldCeremonial Gold
platinumBlue-White Alloy
legendaryObsidian Alloy
Shield — Tier Progression
bronzeForged Bronze
silverCold Steel
goldCeremonial Gold
platinumBlue-White Alloy
legendaryObsidian Alloy
Crown — Tier Progression
bronzeForged Bronze
silverCold Steel
goldCeremonial Gold
platinumBlue-White Alloy
legendaryObsidian Alloy
Trophy — Tier Progression
bronzeForged Bronze
silverCold Steel
goldCeremonial Gold
platinumBlue-White Alloy
legendaryObsidian Alloy
Tier Rules
→Bronze → Gold: increasing warmth and richness
→Platinum: shifts cool, desaturated, slight ethereal quality
→Legendary: dark obsidian base + restrained aurora shimmer (teal/gold/violet)
→Aurora is concentric rings only — no particles, no bloom, no glow bleed
→Locked state: uniform grey desaturation, reduced bevel intensity

4Effects Budget — Allowed vs Prohibited

Allowed Effects
●Directional metal gradient (always)
●Top bevel light catch (always)
●Bottom bevel shadow (always)
●Edge stroke (always)
●Drop shadow (always)
●Legendary aurora rings (legendary tier only)
Prohibited Effects
✕Particle effects
✕Bloom / glow bleed beyond edge
✕Animated shimmer on idle
✕Box shadows on the frame
✕CSS filters (blur, brightness) on production frames
✕Nesting frames inside frames

5Scale & Proportion Rules

Scale Rules
→Edge stroke stays 1.8px at all sizes (does not scale)
→Bevel intensity stays constant — no size-based adjustments
→Shadow offset stays 1.5px at all sizes
→At 32px: silhouette must still be recognizable
→At 180px: metal gradient quality must hold without banding
Live Scale Test — Medal / Shield / Crown
32px
48px
64px
80px
120px
180px
Medal
32px
48px
64px
80px
120px
180px
Shield
32px
48px
64px
80px
120px
180px
Crown

6Progression States — Locked / Unlocked / Earned / Featured

medal
Locked
Unlocked
shield
Locked
Unlocked
crown
Locked
Unlocked
trophy
Locked
Unlocked
relic
Locked
Unlocked
lockedMaterial: Uniform grey — desaturated, reduced bevelIcon: Hidden or silhouette onlyInteraction: No hover effects
unlockedMaterial: Full tier material with all gradient layersIcon: Full color, tier-matchedInteraction: Hover lift (future)
earnedMaterial: Same as unlockedIcon: Full color with optional glow ring (future)Interaction: Click to view details
featuredMaterial: Same as earned + subtle ambient pulse (future)Icon: Full colorInteraction: Prominent display position

7Rarity & Glow Intensity

commonGlow: 0Aurora rings: 0No glow — clean metal only
uncommonGlow: 0Aurora rings: 0No glow — clean metal only
rareGlow: 0Aurora rings: 0No glow — clean metal only
epicGlow: 0.15Aurora rings: 0Faint edge luminance (future)
legendaryGlow: 0.3Aurora rings: 3Restrained aurora — 3 concentric rings
mythicGlow: 0.45Aurora rings: 5Full aurora — 5 rings (future)

8Icon Families — Content Inside Frames (Future)

Source:Lucide React or custom Māori-inspired SVG icons
Scale:Icon should fill ~60% of the padded content area
Color:Tier-matched — uses the metal mid/top color as icon fill
→Icons are separate from frames — never baked into the shell
→Icons render inside the children slot of each frame
→Icon complexity should reduce at smaller sizes
→No icon should touch or overlap the frame edge stroke

V3 Design System Specification — Trek360 Achievement System

Production rendering QA: /dev/badges-v3-qa · This specification: /dev/v3-design-spec