Codashop Indonesia

Overview

Codashop Indonesia is a high-velocity digital goods marketplace designed for the gaming-first demographic across Southeast Asia. The brand embodies a 'Neon-Maximalist' aesthetic—a collision of deep purples (#0a0a0a backgrounds), electric primary violets (#6242fc), and high-saturation accent yellows (#e8f953) that evoke the energy of esports arenas and arcade culture. The UI prioritizes instant gratification: no registration, no friction, credits delivered in milliseconds. The emotional response is exhilaration tempered by trust—the dark canvas grounds the chaos, while the consistent purple accent signals reliability and brand recognition across millions of transactions.

Voice: Direct, energetic, and culturally fluent. Codashop speaks in the language of gamers—urgent, playful, never corporate. Vocabulary leans into action verbs ("Top up sekarang," "Diskon langsung") and social proof ("jutaan gamers"). The tone is confident without arrogance, celebratory without condescension. Example sentence: "Setiap detik, ribuan pemain mendapatkan kredit mereka—tanpa tunggu, tanpa ribet, langsung main."

Colors

The color system is built on a dark-first philosophy optimized for mobile gaming audiences and late-night play sessions. **Primary (#6242fc)** is the signature brand violet—used exclusively on CTAs, navigation highlights, focus states, and interactive affordances. It commands attention without aggression, appearing on the 'Daftar' button, hero CTAs, and link underlines. **Secondary (#e8f953)** is a high-saturation yellow reserved for promotional badges, discount labels, and call-outs ('TOP UP SEKARANG'). This pairing creates maximum contrast: 98.2% WCAG AA on dark surfaces. **Tertiary (#ff7f98)** and **Tertiary-container (#ffa24b)** provide warm accent support for status indicators, limited-time offers, and secondary promotional elements. **Surface stack**: The page background is pure blac

Typography

The type system pairs a display-weight serif-influenced typeface (OTT) for headlines with a humanist sans-serif (Inter) for body copy, creating visual hierarchy through weight and scale rather than color alone. **OTT** (32px–60px, 600–700 weight) is reserved for page titles, section headers, and hero copy—its geometric letterforms convey modernity and gaming culture. **Inter** (12px–18px, 400–600 weight) handles all body text, labels, and microcopy, ensuring legibility at small sizes on mobile devices. Letter-spacing is tightened on display sizes (-0.04em) to create visual density and energy, while body copy uses standard spacing (0px) for readability. Line-height is set to 110–130% on headlines (tight, punchy) and 150% on body text (generous, scannable). On small labels over busy game art

Layout

The page uses a fluid 12-column grid with a max-width container of 1280px, centered with margin: 0 auto. The header spans full-width with padding: 12px (matching the 8px unit system), creating a compact navigation zone. Section rhythm follows a 'stacked-card' model: hero carousel (100vh or 600px), followed by 'UNGGULAN' (featured games) at 40px (lg spacing) below, then 'BARU' (new releases) at another 40px gap. Cards within sections use 24px (md spacing) gutters on desktop, collapsing to 12px (sm spacing) on mobile via media queries. Container padding is consistently 20px on mobile, 24px on tablet, 40px on desktop. White-space is aggressive around CTAs—buttons receive 24px vertical breathing room and 12px horizontal margins to prevent accidental taps. The design avoids centered text; left-

Elevation & Depth

Depth is conveyed through layered rgba() overlays and selective box-shadows rather than traditional drop-shadows. **Level 1 (Base)**: The page background is #0a0a0a with no shadow. **Level 2 (Standard Card)**: Game cards and content containers use background: rgba(31, 31, 31, 0.6) with a 1px border at rgba(182, 179, 199, 0.1), creating a subtle frame without visual weight. **Level 3 (Elevated/Hover)**: On hover, cards transition to rgba(42, 42, 42, 0.8) with box-shadow: 0 8px 24px rgba(98, 66, 252, 0.15)—a soft purple glow that reinforces brand identity. Modals and overlays use box-shadow: 0 0

Shapes

The shape philosophy is 'Geometric Precision'—a balance between sharp technical edges and approachable roundness. **Buttons and CTAs** use border-radius: 12px (md), creating a slightly rounded rectangle that feels modern without softness. **Cards and containers** use 16px (lg) for a more pronounced corner treatment, distinguishing them from interactive elements. **Input fields** use 9px (DEFAULT) for a subtle, technical appearance. **Badges and pills** use 100px (full) for maximum roundness, signaling secondary or tertiary importance. This hierarchy ensures users intuitively distinguish action

Components

Action Elements **Button-Primary** (bg: #6242fc, text: #f7edfa, 48px height, 12px vertical padding, 24px horizontal padding, border-radius: 12px, font-weight: 600, label-md typography) is the dominant CTA for top-ups, downloads, and account actions. On hover, background shifts to #7c5cff (primary-container) with a 200ms transition. On active/pressed, background darkens to #5032d9 with box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). **Button-Secondary** (transparent bg, 2px solid #6242fc border, text: #6242fc) is used for tertiary actions like 'Tampilkan semua' or 'Batal.' On hover, background becomes rgba(98, 66, 252, 0.08) without border change. **Button-Accent** (bg: #e8f953, text: #1f1f1f, 48px height, 12px/24px padding, border-radius: 12px, font--weight: 600) highlights limited-tim

Do's and Don'ts

**Do**

• Do use the primary violet (#6242fc) exclusively on interactive elements—buttons, links, focus rings—to maintain brand recognition and guide user attention.
• Do apply the secondary yellow (#e8f953) only for time-sensitive promotions and discount badges to preserve its impact and urgency.
• Do maintain the dark background (#0a0a0a) as the canvas; never lighten it beyond #1a1a1a, as it's core to the neon-maximalist identity and reduces eye strain.
• Do use 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all hover/active states to feel responsive without appearing sluggish.
• Do pair OTT display type with Inter body copy; never mix typefaces within a single section to maintain visual hierarchy clarity.

**Don't**

• Don't use primary violet on backgrounds or large surface areas; it's an accent color and loses impact when overused.
• Don't apply drop-shadows; use rgba() overlays and subtle box-shadows (0 8px 24px rgba(98, 66, 252, 0.15)) to maintain the cohesive neon aesthetic.
• Don't lighten text below #b6b3c7 (on-surface-variant) on dark backgrounds; contrast ratios drop below WCAG AA and readability suffers.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 9px, md: 12px, lg: 16px, xl: 24px, full: 100px); inconsistent rounding breaks the geometric precision philosophy.
• Don't add animations longer than 300ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1); the brand voice is fast and direct, not leisurely.