Visual Identity

Playupi’s visual identity is built for a gaming-first audience: bold, energetic, and modern. The aesthetic draws from gaming culture without being childish — clean dark surfaces, vibrant accent colors, and snappy interactions.

Mood: electric bold energetic modern gaming clean confident fun

---

Logo

The Playupi logo is a text-only wordmark: the word “Playupi” styled in the brand font and colors.

Property	Value
Text	Playupi
Font	Inter ExtraBold (800)
Color (dark bg)	White #F4F4F5
Color (light bg)	Dark #18181B
Accent	The “P” or dot can optionally use Electric Violet #7C3AED for brand emphasis
Size (header)	24px
Size (footer)	16px
Favicon	”P” in Electric Violet on transparent background, 32x32 and 16x16

The wordmark is used in the header, footer, and OG images. No separate icon/symbol exists — the text is the brand.

---

Color Palette

Primary Colors

Name	Hex	Usage
Electric Violet	#7C3AED	Primary brand, headers, active states, CTAs
Violet Light	#A78BFA	Hover states, secondary buttons, highlights
Violet Dark	#5B21B6	Pressed states, deep accents
Violet Surface	rgba(124, 58, 237, 0.1)	Subtle tinted backgrounds

Accent Colors

Name	Hex	Usage
Hot Coral	#FF6B6B	Trending badge, dislike, alerts
Neon Lime	#84CC16	Success, like, positive states
Electric Cyan	#22D3EE	Links, info, exploration badge
Amber	#F59E0B	New badge, warnings

Backgrounds (Dark Theme)

Name	Hex	Usage
Base	#0A0A0F	Page background
Surface 1	#13131A	Cards, sidebar
Surface 2	#1C1C27	Inputs, elevated cards
Surface 3	#262633	Hover states, dropdowns
Border	rgba(255, 255, 255, 0.08)	Card borders, dividers
Border Hover	rgba(255, 255, 255, 0.15)	Hover borders

Text (Dark Theme)

Name	Hex	Usage
Primary	#F4F4F5	Headings, game titles
Secondary	#A1A1AA	Body text, descriptions
Muted	#71717A	Labels, metadata, timestamps
On Accent	#FFFFFF	Text on colored backgrounds

---

Light Theme

The platform supports a light theme with the same brand identity but inverted surface hierarchy.

Backgrounds (Light Theme)

Name	Hex	Usage
Base	#F8F8FC	Page background
Surface 1	#FFFFFF	Cards, sidebar
Surface 2	#F1F1F6	Inputs, elevated cards
Surface 3	#E8E8F0	Hover states, dropdowns
Border	rgba(0, 0, 0, 0.08)	Card borders, dividers
Border Hover	rgba(0, 0, 0, 0.15)	Hover borders

Accent Colors (Light Theme)

Light theme accents are slightly darker for readability against light backgrounds:

Name	Hex	Usage
Hot Coral	#EF4444	Trending badge, dislike, alerts
Neon Lime	#16A34A	Success, like, positive states
Electric Cyan	#0891B2	Links, info, exploration badge
Amber	#D97706	New badge, warnings

Text (Light Theme)

Name	Hex	Usage
Primary	#18181B	Headings, game titles
Secondary	#52525B	Body text, descriptions
Muted	#A1A1AA	Labels, metadata, timestamps
On Accent	#FFFFFF	Text on colored backgrounds

Light Theme Differences

Property	Dark	Light
Shadows	Heavier (higher opacity)	Lighter (lower opacity)
Glow effects	Visible (0.3 opacity)	Subtle (0.1 opacity)
Gradient shine	rgba(255,255,255,0.05)	rgba(255,255,255,0.8)
Modal bg	rgba(19, 19, 26, 0.85)	rgba(255, 255, 255, 0.9)
Overlay	rgba(0, 0, 0, 0.6)	rgba(0, 0, 0, 0.3)

See Theme Preview for a live comparison. See the themes/ folder in the theme preview for the CSS variable definitions.

Gradients

/* Primary brand gradient — buttons, hero elements */
--gradient-brand: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);

/* Glow effect behind featured cards */
--gradient-glow: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.3) 0%, transparent 70%);

/* Subtle card shine on hover */
--gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);

/* Category header gradients (per-category theming) */
--gradient-action: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
--gradient-puzzle: linear-gradient(135deg, #2563EB 0%, #22D3EE 100%);
--gradient-racing: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);

---

Typography

Font Stack

Type	Font	Fallback	Notes
Display	Inter	system-ui, sans-serif	Headings, game titles, navigation
Body	Inter	system-ui, sans-serif	All body text, descriptions
Mono	JetBrains Mono	monospace	Code, metrics, counters

Inter is chosen for its wide language support, excellent readability at all sizes, and free availability via Google Fonts. A more distinctive display font (e.g., Space Grotesk, Outfit, or Satoshi) can be explored later for branding differentiation.

Scale

Level	Size	Weight	Line Height	Usage
Display	32px / 2rem	800 (ExtraBold)	1.2	Hero section, page titles
H1	24px / 1.5rem	700 (Bold)	1.3	Section headers
H2	20px / 1.25rem	600 (SemiBold)	1.3	Card group titles
H3	16px / 1rem	600 (SemiBold)	1.4	Sub-sections
Body	14px / 0.875rem	400 (Regular)	1.6	Descriptions, instructions
Small	12px / 0.75rem	500 (Medium)	1.4	Labels, metadata, badges
Micro	10px / 0.625rem	600 (SemiBold)	1.2	Tag icons, counters

Style Rules

• Game titles: Bold, white, single-line with text-overflow ellipsis
• Author names: Medium, muted color, clickable with underline on hover
• Category labels: SemiBold, uppercase, letter-spacing 0.05em
• Metric values: Mono font, tabular-nums for alignment

---

Shape Language

Border Radius

Element	Radius	CSS Variable
Game cards	12px	--radius-card
Buttons	8px	--radius-button
Inputs	8px	--radius-input
Badges / tags	6px	--radius-badge
Modal / dialog	16px	--radius-modal
Sidebar icons	10px	--radius-sidebar
Full pill	9999px	--radius-pill

Spacing Scale

Based on a 4px grid:

Token	Value	Usage
xs	4px	Inline spacing, badge padding
sm	8px	Card inner padding (tight)
md	12px	Default gap between elements
lg	16px	Card padding, section gaps
xl	24px	Section separation
2xl	32px	Page-level padding
3xl	48px	Major section breaks

---

Visual Effects

Card Hover

Game cards are the primary interactive element. Their hover state should feel alive:

.game-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: all 0.2s ease-out;
}

.game-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(124, 58, 237, 0.2);
}

Glow Effects

Featured or trending games get a subtle glow:

.game-card--featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-card);
  background: var(--gradient-brand);
  z-index: -1;
  opacity: 0.4;
  filter: blur(8px);
}

Glassmorphism (Modals, Overlays)

.modal {
  background: rgba(19, 19, 26, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Shadows

--shadow-card:     0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-modal:    0 24px 48px rgba(0, 0, 0, 0.6);
--shadow-glow:     0 0 20px rgba(124, 58, 237, 0.3);

---

Animations

Timing & Easing

--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* snappy deceleration */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);       /* standard */

--duration-fast:   150ms;  /* hover, active states */
--duration-normal: 200ms;  /* transitions, reveals */
--duration-slow:   300ms;  /* modals, page transitions */

Interaction Feedback

Interaction	Transform	Duration	Easing
Card hover	translateY(-4px)	200ms	ease-out
Card active	scale(0.98)	100ms	ease-out
Button hover	translateY(-1px)	150ms	ease-out
Button active	scale(0.97)	100ms	ease-out
Sidebar expand	width: 64px → 220px	200ms	ease-out
Title fade-in (card hover)	opacity: 0 → 1, translateY(4px → 0)	200ms	ease-out
Badge pulse (new game)	scale(1 → 1.1 → 1)	2s loop	ease-smooth

Page Transitions

/* Card grid stagger reveal */
.game-card:nth-child(n) {
  animation: fadeInUp 300ms var(--ease-out) both;
  animation-delay: calc(n * 30ms); /* cap at ~15 items */
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

---

Badge / Tag Design

Tags appear as small icons in the top-left corner of game cards.

Tag	Color	Icon	Background
New	Amber #F59E0B	Sparkle / star	rgba(245, 158, 11, 0.15)
Trendy	Coral #FF6B6B	Flame / trending arrow	rgba(255, 107, 107, 0.15)
Updated	Cyan #22D3EE	Refresh arrow	rgba(34, 211, 238, 0.15)

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 6px;
  border-radius: var(--radius-badge);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}

---

Like / Dislike

State	Icon	Color
Default	Outline thumb up / thumb down	Muted #71717A
Liked	Filled thumb up	Neon Lime #84CC16
Disliked	Filled thumb down	Hot Coral #FF6B6B

Transition: 200ms scale bounce with --ease-spring easing.

---

Iconography

• Style: Outlined, 1.5px stroke, rounded caps
• Library: Lucide Icons (free, consistent, tree-shakeable)
• Size: 20px default, 16px compact, 24px headers
• Color: Inherits from text color (currentColor)

---

Responsive Surfaces

Breakpoint	Name	Behavior
< 640px	Mobile	Dark base, full-bleed cards, no glow effects (performance)
640-1024px	Tablet	Reduced shadow intensity, simplified hover states
> 1024px	Desktop	Full effects: glow, glassmorphism, hover transforms

Reduce motion: all animations respect prefers-reduced-motion: reduce.

---

Accessibility

Rule	Spec
Text contrast	WCAG AA minimum (4.5:1 for body, 3:1 for large text)
Interactive targets	44px minimum tap area on mobile
Focus indicator	2px solid #A78BFA with 2px offset
Color alone	Never the only indicator — always paired with icon or text
Motion	prefers-reduced-motion disables all non-essential animation