Nikke Team Builder - Corrupted Theme

Nikke Element System

Five core elements with consistent color coding across all game features.

Element Selection Buttons

Element Badge Variants

Water

Outlined

Solid

Outline

Wind

Outlined

Solid

Outline

Iron

Outlined

Solid

Outline

Electric

Outlined

Solid

Outline

Fire

Outlined

Solid

Outline

Boss Information

Example boss showing element weakness display.

Phantom Gloom

Element Weakness: Fire

HP: 450,000

Attack Power: 1,250

Recommended Level: 42+

Team Composition

Build your 5-unit team with position cards and drag-and-drop support.

1 Front Left

Scarlet Priest Abe

2 Front Middle

Soldier A Rapi

3 Front Right

Trap Lyudmila

4 Back Left

Fortress Maid Dolla

5 Back Right

Empty Slot

Unit Roster

Select units to add to your team. Each unit displays their element type.

Scarlet Priest Abe

Electric

Fire Damage Dealer

Soldier A Rapi

Fire

Penetration Type

Trap Lyudmila

Water

Support/Debuffer

Fortress Maid Dolla

Iron

Tanker/Defender

Sniper Rapunzel

Wind

Fire Damage Dealer

Mech Specialist Snow White

Electric

Rocket Damage Dealer

Code Examples

Element Selection Pills

Use element pills for interactive element selection or filtering.

<div class="element-pills">
  <button class="element-pill water">Water</button>
  <button class="element-pill wind">Wind</button>
  <button class="element-pill iron">Iron</button>
  <button class="element-pill electric">Electric</button>
  <button class="element-pill fire active">Fire</button>
</div>
        

Element Badges

Display element type consistently across units and bosses.

<!-- Outlined badge (default) -->
<span class="element-badge element-fire">Fire</span>

<!-- Solid badge (prominent) -->
<span class="element-badge solid element-fire">Fire</span>

<!-- Outline only (subtle) -->
<span class="element-badge outline element-fire">Fire</span>
        

Position Cards

Build 5-unit teams with position cards and state management.

<div class="team-position-cards">
  <div class="position-card filled">
    <div class="position-header">
      <span class="position-number">1</span>
      <span class="position-label">Front Left</span>
    </div>
    <div class="position-content">
      <div class="unit-display">
        <div class="unit-name">Unit Name</div>
      </div>
    </div>
  </div>
</div>
        

Unit Selection Buttons

Pill-style buttons for selecting units with element badge.

<div class="unit-grid">
  <div class="unit-card">
    <h5>Scarlet Priest Abe</h5>
    <span class="element-badge element-electric">
      Electric
    </span>
    <p>Fire Damage Dealer</p>
  </div>
</div>
        