CHAJA

Overview

CHAJA is a gaming top-up platform built for African gamers who demand speed, clarity, and style. The brand serves the Free Fire, PUBG, and Call of Duty communities with instant in-game currency delivery. The design aesthetic is Cyber-Minimalist: a dark, high-contrast interface anchored in near-black (#07070c) with neon cyan (#00e5ff) as the signature accent, complemented by hot pink (#ff3d6e) and gold (#ffc53d) for secondary actions and status indicators. The UI evokes arcade precision and digital velocity—every interaction feels snappy, every surface layered with intentional depth. The emotional response is one of confidence: the player feels they're in control of a professional, trustworthy system.

The brand voice is direct, energetic, and culturally attuned. Vocabulary leans into gaming vernacular ("grind," "charge," "plug in") and Nigerian English idioms. Tone is never condescending; it's peer-to-peer, speaking to players as equals. Example sentence: "Charge the grind—Free Fire, PUBG, Call of Duty, and more. Pay in naira." Notice the imperative, the rhythm, the specificity of currency. Every word earns its place.

Colors

The color system is built on a dark-first philosophy with neon accents. Surface (#07070c) is the foundational void—a near-black that reads as premium and reduces eye strain during extended play sessions. The surface stack (surface-container-lowest through surface-container-highest) provides subtle elevation through incremental lightening: #030305 → #0a0a10 → #10131c → #1a1d2a → #242836. This creates visual hierarchy without harsh contrast.

Primary (#00e5ff) is the neon cyan accent—the brand's signature color, used exclusively on call-to-action buttons ("Charge Now"), focus states, and interactive highlights. It commands attention through saturation and luminosity, not size. Secondary (#ff3d6e) is hot pink, reserved for secondary actions, alerts, and accent badges. Tertiary (#ffc53d) is go

Typography

The type system uses three distinct families to create visual rhythm and hierarchy. Oxanium (700–800 weight) is the display and headline typeface—geometric, bold, and distinctly gaming-forward. It appears in the hero ("Charge the grind" at 72px, 800 weight, -0.02em tracking) and section headers. Chakra Petch (600–700 weight) is the secondary headline family, used for subsections and labels, adding a technical, slightly condensed feel. Plus Jakarta Sans (400–600 weight) is the body and UI typeface—clean, neutral, and highly legible at small sizes. JetBrains Mono (500–700 weight) is reserved for monospace contexts: pricing, codes, and technical labels.

The hierarchy is enforced through size and weight, not color. Display text (72px, 800 weight) commands the hero. Headline-lg (48px, 700 weig

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px (container-max), centered with 24px gutters on desktop and 16px on mobile. The hero section spans full-width with a layered background: a game screenshot (Free Fire) at 80% opacity, overlaid with a fog texture at 25% opacity, then a radial gradient from void/50 to void/10 (left-to-right on desktop, top-to-bottom on mobile). This creates depth without obscuring the headline.

White-space is generous but purposeful. Section separation uses lg spacing (40px) on desktop, md spacing (24px) on tablet. The hero headline has 20px top margin, 32px bottom margin, creating breathing room. Card padding is md (24px) on desktop, sm (12px) on mobile. The game carousel uses a 5-column grid on desktop (each game tile is aspect-square), colla

Elevation & Depth

Depth is conveyed through layered glass surfaces and subtle shadows, not through dramatic drop-shadows. The design uses three elevation levels:

Level 1 (Base): The void background (#07070c) with gradient overlays. No shadow.

Level 2 (Standard Card): The hero game carousel and standard cards use backdrop-filter: blur(20px), background: rgba(16, 19, 28, 0.8), border: 1px solid rgba(255, 255, 255, 0.1), and box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.3). The inset highlight creates a subtle "frosted glass" effect; the outer shadow separates the card from the

Shapes

The shape philosophy is Soft-Technical: rounded corners are present but restrained, avoiding the overly organic feel of pure rounded-full while rejecting harsh 0px corners. The rounded scale is: sm (4px) for small UI elements like checkboxes, DEFAULT (8px) for input fields and small buttons, md (12px) for list items and secondary buttons, lg (16px) for primary buttons and standard cards, xl (24px) for hero cards and modals, and full (9999px) for badges and pills.

Buttons use lg (16px) radius, creating a subtle softness that feels premium without being playful. Cards use xl (24px) radius, espe

Components

Action Elements Buttons are the primary interaction surface. The primary button ("Charge Now") uses background: {colors.primary} (#00e5ff), text-color: {colors.on-primary} (#07070c), rounded: lg (16px), padding: 12px 24px, height: 48px, and box-shadow: 0 0 0 1px rgba(78, 185, 216, 0.35). On hover, apply filter: brightness(1.1) to brighten the cyan. On active, apply transform: scale(0.98) for tactile feedback. Transition duration: 200ms ease-out. The secondary button ("Track Order") uses background: transparent, border: 1px solid rgba(255, 255, 255, 0.1), text-color: {colors.on-surface}, and on hover, border-color becomes rgba(78, 185, 216, 0.6) with text-color shifting to {colors.primary}. Both buttons use label-md typography (14px, 600 weight, 0.12em tracking).

Containers & Surfa

Do's and Don'ts

**Do**

• Do use the primary cyan (#00e5ff) exclusively on CTAs and focus states—it's the brand's signature and must remain distinctive.
• Do layer glass surfaces with inset borders (rgba(255, 255, 255, 0.07–0.14)) and outer shadows (0 8px 24px rgba(0, 0, 0, 0.3)) to create depth without drop-shadow heaviness.
• Do maintain tight letter-spacing on display text (−0.02em) and generous spacing on labels (0.12–0.18em) to reinforce hierarchy.
• Do use the surface stack (surface-container-lowest through surface-container-highest) for subtle elevation; avoid jumping more than 2 levels in a single interaction.
• Do apply 200ms ease-out transitions to all interactive elements for snappy, predictable feedback.

**Don't**

• Don't use primary cyan for backgrounds or large surfaces—it's an accent color and loses impact when overused.
• Don't apply drop-shadows to glass surfaces; use inset borders and backdrop-filter blur instead to maintain the frosted-glass aesthetic.
• Don't mix typefaces within a single headline; Oxanium for display, Chakra Petch for secondary headers, Plus Jakarta Sans for body.
• Don't exceed 1280px container width; the grid is designed for focus and readability, not sprawl.
• Don't use rounded: full (9999px) on buttons or cards; reserve it for badges and pills only.