Kingstore

Overview

Kingstore is a high-energy gaming top-up and voucher marketplace designed for Indonesian gamers seeking instant, affordable, and reliable in-game currency purchases. The brand embodies a "Neon-Gaming Maximalism" aesthetic—a collision of deep navy (#0f044c) digital voids with explosive orange (#ff9800) accents that evoke arcade cabinets, streaming culture, and the thrill of instant gratification. The UI celebrates visual intensity: bold typography in Manrope at 700 weight, geometric dot patterns overlaid on hero imagery, and high-contrast layering create a sense of urgency and playfulness. The emotional response is one of confidence and accessibility—users feel they've entered a trustworthy, cutting-edge gaming hub, not a corporate storefront.

The brand voice is casual, direct, and celebratory. Kingstore speaks in the language of gamers: "Open 24 jam non stop," "Proses instan, murah aman & terpercaya" (instant, cheap, safe & trusted). Vocabulary skews toward action and immediacy—"top up," "proses," "terpercaya"—avoiding corporate jargon. Tone is energetic but never condescending; it assumes the user knows what they want and respects their time. Example sentence in brand voice: "Butuh bantuan? Kami siap 24/7 untuk topup game favorit kamu."

Colors

The Kingstore color system is built on a **deep-void-to-neon** gradient model. The primary surface (#0f044c) is a near-black navy that serves as the digital canvas—it's dark enough to make the primary accent pop without inducing eye strain during extended browsing. Primary (#ff9800, a vivid orange-amber) is the brand's signature accent, deployed on all CTAs ("Login," "Join Member"), search buttons, and interactive highlights. This orange is not a muted tone; it's deliberately saturated at 100% saturation and 50% lightness in HSL, ensuring it commands attention against the navy backdrop. Secondary (#7066e0, a soft indigo) supports the primary as a secondary CTA color and appears in modal headers and accent elements, creating a complementary purple-orange tension that feels contemporary and

Typography

The typography system is anchored in Manrope, a geometric sans-serif that conveys modernity and approachability. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; headline-lg (40px, 700 weight) dominates section titles and major CTAs; headline-md (28px, 700 weight) breaks up content zones. Body text uses 16–18px at 400 weight with 24–28px line-height, ensuring readability on mobile and desktop. Labels and badges use 12–14px at 500–600 weight with tight letter-spacing (0.01–0.05em) to feel crisp and actionable. The weight hierarchy is aggressive: 700 for headlines, 600 for interactive labels, 400 for body. This creates visual rhythm and guides the eye toward calls-to-action. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.

Layout

Kingstore uses a 12-column fluid grid with a fixed max-width of 1080px on desktop (enforced via @media (min-width: 1400px)). The layout philosophy is **content-first density**: sections are separated by lg spacing (40px) to create breathing room, but internal elements use md (24px) and sm (12px) to pack information efficiently. The hero banner occupies full-width with min-height: 200px and a radial-gradient overlay (rgba(255, 255, 255, 50%) to transparent) layered over a geometric SVG pattern, creating visual depth without sacrificing readability. The search bar (nav-search) has min-width: 320px on desktop, collapsing to 100px on mobile (max-width: 600px) with padding-top: 16px for touch-friendly spacing. Content sections (e.g., "🔥 POPULER") use gutter (24px) for left/right margins, with

Elevation & Depth

Elevation in Kingstore is achieved through a **layered-card model** rather than traditional shadows. Level 1 (Base) is the surface (#0f044c) with no shadow. Level 2 (Standard Card) uses surface-container (#141e61) with a 1px border at surface-container-high (#2d3a8f) and box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2), creating a subtle lift. Level 3 (Elevated/Hover) escalates to surface-container-high (#2d3a8f) with the same shadow, signaling interactivity. Interactive elements (buttons, chips) use no shadow at rest but gain the Level 2 shadow on hover, creating a tactile feedback loop. The

Shapes

The shape philosophy is **"Geometric Precision with Soft Edges"**—a balance between sharp, technical corners and approachable roundness. Buttons use border-radius: 0.375rem (6px) for a slightly rounded, modern feel that's not overly soft. Cards and containers use 0.75rem (12px) for a more pronounced roundness that feels welcoming. Input fields use the DEFAULT radius (0.375rem) to align with buttons, creating visual cohesion in forms. Badges and chips use full (9999px) for a pill shape, signaling that they're discrete, selectable units. The hero banner and major sections use 0px (sharp corners)

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#ff9800), textColor: {colors.on-primary} (#ffffff), typography: {typography.label-md} (14px, 600 weight), rounded: {rounded.md} (6px), padding: 6px 12px, and height: 40px. On hover, button-primary-hover shifts to backgroundColor: {colors.primary-fixed-dim} (#ff9800 at reduced opacity or a darker orange variant), maintaining textColor: {colors.on-primary}. The button-secondary uses backgroundColor: {colors.secondary} (#7066e0), rounded: {rounded.full} (pill shape), padding: 8px 24px, and height: 40px, signaling a secondary action. Buttons never use box-shadow at rest; on hover, they gain the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and a 0.2s ea