Rapspoint

Overview

Rapspoint is an Indonesian gaming marketplace specializing in Mobile Legends account trading, top-ups, and professional boosting services. The brand serves competitive gamers and casual players seeking fast, trustworthy transactions in a vibrant digital ecosystem. The aesthetic is 'Digital-Maximalist Gaming'—a bold fusion of deep navy foundations with electric cyan accents, neon yellow highlights, and strategic red call-to-actions that evoke the intensity of esports competition, the speed of instant transactions, and the energy of gaming culture. The UI conveys reliability through structured layouts while maintaining visual excitement through color contrast and dynamic typography. Voice: direct, energetic, and culturally attuned to Indonesian gaming communities. The brand speaks with urgency and confidence, never corporate or distant. Example sentence: 'Jual akun ML mu sekarang—pembayaran langsung, aman 100%.'

Colors

The color system is built on a deep navy foundation (#042057) that anchors the interface and evokes trust and stability in financial transactions. Primary (#0c44a1) is the signature brand blue used on all CTAs, interactive elements, and focus states—it commands attention without overwhelming. Secondary (#00e0fe, electric cyan) provides a vibrant accent for highlights, badges, and secondary actions, creating visual rhythm and energy. Tertiary (#fffb00, neon yellow) is reserved for promotional text, discount labels, and emphasis—it cuts through the dark background with urgency. Error (#ff0000, pure red) is used sparingly on critical CTAs ('KLIK DISINI' buttons) and destructive actions to signal importance. The surface stack progresses from #020d1a (surface-dim, near-black) through #042057 (s

Typography

The type system combines Utendo (a geometric, high-contrast display font) for headlines and Poppins/Plus Jakarta Sans for body text, creating a hierarchy that balances gaming aesthetics with readability. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major announcements. Headline-lg (40px, 700 weight) anchors section titles like 'INFORMASI MAINTENANCE' or 'JUAL BELI AKUN'. Headline-md (28px, 700 weight) is used for subsection headers and card titles. Title-lg (20px, 600 weight) labels key features or service categories. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and longer-form content. Body-md (16px, 400 weight, 24px line-height) is the default for form labels, list items, and standard UI text. Label-md (14px, 600 weight, 0.

Layout

The layout follows a 12-column grid with a max-width of 1440px, allowing flexible scaling from mobile (single column) to desktop (multi-column layouts). The page rhythm uses lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element spacing. The hero section spans full-width with a decorative wave divider (SVG with white, red, and navy stripes) that creates visual separation and reinforces the brand's playful energy. Cards and containers use 16px border-radius (lg) for a modern, approachable feel while maintaining the sharp, technical aesthetic. The gutter (24px) is applied consistently between grid columns and section edges. Container padding is 24px on desktop, reducing to 12px on tablet and 8px on mobile to optimize scre

Elevation & Depth

Depth is conveyed through a layered shadow and transparency system rather than dramatic elevation changes. Level 1 (Base): The background is solid #020d1a with no shadow. Level 2 (Standard Cards): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(0, 224, 254, 0.2) to create subtle separation from the background. Level 3 (Modals/Overlays): Modals and floating panels use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 2px border at rgba(0, 224, 254, 0.4) to assert prominence. Hover states increase shadow to 0 6px 16px rgba(0, 0, 0, 0.18) and shift the background colo

Shapes

The shape philosophy is 'Technical Precision with Approachability'—sharp enough to feel modern and gaming-focused, rounded enough to feel welcoming and accessible. Buttons use 8px border-radius (DEFAULT) for a balanced, slightly rounded rectangle that feels contemporary without being overly soft. Cards and containers use 16px border-radius (lg) to create a more generous, card-like appearance that invites interaction. Input fields use 8px border-radius (DEFAULT) to match buttons and maintain visual consistency. Badges and pills use 9999px border-radius (full) to create perfect circles or capsul

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid #0c44a1 background, white text, 8px radius, 6px 48px padding), secondary (transparent background, 2px cyan border, 8px radius), and accent (solid #ff0000 background, white text, used for critical CTAs like 'KLIK DISINI'). All buttons have a minimum height of 44px to meet mobile touch targets. Hover states shift the background color to the -container variant (e.g., primary-hover uses #0b5c96) and add a subtle box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18). Active states darken further to primary-fixed-dim (#0a3a7a). Focus states add an inset ring: inset 0 0 0 2px {colors.primary}. Transitions are applied at 200ms ease-out for smooth, responsive feedback.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use the primary blue (#0c44a1) exclusively for CTAs, focus states, and key interactive elements—it is the brand's signature accent and must remain distinctive.
• Do apply cyan (#00e0fe) as a secondary highlight for badges, borders, and supporting UI elements to create visual rhythm without competing with primary.
• Do use neon yellow (#fffb00) sparingly for promotional text, discount labels, and time-sensitive announcements to signal urgency and grab attention.
• Do maintain white text (#ffffff) on all dark backgrounds for maximum contrast and readability, especially in gaming contexts where clarity is critical.
• Do use 16px border-radius (lg) for cards and 8px (DEFAULT) for buttons to create a consistent, modern aesthetic that feels both technical and approachable.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.2) to modals to create subtle depth without overwhelming the interface.
• Do use Utendo font for all headlines (display, headline-lg, headline-md) to reinforce the gaming brand identity and create visual hierarchy.
• Do ensure all interactive elements have a minimum height of 44px and padding of at least 12px to meet mobile touch target guidelines.

**Don't**

• Don't use the primary blue (#0c44a1) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain its distinctive power.
• Don't apply cyan (#00e0fe) to large background areas or text—it is too bright and will reduce readability; use it only for accents, borders, and highlights.
• Don't mix Utendo and Poppins fonts within a single headline or title—use Utendo for display/headline levels and Plus Jakarta Sans/Poppins for body and labels to maintain clarity.
• Don't use light backgrounds or near-white surfaces (#f5f5f5) as the primary canvas—the dark navy foundation (#042057) is the brand's core aesthetic and must dominate.
• Don't apply border-radius values smaller than 4px (sm) or larger than 20px (xl) outside of the defined scale—consistency is critical for a cohesive design system.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadows will muddy the interface and reduce the clarity required for gaming contexts.
• Don't place small text (label-sm) over busy backgrounds without a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)—accessibility and readability must be non-negotiable.
• Don't use pure red (#ff0000) for anything other than error states, critical CTAs, or destructive actions—overuse will dilute its warning signal.