Typography
Standard HTML text elements are styled to match the pixel-art aesthetic.
Regular paragraph text. Strong text. Emphasis text.
This is a link — hover to see the cursor indicator.
This is a blockquote — perfect for in-game dialogue.
Inline code snippets are styled too.
Form Inputs
Text fields, selects, textareas, checkboxes and radio buttons all adopt the pixel-art style.
Tables
Tables are styled with pixel borders to fit the overall aesthetic. Wrap in .table-scroll to enable horizontal scrolling on small screens.
| # | Pokémon | Type | HP |
|---|---|---|---|
| 001 | Bulbasaur | Grass / Poison | 45 |
| 004 | Charmander | Fire | 39 |
| 007 | Squirtle | Water | 44 |
Frames
Frames can be used to clearly indicate sections or menu's.
Buttons
Buttons are recognizable by their text being uppercase. Hover over buttons to see a selection indicator
You can organize buttons like you would see them in Pokémon, either in a list (start-menu) or in a group of 4.
Progress / Health Bar
Like in the game, this progress/health bar changes colour when it's low (by default).
Alerts
Alert boxes convey status messages with colour-coded left-border accents.
Badges
Small inline label chips for statuses, types, or tags.
Normal Grass Fire Poison
Badges sit inline with text — e.g. Bulbasaur Grass Poison
Dialog / Modal
Styled <dialog> element — click the button to open a pixel-art modal.
Layout Grid
A 12-column flex grid. Columns stack on mobile.
Animations
Add utility classes for built-in pixel-art animation effects.
Blinking cursor: End of dialogue
Blinking element: LOW HP
Fade in on load.
Type Badges
Colour-coded chips for all 17 Gen 1 & 2 Pokémon types. Dark and Steel were introduced in Gold/Silver/Crystal.
Normal Fire Water Electric Grass Ice
Fighting Poison Ground Psychic Bug
Rock Ghost Dragon Dark Steel
Tyranitar Rock Dark — a new Gen 2 dual-type combination.
Status Conditions
Inline badges for Pokémon non-volatile status conditions, exactly as shown in Gen 2 battle and summary screens.
PSN Poisoned SLP Asleep BRN Burned
FRZ Frozen PAR Paralyzed FNT Fainted
Battle HUD
Gen 2 introduced the EXP bar in the ally panel. Enemy panels omit HP numbers; ally panels show current/max HP and an EXP bar.
JavaScript Utilities
Optional JS helpers that complement the CSS framework. Import them from pgb.ts.
Typewriter Dialogue
Click the button below to start…
Animated HP Bar
Battle Flash
Utility Classes
Spacing, text alignment, display, color, and sizing helpers.
text-center + bg-primary + p-sm
text-right + text-muted + mt-sm
text-upper + text-danger
text-lg — larger font size
text-sm — smaller font size
badge + mr-sm badgeTooltip
Pixel-art hover tooltips — styled like the item-description pop-ups in Gen 1 & 2. Add data-tooltip="…" to any .tooltip element.
Hover over: Pallet Town, Bulbasaur, Charmander.
GRASS FIRE
Spinner
Pixel-art loading indicator — a stepped rotating L-shape, faithful to the frame-by-frame animations of Gen 1 & 2.
Default: Small: Large:
Primary: Secondary: Danger:
Loading Pokédex data…
Toast Notifications
Temporary pop-up messages — like the "Got ITEM!" notifications in Gen 1 & 2. Click a button to show a toast.
Tabs
Tab navigation — inspired by the multi-page Pokémon summary and PC box screens in Gen 1 & 2.
Bulbasaur — #001 Seed Pokémon. A strange seed was planted on its back at birth.
- Tackle
- Growl
- Vine Whip
- Leech Seed
HP: 45 / ATK: 49 / DEF: 49 / SPD: 45 / SPC: 65
Card
Pokémon portrait cards — like the stat and info panels shown on the party and Pokédex screens.
Bulbasaur
#001 — Seed Pokémon
Grass Poison
Charmander
#004 — Lizard Pokémon
Fire
Squirtle
#007 — Tiny Turtle Pokémon
Water
Stepper
Multi-step progress indicator — like the stages of a new-game setup: choose name, choose starter, receive Pokédex.
- Choose Name
- Choose Starter
- Get Pokédex
- First Gym
- Elite Four
Accordion
Collapsible sections — like the expandable move or item categories in the Gen 1 & 2 bag and move-list screens.
- Tackle
- Growl
- Vine Whip
- Scratch
- Growl
- Ember
- Tackle
- Tail Whip
- Water Gun
Divider
Pixel-art horizontal dividers — like the separator lines between menu sections in Gen 1 & 2. Supports an optional centred label.
Pallet Town · Viridian City · Pewter City
New Bark Town · Cherrygrove City · Violet City
Wild Pokémon may appear in tall grass!
Plain divider (no label).
Breadcrumb
Navigation trail using the ▶ cursor — the same arrow used as a selection indicator throughout Gen 1 & 2.
Toggle
Pixel-art ON / OFF toggle — faithful to the Gen 1 Options screen where settings like BATTLE ANIMATION and TEXT SPEED show their state as an inverted block. State changes instantly, just like the game.
Chips
Compact interactive labels — like the move-type tags shown in the Pokédex. Three flavours: filter (toggleable), input (dismissible), and suggestion (one-shot action).
Filter chips (click to toggle):
Colour variants:
Input chips (dismissible):
Suggestion chips:
Slider
Pixel-art range input — like the volume / brightness controls on the Gen 1 Options screen: a hard-edged track with a blocky square thumb.
Segmented Button
A row of related toggle buttons — like the text-speed selector (FAST / MED / SLOW) on the Gen 1 Options screen.
Single-select (text speed):
Primary variant (battle style):
Danger variant:
Floating Action Button (FAB)
The primary on-screen shortcut — always prominent and ready to tap, like the SELECT-button item shortcut in Gen 2.
Sizes:
Extended (icon + label):
Colour variants:
List
Structured list rows — like the item browser in the Bag, the Pokédex entry list, or the PC Box. Supports optional leading icons, a title & subtitle, and a trailing element.
-
Bulbasaur
#001 — Seed Pokémon
Lv.5
-
Charmander
#004 — Lizard Pokémon
Lv.5
-
Squirtle
#007 — Tiny Turtle Pokémon
Fnt
- Poké Ball ×5 Bag · Poké Balls
Navigation Bar
Bottom navigation bar — like the quick-action tray that anchors to the bottom of the screen in later Pokémon titles. Each item shows an icon and a short label.
Navigation Rail
Vertical side navigation — like the location sidebar on the Pokégear map screen in Gen 2. Collapses to a horizontal bar on small screens.
Main content area
App Bar
Top application bar — like the area name header (PALLET TOWN) shown at the top of the screen when entering a new location. Supports a back button, title, and action buttons.
Pokégear *(Gen 2)*
The Pokégear device from Gold/Silver/Crystal — a handheld gadget with MAP, PHONE, and RADIO apps.
NEW BARK TOWN
→ Route 29
Trainer Phone Call *(Gen 2)*
Trainer phone calls introduced in Gen 2 — registered trainers can call for rematches or tips.
My Rattata is in the top percentage of all Rattata!
Bottom Sheet
A panel that slides up from the bottom of the screen — like the in-game context menu or options panel. Add position: fixed; bottom: 0; left: 0; right: 0; to pin it to the viewport. Dismiss by adding .bottom-sheet-hide.
Time-of-Day Badge *(Gen 2)*
Gen 2 introduced a real-time clock with three time periods affecting wild Pokémon and events.
DAY 06:00–17:59 EVE 18:00–19:59 NIGHT 20:00–05:59
Eevee evolves into Espeon during DAY and Umbreon during NIGHT.
Gym Badge Case *(Gen 2)*
The badge case screen from Gold/Silver/Crystal showing your collected Johto gym badges.
Move Card *(Gen 2)*
Individual move detail card showing name, type, PP, power, and accuracy — as seen in the Gen 2 move and Pokédex screens.
PC Box *(Gen 2)*
PC Pokémon storage box with named boxes and a 5×4 slot grid — redesigned in Gold/Silver/Crystal.
Pokédex Entry *(Gen 2)*
Pokédex entry panel showing dex number, name, species, height, weight, and flavor text — updated with color in Gen 2.
Friendship *(Gen 2)*
Friendship / happiness meter introduced in Gen 2 — hearts represent how much a Pokémon trusts its trainer.
Maximum friendship: ♥ ♥ ♥ ♥ ♥
Medium friendship: ♥ ♥ ♥ ♥ ♥
Low friendship: ♥ ♥ ♥ ♥ ♥
Eevee needs high friendship to evolve into Espeon or Umbreon.
Held Item *(Gen 2)*
Held item slot — a Gen 2 exclusive allowing each Pokémon to carry one item shown in the party and summary screens.
Summary Screen *(Gen 2)*
The Pokémon summary panel showing name, level, types, base stats as progress bars, and OT info — as seen in the Gen 2 party screen.
Live Pokémon Lookup
Fetch any Gen 1 & 2 Pokémon live from PokéAPI and display its sprite, types, and base stats using framework components.
