Plasm

Overview

A comprehensive design system and full-screen UI kit for a modern reimagining of Agar.io, the classic multiplayer browser game. The project bridges game identity with a polished web application experience, built with shadcn/ui component architecture in mind for seamless developer handoff.

Design System

Established a cohesive brand style guide anchored by a dark-first color palette with full light theme support. The system includes semantic design tokens mapped directly to shadcn/ui CSS variables (background, foreground, card, primary, secondary, muted, destructive, border, input, ring), a curated game cell color palette, and a typographic scale pairing Space Grotesk for headings, Inter for body/UI, and IBM Plex Mono for data.

Screens & Flows

• Login Page — Split-panel layout featuring an animated petri dish visualization alongside magic link authentication and guest play, with account perks highlighting social and cosmetic features. Designed in both dark and light themes.

• Dashboard — Post-login home with sidebar navigation, at-a-glance stat cards (coins, games played, highest score), recent match history with placement badges, and a friends panel showing online/offline status with join and invite actions.

• Skins Inventory — Grid-based skin browser with tabbed filtering (Inventory/Storefront), color-coded cell previews using radial gradients, equipped state indicators, and coin-based pricing for store items.

• Purchase Confirmation Modal — Contextual dialog displaying the skin preview, price, and current coin balance with cancel/confirm actions.

Game UI Components

Built a library of reusable in-game overlay components designed for the gameplay view:

• Leaderboard — Semi-transparent overlay displaying the top 10 players ranked by score, with color-coded cell dots, moderator badges (shield-check icon in cyan), and zero-padded rank formatting.

• Chat Window — Room-wide messaging panel with player-colored usernames, moderator badges, and a message input bar with send action. Includes an expanded and collapsed state with an unread message badge.

• Toast Notifications — Sonner-style toast for account errors and system notifications.

• Back Button — Minimal navigation control for returning from game view.

• Virus — Game entity component featuring a semi-transparent green gradient circle with symmetrical soft spikes, faithful to the original Agar.io visual language.

Key Decisions

• Dark-first, light-ready: Every screen was designed in dark theme first to honor the game's identity, then systematically converted to light using bulk property replacement for consistency.

• Token-driven design: All colors, radii, and spacing reference shared variables, enabling theme-wide changes from a single source of truth.

• Component architecture: 8 reusable components mirror the atomic design approach expected in a shadcn/ui codebase, reducing duplication and ensuring consistency across screens.