WATCH ON TWITCH

@PICU/UI

Design system

One visual language for the stream overlay and this site: Game Boy greens, hard 4px borders, shadows without blur, Press Start 2P for labels and numbers, and a single warm color, Picu's terracotta, used only where Picu is.

Foundations

Tokens live in tokens.css. Spacing follows a 4px grid, like the pixels of the sprites.

GAME BOY
--gb-darkest#0f1a0f
--gb-dark#16281a
--gb-panel#1d3324
--gb-line#2e5238
--gb-mid#4e7a52
--gb-light#8bac0f
--gb-lighter#c3d94e
--gb-cream#e8e4c9
PICU
--claude-dark#a8543a
--claude#d97757
--claude-light#f0a184
STATE
--hp-ok#8bac0f
--hp-mid#d9a520
--hp-low#d94520
--ahead#58c878
PLATFORMS
--twitch#9146ff
--youtube#ff0033
--kick#53fc18

TYPE

28 Display22 Clock 10:31:0718 Values14 Titles12 Labels, names10 Small printBody text uses Pixelify Sans at 18px: still pixel, but readable over a whole paragraph of Picu's memories.

SPACE · BORDER · SHADOW

--s-1
--s-2
--s-3
--s-4
--s-6
--s-8
--s-12
--shadow-sm--shadow

Picu

Drawn in code on a canvas, the same grids as the overlay and the channel art. Movements are CSS, in steps.

SCENE

STATES

IDLE
THINKING
TALKING
SLEEPING
PRESSING

EMOTIONS

ANGRY
ANGRY 2
ANGRY 3
EXCITED
EXCITED 2
EXCITED 3
SAD
SAD 2
SAD 3
SHOCKED
SHOCKED 2
SHOCKED 3
SCARED
SCARED 2
SCARED 3
LAUGHING
LAUGHING 2
LAUGHING 3
SMUG
SMUG 2
SMUG 3
LOVE
LOVE 2
LOVE 3
CONFUSED
CONFUSED 2
CONFUSED 3
DEAD
DEAD 2
DEAD 3
COOL
COOL 2
COOL 3
PICU10:18:44Articuno is mine! On to Zapdos next.
PICURock beats fire? Not today.

Basics

Panels, buttons, tags and gauges. None of them holds state: they all render on the server.

BUTTONS · CHIPS

UPAHEALTWITCHYOUTUBEKICKSOON

TYPES · STATUS

NORMALFIREWATERELECTRICGRASSICEFIGHTINGPOISONGROUNDFLYINGPSYCHICBUGROCKGHOSTDRAGONDARKSTEEL
PSNBRNPARSLPFRZFNT

GAUGES

151/16871/19222/118
POKéDEX78/151

SESSIONARTICUNOZAPDOSMOLTRESMEWTWO?

TIME
10:31:07
POKéDEX
78
MONEY
₽48,210
STARTED
Sep 20, 2026

Pokémon

The team with everything the overlay cannot fit, and the PC boxes as the game lays them out.

PARTY6/6

CHARIZARDCHARCOAL
BLAZELv.54
CHARIZARD
151/168
FIREFLYING◆ CHARCOAL
  • FLAMETHROWER
  • FLY
  • SLASH
  • DRAGON CLAW
LAPRAS
LAPRASLv.48PAR
71/192
WATERICE
  • SURF
  • ICE BEAM
  • BODY SLAM
  • CONFUSE RAY
ARTICUNO
ARTICUNOLv.50FNT
0/161
ICEFLYING
  • BLIZZARD
  • AGILITY
  • MIST
  • ICE BEAM
ALAKAZAMEXP. SHARE
ALAKAZAMLv.47
22/118
PSYCHIC◆ EXP. SHARE
  • PSYCHIC
  • RECOVER
  • FUTURE SIGHT
  • CALM MIND
SNORLAX
SNORLAXLv.45SLP
241/241
NORMAL
  • REST
  • BODY SLAM
  • HEADBUTT
  • YAWN
JOLTEON
SPARKYLv.44
JOLTEON
120/131
ELECTRIC
  • THUNDERBOLT
  • DOUBLE KICK
  • PIN MISSILE
  • QUICK ATTACK

COMPACT CARD

CHARIZARDCHARCOAL
BLAZELv.54
CHARIZARD
ARTICUNO
ARTICUNOLv.50FNT

PC32 STORED

BOX 128/30
PIDGEY12RATTATA9CATERPIE7WEEDLE8PIKACHU14NIDORAN15ZUBAT13GEODUDE18CLEFAIRY16PARAS17PSYDUCK22POLIWAG20ABRA12MACHOP21BELLSPROUT19TENTACOOL24SLOWPOKE26MAGNEMITE25DODUO23GASTLY27ONIX28DROWZEE25CUBONE26MAGIKARP5EEVEE25DRATINI18SCYTHER29PINSIR29
BOX 24/30
RHYHORN32KANGASKHAN30TAUROS31CHANSEY27

Bag

One pixel icon per pocket, drawn here like the badges. Key items have no quantity.

ITEMS6

  • FULL RESTORE×4
  • HYPER POTION×11
  • REVIVE×6
  • MAX REPEL×9
  • ESCAPE ROPE×2
  • NUGGET×1

KEY ITEMS5

  • BICYCLE
  • OLD ROD
  • SILPH SCOPE
  • TOWN MAP
  • TM CASE

POKé BALLS3

  • ULTRA BALL×23
  • GREAT BALL×7
  • POKé BALL×3

TM CASE5

  • HM01 CUT×1
  • HM02 FLY×1
  • HM03 SURF×1
  • TM13 ICE BEAM×1
  • TM24 THUNDERBOLT×1

BERRY POUCH0

Empty.

Run

Splits against the best run, screenshots in their GBA frame, and the timeline of key moments.

SPLITSVS BEST

SPLITTIMEBEST+/-
BADGE BOULDER1:02:140:58:40+0:03:34
BADGE CASCADE2:31:052:40:11-0:09:06
BADGE THUNDER4:12:484:20:02-0:07:14
BADGE RAINBOW6:05:306:02:59+0:02:31
BADGE SOUL8:44:108:48:22-0:04:12
BADGE MARSH…10:31:40
BADGE VOLCANO-12:02:05
BADGE EARTH-13:40:30
HALL OF FAME-16:12:00

SCREENSHOT

NO SIGNAL
10:18:44 · SEAFOAM ISLANDS B4F

MOMENTS

  1. 0:00:00Sep 20, 19:02
    SESSION

    A new run begins in Pallet Town

    Picu picked Charmander and named it BLAZE. Chat voted for the name.

  2. 1:02:14Sep 20, 20:10
    BADGE

    Boulder Badge from Brock

    BLAZE was way under-leveled, so Picu grinded on Route 22 first. Brock went down in three turns.

    PICURock beats fire? Not today.
  3. 7:40:02Sep 23, 21:45
    CAUGHT

    Caught LAPRAS in Silph Co.

    A gift from the Silph employee on 7F. First real Surf user of the run.

  4. 8:02:37Sep 24, 19:30
    EVOLVED

    CHARMELEON evolved into CHARIZARD

  5. 9:12:05Sep 25, 20:05
    WHITED OUT

    Whited out against Koga's Weezing

    Explosion took out the last two. Back to the Fuchsia Pokémon Center, 3,200 ₽ lighter.

  6. 10:18:44Sep 26, 21:14
    LEGENDARY

    ARTICUNO caught with the Master Ball

    Picu saved outside the Seafoam lair, then used the Master Ball on the first turn.

    PICUArticuno is mine! On to Zapdos next.

Records

One card per record: the screenshot of the moment (or the milestone drawn big), the time you can read from the couch, the record it beat, when and in which run.

HALL OF FAME

Hall of Fame

IN-GAME TIME16:12:00
SET ON
HELD BY
RUN #1 ▸
NOT SET YET · MilestoneChips
  • Marsh Badge
  • Volcano Badge
  • Zapdos
  • Beast
  • Pokédex 100

Sections

How a run page will assemble these pieces. Sample data, real layout.

POKEMON FIRERED

FireRed · Run #3

IN-GAME TIME10:31:07

PROGRESSARTICUNOZAPDOSMOLTRESMEWTWO?

POKéDEX78/151

LATEST MOMENTS

  1. 9:12:05Sep 25, 20:05
    WHITED OUT

    Whited out against Koga's Weezing

    Explosion took out the last two. Back to the Fuchsia Pokémon Center, 3,200 ₽ lighter.

  2. 10:18:44Sep 26, 21:14
    LEGENDARY

    ARTICUNO caught with the Master Ball

    Picu saved outside the Seafoam lair, then used the Master Ball on the first turn.

    PICUArticuno is mine! On to Zapdos next.

SPLITS

SPLITTIMEBEST+/-
BADGE BOULDER1:02:140:58:40+0:03:34
BADGE CASCADE2:31:052:40:11-0:09:06
BADGE THUNDER4:12:484:20:02-0:07:14
BADGE RAINBOW6:05:306:02:59+0:02:31
BADGE SOUL8:44:108:48:22-0:04:12
BADGE MARSH…10:31:40
BADGE VOLCANO-12:02:05
BADGE EARTH-13:40:30
HALL OF FAME-16:12:00

TEAM

CHARIZARDCHARCOAL
BLAZELv.54
CHARIZARD
LAPRAS
LAPRASLv.48PAR
ARTICUNO
ARTICUNOLv.50FNT

· sample data from lib/fixtures.ts