Switch between the rendered Visual preview and the Raw DESIGN.md.
Mall Store embraces a modern, high-energy gaming marketplace aesthetic with a clean, confident interface designed for rapid transactions and instant gratification. The design balances a professional e-commerce foundation with bold accent colors and vibrant interactive states that appeal to gaming enthusiasts. Deep neutrals ground the interface while strategic use of bright yellow creates urgency and drives action. The overall atmosphere is streamlined and trustworthy, optimized for quick decision-making with minimal friction—perfect for an Indonesian gaming topup platform focused on speed and reliability.
Key Characteristics
#FACC15) for primary calls-to-action#18181B, #000000) for text and structural elements#15803D, #25D366) for success and secondary actions#18181B): Primary text, headings, structural components; establishes hierarchy and readability#000000): High-contrast text on light backgrounds, critical UI elements, bold emphasis#FACC15): Primary call-to-action buttons, key interactive elements, draws immediate attention#EAB308): Secondary accent, warning states, hover variations of primary yellow#25D366): Success states, confirmation, messaging features, positive feedback#15803D): Secondary brand accent, subscription/premium features, dark mode variant#1B5D20): Deep green accent for prominent sections and containers#9CA3AF): Disabled states, placeholder text, lower-priority information#71717A): Secondary text, captions, muted interactions#A1A1AA): Icon fills, subtle UI elements, tertiary interactions#FFFFFF): Primary background, cards, modal dialogs, light surfaces#F4F4F5): Secondary background, subtle container divisions#F0FDF4): Success backgrounds, confirmations, positive context#E4E4E7): Borders, input outlines, subtle dividers#E5E7EB): Primary border color, form inputs, UI element outlines#0000): Overlay and transparency applications#E5E7EB): Standard borders for inputs, buttons, cards, containers#E4E4E7): Lighter borders for less prominent divisions#FFFFFF): Primary surface for card components and containers#25D366): Confirmation messages, successful topup completion, positive indicators#FACC15): Primary attention, alert states, time-sensitive actions#EAB308): Secondary warning, hover states, slightly reduced intensityPoppins (Google Fonts), fallback stack: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Poppins | 32px | 700 | 40px | 0px | Hero headlines, major section titles |
| Display Medium | Poppins | 30px | 700 | 36px | 0px | Primary page headings, h2 elements |
| Heading Large | Poppins | 24px | 700 | 32px | 0px | Section headers, prominent subheadings |
| Heading Medium | Poppins | 18px | 700 | 28px | 0px | Card titles, subsection headings, h3 |
| Heading Small | Poppins | 16px | 700 | 24px | 0px | Form labels, button text, prominent links |
| Heading XSmall | Poppins | 13px | 900 | 24px | 0.5px | h4 elements, bold captions, high emphasis |
| Body Large | Poppins | 16px | 400 | 24px | 0px | Body paragraphs, larger context text, spans |
| Body Standard | Poppins | 14px | 400 | 20px | 0px | Standard body text, descriptions |
| Body Small | Poppins | 13px | 400 | 21.125px | 0px | Form fields, helper text, body elements |
| Caption | Poppins | 12px | 500 | 18px | 0px | Captions, labels, assistance text |
| Button | Poppins | 12px | 900 | 16px | 0.5px | Button labels, high-emphasis calls-to-action |
| Code | Poppins | 12px | 500 | 18px | 0px | Monospace fallback for code snippets |
#FACC15#00000010px 16px12px0px12px, weight 90016px36pxnonebackground-color: #EAB308background-color: #D4A500; transform: scale(0.98)background-color: #E4E4E7; color: #A1A1AA; cursor: not-allowed#FFFFFF#0000008px 20px10px1px solid #E4E4E711px, weight 70024px42pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0pxbackground-color: #F4F4F5; border-color: #D4D4D8background-color: #E4E4E7; border-color: #A1A1AAbackground-color: #F0FDF4; border-color: #E5E7EB; color: #9CA3AFrgba(0, 0, 0, 0)#9CA3AF4px 4px9999px0px16px, weight 40024px28px28pxnonecolor: #71717A; background-color: rgba(0, 0, 0, 0.05)color: #18181B; background-color: rgba(0, 0, 0, 0.1)#F4F4F5#18181B0px16px1px solid #E4E4E716px, weight 40024px48px48pxnonebackground-color: #FFFFFF; border-color: #D4D4D8background-color: #E5E7EB; border-color: #A1A1AA#FFFFFF1px solid #E5E7EB12px24pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#18181Bbox-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px#F0FDF41px solid #15803D12px20pxnone#1B5D20rgba(0, 0, 0, 0.5)0px0pxnone1000#FFFFFF16px32px 24pxrgba(0, 0, 0, 0.25) 0px 25px 50px -12px500px0px#FFFFFF#18181B12px 16px10px1px solid #E4E4E714px, weight 50020px46pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#9CA3AFborder-color: #15803D; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -4pxborder-color: #DC2626; background-color: rgba(220, 38, 38, 0.05)68px (allows space for prefix icon)16px16px from left edge#9CA3AF20px20px6px2px solid #E4E4E7#FFFFFF#15803D#FFFFFFpointerrgba(255, 255, 255, 0.95)73px0px 24px1px solid #E5E7EBrgba(0, 0, 0, 0.05) 0px 1px 2px 0pxflexcenterspace-between#18181B16px, weight 40024px12px 16px8pxtransparentall 0.2s easecolor: #15803D; background-color: rgba(21, 128, 61, 0.05)color: #15803D; border-bottom: 2px solid #15803D#71717A14px, weight 60020px10px 14px16pxtransparentbackground-color: #F4F4F5; color: #18181B#18181B16px, weight 40024pxnone1px solid transparentborder-color 0.2s easeborder-bottom-color: #18181Bcolor: #71717A#71717A14px, weight 60020px10px 0pxcolor: #18181B; text-decoration: underline#F0FDF4#1B5D204px 12px9999px12px, weight 6001px solid #15803D18px#FEF3C7#92400E4px 12px9999px12px, weight 6001px solid #EAB30818pxThe spacing system is built on a 4px base unit with a consistent scale applied to padding, margin, and gaps throughout the interface.
4px — tight padding within buttons, small icon spacing8px — compact padding, small gaps between adjacent elements12px — standard small gaps, form label spacing16px — default padding for containers, cards, standard gaps20px — larger gaps between major content sections24px — comfortable padding for card interiors, section margins32px — spacing between major sections, container edges40px — top-level section separation48px — large gaps between distinct sections56px — prominent spacing, hero section boundaries64px — largest spacing, full viewport section transitionsUsage Context
4px: Internal button padding, icon-only buttons, micro-interactions8px: Checkbox/radio padding, small gaps, tight component relationships12px: Gap between form rows, input group spacing16px: Default card padding, standard button padding, primary container spacing20px: Gap between similar content sections, larger form groups24px: Card padding, section internal spacing, modal header spacing32px: Main content padding, container padding edges40px: Section-to-section vertical spacing, major content boundaries48px: Large gap between distinct page sections56px: Featured section spacing, hero to content transitions64px: Page-level section separation, full-width block transitions1440px (desktop full width)24px on large screens, 16px on medium, 12px on smallMall Store emphasizes generous whitespace to reduce cognitive load and guide focus toward primary actions. Every interactive element has breathing room, and visual hierarchy is strengthened through strategic emptiness rather than borders or heavy backgrounds. Whitespace creates natural visual grouping and directs user attention to high-priority content like call-to-action buttons and essential information. This approach is especially critical for gaming topup interfaces where rapid decision-making is essential—users should instantly identify what to do next.
0px — navigation bars, full-width sections, grid items6px — checkbox inputs, very tight component corners8px — subtle rounding, input fields in condensed layouts, close button10px — standard input fields, secondary buttons, small cards12px — primary buttons, cards, modal dialogs, medium containers16px — larger cards, rounded icon buttons, prominent containers, breadcrumbs9999px — fully rounded buttons, badge elements, accent elements| Level | Treatment | Use |
|---|---|---|
| Flat (0) | box-shadow: none; background: solid color | Backgrounds, navigation, large container blocks |
| Raised (1) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Buttons, form inputs, subtle emphasis elements |
| Elevated (2) | rgba(0, 0, 0, 0.1) 0px 4px 6px -2px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px | Card hover states, interactive containers on focus |
| Floating (3) | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Dropdown menus, popovers, floating action buttons |
| Modal (4) | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px | Modal dialogs, overlay panels, critical alerts |
Shadow Philosophy
Mall Store's shadow strategy uses restraint and purposefulness. Shadows are minimal by default, increasing only when elements must visually separate from their background or signal interactivity. The system emphasizes clean card-based layouts where borders and subtle shadows define container boundaries. Shadows scale with elevation level but never dominate the visual landscape—the focus remains on content and action elements. This keeps the interface feeling modern and lightweight while maintaining clear spatial hierarchy. Shadows are never decorative; they always communicate functional relationships.
#FACC15) for all primary call-to-action buttons — it commands attention and drives conversions16px padding for standard card and container interiors#15803D, #25D366) exclusively for success, confirmation, and positive feedback — users expect this semantic meaning#18181B) with underline indication on hover and active states12px font size with 900 weight for high-emphasis labels like button text and status badgesF0FDF4 light green backgrounds for success cards, confirmations, and positive-context containers48px touch targets for all interactive elements on mobile devices12px-16px) consistently across buttons, inputs, and cards71717A with small font sizes (12px-13px) for secondary information and captions12px gaps between rows for visual clarity#E4E4E7 for form inputs and #E5E7EB for card and container edges#15803D) for warning or error states — yellow and red are semantic for these8px on interactive elements — this breaks touch accessibilityrgba(0, 0, 0, 0.3) minimum)700 — critical actions must stand out visually#FACC15) backgrounds with black text at sizes below 12px — contrast fails#E4E4E7 borders on light gray (#F4F4F5) backgrounds — insufficient contrast; use #D4D4D8 instead0.5 and disable pointer events1.2x font size — readability and accessibility suffer400 for body and 700 for emphasis16px+) to full-width sections — reserve large radii for contained elements| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile Small | 320px–479px | Single column, 12px padding, 28px gaps, stacked buttons, mobile nav menu |
| Mobile Large | 480px–767px | Single column, 16px padding, 20px gaps, stacked forms, full-width inputs |
| Tablet | 768px–1023px | 6-column grid, 20px padding, 24px gaps, side-by-side buttons, collapsible nav |
| Desktop | 1024px–1439px | 12-column grid, 24px padding, 32px gaps, multi-row layouts, horizontal nav |
| Large Desktop | 1440px+ | Max width container 1440px, centered layout, full spacing scale active |
48px × 48px (touch-friendly baseline)10px on top/bottom, 16px on left/right48px × 48px with internal icon centered24px minimum to ensure tappable link targets46px minimum for comfortable mobile typing12px minimum gap to prevent mis-tapsMobile (320px–479px)
24px to 12px; gaps from 28px+ to 12px30px → 24px, 24px → 18px)36px minimum height20pxTablet (768px–1023px)
20px; gaps to 20px–24px90vw maximum widthDesktop (1024px+)
1440px24px–32px; gaps 28px–48px500px, centered on screenOrientation-Specific Rules
20%, prioritize horizontal flow#FACC15) for main action buttons, alerts#FFFFFF bg, #E4E4E7 border) for secondary actions#25D366) for confirmations, status indicators#FFFFFF) for cards, modals, primary surfaces#F4F4F5) for subtle surface variations#18181B) for all text hierarchy levels#18181B) at standard weight, Zinc Gray (#71717A) for secondary text#E5E7EB) for standard, #E4E4E7 for input focus and subtle divisions#9CA3AF) for placeholders, disabled states, tertiary information#F0FDF4) for success confirmations and positive-context cards#15803D) for branded premium features, secondary emphasisAll buttons follow strict color semantics: Yellow for primary CTAs, white with border for secondary, never deviate. Hover yellow becomes #EAB308, active becomes #D4A500.
Typography must scale with defined hierarchy: Use 30px for main headings, 18px for section heads, 16px for body paragraphs, 13px for small body/labels. Never add intermediate sizes; always choose from the table.
Spacing always uses 4px base unit: Every margin, padding, and gap must be divisible by 4. Standard padding is 16px (4×4), card gaps are 12px (3×4) or 20px (5×4). Never use arbitrary values like 15px or 18px.
Form inputs have fixed specifications: Always 46px height, 12px 16px padding, 10px border-radius, #E4E4E7 border, focus state adds green #15803D border and subtle shadow. Input text is always Poppins 14px weight 500.
Cards and containers use consistent layering: Base cards are #FFFFFF with 1px #E5E7EB border, 12px border-radius, 24px padding. Success cards swap to #F0FDF4 background with #15803D border. Shadows are minimal: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px by default.
Modals and overlays follow strict pattern: Overlay is rgba(0, 0, 0, 0.5) full-screen, modal box is #FFFFFF with 16px border-radius, 32px 24px padding, shadow rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, centered and max-width 500px.
Navigation is always 73px height with rgba(255, 255, 255, 0.95) background: Nav links are 16px Poppins weight 400 in charcoal, hover becomes green #15803D with underline. Active state is bold #15803D with 2px bottom border.
Mobile breakpoint is 480px: Below this, collapse to single column, reduce padding to 12px, convert horizontal nav to hamburger menu. At 768px and above, enable grid layouts, tabs, side-by-side buttons. Max container width at 1440px on desktop.
Touch targets must never be smaller than 48px × 48px: Buttons have minimum 10px 16px padding, icons are exactly 48px square, form fields are 46px tall. Gap between interactive elements is minimum 12px. Adjust padding upward before reducing sizes.
Poppins is the only font used throughout: All text uses Poppins with consistent fallback stack. Weight 400 for body/standard, 700 for headings/emphasis, 900 for high-urgency labels (buttons, badges). Never introduce other font families; consistency is essential.