v0.2.0 · built on Tower of Elements' shipped CSS

PolyFishCSS

A general-purpose component kit — dark surfaces, a teal-mint primary, rounded-to-pill shapes, and four elemental accents. Every example below is live: it's the actual framework rendering, not a screenshot.

Foundations

Colors

Every color is an HSL triplet custom property, so any consumer can layer opacity with hsl(var(--pf-x) / .4).

Core

background210 50% 8%
card210 45% 11%
primary160 80% 50%
muted210 30% 15%

Elements

fire15 90% 55%
ice200 90% 60%
lightning45 100% 55%
poison280 60% 55%

Semantic & economy

success145 65% 45%
warning40 95% 55%
destructive0 70% 50%
gold45 90% 55%
essence280 80% 65%
Foundations

Typography

Space Grotesk for headings and UI labels, DM Sans for body copy.

h1 / 3xl

Aa Bb Cc 123

h2 / 2xl

Aa Bb Cc 123

h3 / xl

Aa Bb Cc 123

lead

A lead paragraph for section intros.

body

Body copy in DM Sans — legible at small sizes for long-form content.

eyebrowEyebrow label
Foundations

Grid

12-column flexbox grid, Bootstrap-familiar API.

col-md-4
col-md-4
col-md-4
<div class="pf-row pf-gap-3">
  <div class="pf-col-12 pf-col-md-4">...</div>
</div>
Actions

Buttons

Bold uppercase pills. Primary glows on hover; elemental variants carry their own glow color.

<button class="pf-btn pf-btn--primary">Primary</button>

Elemental fills — for game UI, or any accent color need.

Sizes

Actions

Badges & stat pills

Icon + value chips — the dashboard header pattern (💎 essence, 🔥 streak).

💎 34 essence 🔥 Day 1 ⭐ 1,000 
<span class="pf-badge pf-badge--essence">💎 34 essence</span>

Semantic & elemental variants

Success Warning Danger Info Fire Ice
Actions

Tabs

Segmented pill control — filter rows, category switchers.

<div class="pf-tabs">
  <button class="pf-tab is-active">Attack</button>
  <button class="pf-tab">Defense</button>
</div>
Content

Cards

Selectable picker cards — border + corner tag on the active choice.

Selected

⚔ Classic

Standard run. Climb waves, beat bosses every 10.

💀 Survival

3 lives. Pick a buff & a debuff each death.

<div class="pf-card pf-card--selected">
  <div class="pf-card__body">
    <span class="pf-card__tag">Selected</span>
    <h3 class="pf-card__title">Classic</h3>
  </div>
</div>
Content

Alerts

Left-border feedback banners, semantic or elemental.

Heads upSemantic colors sit alongside elemental ones for general use.
Connection lostRetrying — this won't affect your saved progress.
Content

Progress bars

Health, XP, gold, essence — each maps to its own token.

Health

XP

Gold

Forms & nav

Forms

Inputs, selects, textareas, checks, and radios — plus the input-group pattern for inline actions.

Forms & nav

Toggles

Settings switches — Screen Shake, Damage Numbers.

Screen Shake
Damage Numbers
Screen shake on boss kills
Forms & nav

Avatars

Circular initials, with an optional role badge — forum post authors.

F
F
F
Ffish OP