Codashop Indonesia

Overview

Codashop Indonesia is a high-velocity gaming commerce platform serving millions of Indonesian gamers with instant digital top-ups. The design system embraces a "Vibrant-Maximalist" aesthetic: a deep purple-black canvas (surface: #0a0a0a, on-surface: #f7edfa) provides the stage for bold, saturated accent colors—electric purple (primary: #6242fc), neon yellow (secondary: #efe955), and hot pink (tertiary: #ff7f98)—that evoke the energy and excitement of gaming culture. The UI prioritizes speed and trust: instant visual feedback, clear hierarchy, and accessible contrast ratios (WCAG AA minimum 4.5:1 on body text) ensure users complete transactions with confidence.

The brand voice is energetic yet professional, speaking directly to gamers in their language: "Jutaan gamers menggunakan Codashop setiap bulannya" (Millions of gamers use Codashop every month). Tone is conversational, never corporate; vocabulary emphasizes speed ("instan", "langsung"), trust ("terpercaya"), and ease ("tanpa registrasi"). Example sentence in brand voice: "Top-up Mobile Legends sekarang—kredit masuk dalam hitungan detik, tanpa ribet."

Colors

The color system is built on a dark-first foundation optimized for gaming audiences and extended play sessions. Surface stack anchors at #0a0a0a (surface) with progressive lightening through surface-container (#1f1f1f) to surface-container-highest (#353535), creating subtle depth without eye strain. On-surface text is a cool lavender (#f7edfa, RGB 247, 237, 250) that maintains 7.2:1 contrast against the darkest surface and 5.1:1 against mid-containers—exceeding WCAG AAA standards.

Primary (#6242fc, a saturated violet-blue) is the signature accent used exclusively on CTAs, active states, and brand-critical interactions. It appears in three intensities: primary-container (#7d5cff) for hover states, primary-fixed (#e8deff) for disabled/secondary contexts, and inverse-primary (#a89dff) for su

Typography

The type system pairs OTT (a geometric, high-contrast display font) for headlines and Inter (a humanist sans-serif) for body and UI text, creating visual hierarchy through both family and weight rather than size alone. Display (60px, 700 weight, -0.04em tracking) and Headline-lg (40px, 600 weight, -0.02em tracking) use OTT to command attention on hero sections and modals; Headline-md (32px, 600 weight, 0.05em tracking) anchors section titles with slightly looser spacing to aid readability at smaller scales. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) use Inter for product descriptions and long-form content, with 1.5x line-height multiplier to accommodate Indonesian's character complexity and improve accessibility for dyslexic users. Label-m

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered via margin: 0 auto on .section-container elements. Horizontal padding is 20px (gutter token) on mobile, scaling to 40px on tablets (768px+) and 64px on desktop (1024px+) via CSS media queries. Section separation uses 32px (lg spacing) for major content blocks (hero, product grid, footer) and 24px (md spacing) for subsections within cards. Container padding follows a 24px standard (md spacing) for cards and modals, with 12px (sm spacing) reserved for list items and compact components. The grid rhythm is 8px-based: all spacing values are multiples of 8px (4px, 12px, 20px, 24px, 32px, 40px, 64px), enabling predictable alignment and reducing cognitive load during design handoff. Whitespace is generous around CTA

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (sm elevation: 0 1px 3px rgba(0, 0, 0, 0.5)) is applied to cards, list items, and input fields—a tight, close shadow suggesting proximity to the surface. Level 2 (md elevation: 0 4px 12px rgba(0, 0, 0, 0.6)) lifts modals, dropdowns, and hover states 4-8px above the base, creating clear separation. Level 3 (lg elevation: 0 16px 40px rgba(0, 0, 0, 0.8)) is reserved for full-screen overlays and critical modals, establishing maximum visual hierarchy. Primary buttons add a custom glow: box-sha

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are generous enough to feel approachable and modern, yet precise enough to maintain the brand's gaming-forward credibility. Buttons and primary CTAs use lg radius (1rem / 16px) for a friendly, clickable appearance; secondary buttons and input fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian feel. Cards and elevated surfaces use xl radius (1.5rem / 24px) to soften their edges and suggest depth. Badges and status indicators use full radius (100px / border-radius: 9999px) to create pill-shaped containers that f

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses primary (#6242fc) background with on-primary text (#f7edfa), 12px vertical / 24px horizontal padding, and lg radius (16px). On hover, background shifts to primary-container (#7d5cff) and shadow expands to 0 6px 16px rgba(98, 66, 252, 0.4), creating tactile feedback. On active/pressed, background darkens to #4d3a7d (a 30% darker shade of primary) with no shadow, simulating a "pressed" state. Transition timing is 200ms cubic-bezier(0.4, 0, 0.2, 1) (Material's standard easing). button-secondary uses transparent background with a 2px solid primary border and primary text; on hover, background becomes rgba(98, 66, 252, 0.1) (10% primary overlay) to indicate focus without overwhelming the layout.

Containers

Do's and Don'ts

**Do**

• Do use primary (#6242fc) exclusively on CTAs and interactive elements; it's the brand's signature accent and should never appear as body text or background.
• Do maintain minimum 4.5:1 contrast ratio between text and background per WCAG AA; test label-sm on promotional imagery with text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3).
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) easing to all state transitions (hover, focus, active) for consistent, responsive feel.
• Do use the full rounded scale (sm, DEFAULT, md, lg, xl, full) intentionally: buttons and inputs use lg/DEFAULT, cards use xl, badges use full.
• Do leverage the 8px spacing grid (4px, 12px, 20px, 24px, 32px, 40px, 64px) for all padding, margins, and gaps to ensure predictable alignment.
• Do pair OTT (display/headline) with Inter (body/label) to create clear visual hierarchy; never mix OTT for body text or Inter for display.

**Don't**

• Don't use secondary (#efe955) or tertiary (#ff7f98) for body text or large text blocks; their high luminance causes eye strain and fails contrast requirements.
• Don't apply shadows lighter than sm elevation (0 1px 3px rgba(0, 0, 0, 0.5)); the dark surface absorbs light and requires higher opacity to be visible.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use box-shadow: drop-shadow() filter; use box-shadow property exclusively for consistent rendering and performance.
• Don't exceed 1280px container max-width; the layout system is optimized for this constraint and wider layouts break the visual rhythm.
• Don't apply color transitions without easing; always use cubic-bezier(0.4, 0, 0.2, 1) or a named Material easing function to feel intentional.