TopUpGim

Overview

TopUpGim is Indonesia's leading instant game top-up platform, serving millions of casual and competitive gamers across 500+ titles including Mobile Legends, Free Fire, ROBLOX, and Honor of Kings. The design system embodies a "Transactional Clarity" aesthetic—combining the energy and vibrancy of gaming culture with the trust and efficiency demanded by financial transactions. The visual language prioritizes speed and confidence: a bold cobalt blue (#0665d0) anchors all interactive moments (CTAs, links, focus states), while a serene lavender background (#edf0f7) reduces cognitive load during high-stakes purchases. The UI feels simultaneously playful and professional, never frivolous.

Brand voice is direct, reassuring, and locally resonant. TopUpGim speaks Indonesian fluently—not just in language, but in cultural understanding: payment methods reflect local preferences (e-wallets, pulsa), pricing is transparent (no hidden fees), and copy celebrates the user's gaming identity without condescension. Example: "Top Up yang pasti-pasti aja di TopUpGim.com" (Top-ups that definitely work at TopUpGim.com)—colloquial, confident, memorable. The tone avoids corporate jargon; instead, it uses active verbs and concrete outcomes: "Masuk" (Log in), "Pesanan" (Orders), "Rp0 Cashback" (Rp0 Cashback).

Colors

The color system is anchored by a single, decisive primary accent: cobalt blue (#0665d0). This is the brand's signature—it appears on every CTA button, active links, focus rings, and status indicators. The primary is chosen for its psychological association with trust and action; in the context of financial transactions, it signals safety without coldness. On-primary is pure white (#ffffff), ensuring 21:1 contrast and legibility even at 12px label sizes.

The surface stack is built on a light, cool lavender (#edf0f7) that serves as the page background. This is not white—white would feel sterile and clinical. Instead, the lavender (#edf0f7) is a gentle, almost imperceptible tint that reduces eye strain during long browsing sessions and subtly reinforces the gaming context (lavender is often

Typography

The type system uses Inter exclusively, a geometric sans-serif optimized for screen legibility and gaming contexts. Inter's tight spacing and consistent x-height ensure readability at small sizes (12px labels on badges and micro-interactions) while maintaining elegance at display scales (60px headlines). The system defines eight levels: display (60px, 700 weight, -0.04em tracking) for hero sections; headline-lg (40px, 600 weight) for page titles; headline-md (28px, 600 weight) for section breaks; title-lg (20px, 600 weight) for card headers; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard UI text; label-md (14px, 600 weight) for buttons and form labels; and label-sm (12px, 500 weight) for badges and micro-copy. Line-height is set conservatively (1.

Layout

The layout uses a 12-column grid with a fixed max-width of 1200px, centered on desktop and full-width on mobile (< 768px). This constraint prevents the interface from becoming unwieldy on ultra-wide screens while maintaining flexibility for responsive design. The gutter (spacing between columns) is 24px on desktop, 16px on tablet, and 12px on mobile—proportional to available space. Container max-width is 1200px, matching Bootstrap's lg breakpoint for consistency with the underlying framework. White-space is used strategically: section separation uses lg spacing (40px), card padding uses md spacing (24px), and internal component padding uses sm spacing (12px). This creates a clear visual rhythm—users can scan the page in layers without feeling cramped. The spacing scale (xs: 4px, sm: 12px,

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color gradients or borders. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Shadows are soft and diffuse, never sharp—they suggest depth without drawing attention. The lavender background (#edf0f7) is light enough that even subtle shadows (sm level) are visible, creating a clear visual separation between interactive

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the balance between gaming energy (which favors playful curves) and transactional clarity (which favors geometric precision). The rounded scale uses six stops: sm (4px) for small UI elements like badges and micro-buttons; DEFAULT (8px) for standard buttons and input fields; md (12px) for cards and larger containers; lg (16px) for modals and elevated surfaces; xl (24px) for hero sections and full-width containers; and full (9999px) for pills and avatar containers. Buttons use sm (4px) radius, creatin

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses cobalt blue (#0665d0) background, white text, 14px Inter 600 weight, 8px 24px padding, 40px height, and 4px border-radius. On hover, the background darkens to #0552a8 with a 200ms ease-in-out transition—no shadow is added, as the color shift is sufficient feedback. On active/pressed, the background darkens further to #003d7a. Button-secondary is transparent with a 1px cobalt border, white text, and the same padding/height; on hover, it fills with primary-container (#d4e4f7) while maintaining the border. This creates a clear visual hierarchy: primary buttons are for high-confidence actions ("Masuk", "Top Up Sekarang"), while secondary buttons are for exploratory or lower-stakes actions ("Lihat

Do's and Don'ts

**Do**

• Do use primary blue (#0665d0) exclusively for CTAs, active states, and focus rings—it's the brand's signature and must remain distinctive.
• Do maintain at least 24px padding inside cards and 12px padding inside buttons—generous internal spacing reduces cognitive load and improves touch targets on mobile.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active)—this creates a sense of responsiveness without feeling sluggish.
• Do use the lavender background (#edf0f7) consistently across all pages—it's a subtle but powerful brand signal that reduces eye strain.
• Do combine shadows with color shifts for interactive feedback—never rely on shadow alone, as it can be imperceptible on some displays.

**Don't**

• Don't use primary blue for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states to maintain visual clarity.
• Don't exceed 1.5rem (24px) border-radius on any component—larger radii would feel cartoonish and undermine the transactional credibility of the platform.
• Don't add borders to cards or elevated surfaces—use shadows alone to define boundaries; borders create visual noise and compete with content.
• Don't use more than three font weights (400, 600, 700) in a single view—excessive weight variation creates visual chaos and makes hierarchy unclear.
• Don't apply shadows to interactive elements on hover without also changing the background color—users may not perceive shadow changes on lower-quality displays.