Achievement Gold vs Success Emerald
Gold is what you earn. Emerald is what the system confirms.
This document defines when to use Achievement Gold (#fcc419) versus Success Emerald (#10b77f). Both colors relate to positive outcomes, but they serve fundamentally different roles.
The Core Distinction
Achievement Gold (#fcc419) | Success Emerald (#10b77f) | |
|---|---|---|
| Meaning | "You did something remarkable" | "That worked" |
| Emotion | Pride, accomplishment | Confidence, reassurance |
| Temperature | Warm, radiant | Cool, steady |
| Frequency | Rare -- scarcity is the point | Abundant -- reliability is the point |
| Motion | Celebratory: pulse glows, confetti, spring pops | Functional: checkmark draws, fade-ins |
| Hierarchy | Foreground hero, pulls the eye | Background support, fades into rhythm |
Decision Heuristic
"If the user did nothing, would this still show?"
YES (system reporting state) --> Emerald. NO (user's effort caused this moment) --> Gold.
Shorter mnemonic: "Earned it? Gold. Confirmed it? Green."
The "Completion" Gray Area
Completion has two temporal phases that use different colors:
- The celebration moment (Gold) -- confetti, glow, achievement toast. Event-driven, short-lived. This is the "you earned it" moment.
- The persistent done-state (Emerald) -- checkmark, "Completed" label, crossed-out text. State-driven, permanent. This is the receipt.
Example: In PublicTimelineEvent.vue, an in-progress milestone shows dot-gold (aspiration -- not yet earned but set by the user). A completed milestone shows dot-success (confirmed done). Gold is the carrot; emerald is the receipt.
Another example: When a badge unlocks, AchievementCard.vue shows a glow-gold effect (celebrating the earn). But BadgeModal.vue shows an emerald "Unlocked" status indicator (confirming the state).
Gold Use Cases
These are the only contexts where gold should appear:
| Context | Why Gold |
|---|---|
| Logo Progress Point dot | Brand identity -- the gold dot IS the achievement symbol |
| Badge unlock celebrations | User earned a badge through action |
| Legendary rarity glow | Highest rarity tier -- maximum earned prestige |
| XP progress bars | XP is accumulated through earned actions |
| Rank display stars | Rank represents cumulative earned progress |
| Milestone indicators (in-progress) | Aspirational -- set by the user, not yet completed |
| Goal completion hero animation | User achieved their stated goal |
| Almost (badges at 80%+) | Anticipation of earning |
| Streak milestones (30-day, 100-day) | User earned it through sustained effort |
| Achievement notifications | "You earned it" moments in notification feeds |
Emerald Use Cases
Emerald covers system confirmations broadly:
| Context | Why Emerald |
|---|---|
| "Unlocked" status label on badges | System confirming badge state after celebration fades |
| Completed milestone/task checkmarks | System confirming state is "done" |
| On-track pace indicators | System confirming user is on pace |
| Health checks & positive system status | System reporting healthy state |
| Form submission confirmations | System confirming data was saved |
| Success toasts | System confirming an action succeeded |
| "Completed" count in dashboard stats | System displaying an aggregate stat |
| Password strength (strong) | System confirming input meets requirements |
Complementary Flow
Gold and emerald work in sequence, not in isolation:
User checks in
--> Emerald toast: "Check-in saved" (system confirms)
--> If this triggered a badge:
--> Gold celebration: confetti + glow (user earned it)
--> Badge card shows emerald "Unlocked" (state confirmed)Emerald is the drumbeat of routine. Gold is the cymbal crash of achievement. If everything were gold, the crash would lose its impact.
Animation Guidance
- Gold moments get celebratory treatment: confetti bursts, spring-scale pop-ins, shimmer effects, pulsing glows. These animations are event-driven and short-lived.
- Emerald moments get functional treatment: simple fade-ins, checkmark draws, smooth color transitions. These animations are state-driven and persistent.
Edge Cases
| Scenario | Color | Reasoning |
|---|---|---|
| Goal marked complete by user | Gold celebration, then emerald "completed" state | Two-phase: celebrate the earn, then confirm the state |
| Streak milestone (e.g., 30 days) | Gold | User earned it through sustained effort |
| Daily streak counter (flame icon) | Orange/coral (accent) | Streaks use the accent color family -- separating daily consistency from discrete achievement |
| Goal progress bar at 100% | Emerald bar, then trigger gold celebration | The bar is a system indicator; the celebration is the earned moment |
| Form saved successfully | Emerald | System confirmation, nothing was "earned" |
| Admin "completed" activity type | Emerald | System reporting a state change |
Related
- Brand Guide -- Full brand philosophy, palette, and visual identity
- Logo Rationale -- Why the gold dot means what it means
Last updated: 2026-05-22 — v2.5 audit: verified color philosophy, use cases, and component references (PublicTimelineEvent.vue, AchievementCard.vue, BadgeModal.vue) against current product behavior