Phase 1 · FoundationsComponent Library
Every atom and molecule the Oakenforge redesign will use. Built on the existing Forge tokens (Cinzel + Manrope + ember-orange) with a much expanded component vocabulary — stat tiles, performance bars, grade pills, dense data rows, timelines, popularity bars, proper empty states, and a real footer. All data is realistic Restoration Druid placeholder content.
DEV
Forge direction
Cinzel · Manrope · JetBrains Mono
01
Type & Color Tokens
The Forge palette plus performance grades from poor to legendary best. All grade colors map to the parse tiers WoW players already know.
Type Scale
Cinzel · Manrope
3,039 HPS
Restoration Druid
Fight Overview
Body — Manrope 13/400. Lore-light, neutral, easy at small sizes.
2,837,422 total · 73.4% uptime · 12 casts
— Forge —
Color System
--grade-* · --cc · --bg-*
99957550251
02
Stat Tiles & KPIs
The atomic unit of the new Fight Overview. Each tile carries a label, a big tabular number, optional sparkline, optional delta, and optional bar.
KPI Tile — Hero
.stat-tile--lg
Used 4-up across the Fight Overview hero
HPS
3.04m
▲ 12.4% vs avg
Parse
87
Heroic · #11 of 247
Effective HPS
2.61m
14.1% overheal
Mana Efficiency
94%
▲ Top 8% in pool
Compact Stat Tile
.stat-tile
For secondary metric strips
Avg cast time
1.21s
Mana spent
88.6%
Deaths prevented
23
Avg movement
704yd
Wisdom HPS
638k
Mana received
24k
Innervates
7
Avg HoT targets
4.5
Stat Row
.stat-row
For "talents" / "items" overview lists
Verdant Heart
+4.03%
Reforestation
+3.55%
Lush Growth
+3.93%
Embrace of Life
+2.25%
03
Performance Bars & Grades
Color-graded progress bars with optional markers, segmented quality strips, and parse number + bar combos.
Gradient Bar
.bar-fill--gradient
87%
94%
73 (avg 78)
Parse Bar
.parse-cell
99
87
74
52
28
Grade Pills
.grade-pill
Legendary
Excellent
Great
Good
Solid
Okay
Below avg
Poor
04
Spell Atoms
The most reused element in the app — spell icons + names + hover tooltips. Inline-icon-everywhere is what makes WoWAnalyzer feel dense.
Icon Sizes
.spell__icon--lg / xl / xxl
RJ
RJ
TR
CV
School Tints
.spell__icon--{school}
N
A
F
Fr
Sh
H
P
Spell + Tooltip
.spell--tooltip
Hover any spell name
Your RJRejuvenationRejuvenationHeals the target for X over 15 sec. Foundation HoT — your uptime should not drop below 80% on tank or focus targets.
uptime is strong, but
WGWild Growth★Wild GrowthHeals up to 5 injured allies in a 30-yard radius for X over 7 sec. Use on cooldown during raid damage.
casts could be tighter — you missed
CVConvoke the Spirits★Convoke the SpiritsCalls upon the Druid spirits to perform 16 random abilities over 4 sec. Major raid CD — pair with Tree of Life when possible.
twice in the burst window.
Cast-Frequency Row
.spell-row
Replaces the flat .fh-table for casts
05
Uptime Rings
For buffs and HoTs. Color graded by quality threshold per spell.
RJRejuvenation
target ≥ 85%
LBLifebloom
target ≥ 80%
EBEfflorescence
target ≥ 65%
FBFlourish
★ major CD
RGRegrowth (HoT)
target ≥ 50%
06
Timeline & Ramp Strip
For ramp-window quality, cooldown overlap, and the new "Efficiency" tab. Replaces the flat ramp body with a real timeline visualization.
Cooldown Timeline
.timeline
07
Checklist & Insights
Color-coded callouts pulled into the Casts and Overview tabs. Replaces the existing rotation checklist with a richer pattern that supports inline spell icons + actions.
✓
WGWild Growth uptime is strong
90% of maximum casts hit. +47k effective HPS over the fight from this single decision.
Top 18%
!
IVInnervate★ usage below target
You cast Innervate 7 times when 11 were possible. Drift the next 4 casts forward by ~30s each — cleanest fix is pairing with Tree of Life.
Fix
×
Missed CVConvoke★ in burn window
Burn phase started at 6:34, Convoke came off CD at 6:31 but wasn't pressed until 6:58. 27 seconds delayed on a 2-minute CD = a full Flourish window of value.
Fix
i
Mana profile is healthier than peers
You finished at 23% mana; the top-200 average finished at 8%. Room to spend more aggressively in P2 burn.
08
Dense Data Table
Replaces the flat fh-table. Tabular nums, hover states, active-row indicator, and inline parse cells.
09
Character Card & Popularity Bar
Foundation for the new Player Hub landing page (Battle.net roster) and the Talents popularity rows that match Archon's density.
Character Card
.char-card
Class color-tinted hover
S
Sagikos
Druid·Restoration·Skullcrusher · US
87
Best Parse
2,872
M+ Rating
681
Item Lvl
A
Aerystrasz
Monk·Mistweaver·Skullcrusher · US
79
Best Parse
2,541
M+ Rating
678
Item Lvl
L
Luminari
Paladin·Holy·Skullcrusher · US
68
Best Parse
2,287
M+ Rating
672
Item Lvl
N
Nyxara
Priest·Holy·Skullcrusher · US
54
Best Parse
1,943
M+ Rating
665
Item Lvl
Popularity Bar
.pop
Archon-style — Talents tab will use this
VHVerdant Heart
78.2%
RFReforestation
62.4%
PBPhotosynthesis
55.1%
ELEmbrace of Life
38.0%
CVCenarion Ward
24.3%
10
Buttons, Chips & Pill Groups
Buttons
Chips
Forge
Kill · 87 parse
Mana low
Wipe · 62%
AI ready
Nature · 0.8% mana
Pill Group / Difficulty
LFRNormalHeroicMythic
11
Empty States
Replaces emoji + one-line empty states with a proper rune sigil + title + description + CTA pattern.
No fight selected
Pick a fight from your history above to see cast frequency, ramp quality, and rotation grades.
No top-200 data yet
Analyze a kill to fetch up to 200 of the best parses for this boss + spec. Comparisons unlock once data lands.
12
Section Headers & Footer
Section Header
.section-head
Cooldown Usage
How well you used your major cooldowns relative to availability and intended pairing windows.