x444Storez

Overview

x444Storez is a premium marketplace for FiveM server tools and scripts, targeting technical administrators and developers who demand performance, stability, and responsive support. The design aesthetic is **Tech-Forward Minimalism**: a near-black canvas (rgb(10, 10, 10)) punctuated by a vivid electric blue accent (rgb(0, 119, 230)) that conveys trust, precision, and digital energy. The UI evokes a command-center sensibility—clean, purposeful, and optimized for rapid decision-making. Users feel they're accessing a professional, vetted platform where every pixel serves function.

The brand voice is direct and confident without being aggressive. Vocabulary emphasizes performance metrics ("stable," "high-performance," "24/7 support"), technical credibility ("developer-grade," "curated"), and accessibility ("unlock," "empower"). Tone is reassuring yet energetic—the brand acknowledges the user's need for reliability while celebrating the capability gains they'll unlock. Example sentence: "Unlock performance beyond every server—think of x444Storez as your top-tier toolkit."

Colors

The color system is anchored in a **deep-dark surface stack** that minimizes eye strain during extended use, critical for technical users. Primary surface is #0a0a0a (rgb(10, 10, 10)), with container layers stepping up through #0c0c0d, #101012, #151517, and #19191b to create subtle depth without visual noise. Text is predominantly #f5f5f5 (rgb(245, 245, 245)), with muted variants at #a3a3a3 for secondary information and #737373 for tertiary labels.

The **primary accent is #0077e6** (rgb(0, 119, 230))—a saturated electric blue used exclusively on CTAs ("สมัครสมาชิก" / Sign Up button), interactive states, price highlights, and badge accents. This color commands attention without aggression; it reads as "click me" across all contexts. Secondary accent is pure white (#ffffff) for contrast and

Typography

The type system uses Thai-optimized font families (thai-rg, thai-fb-leelawadee, thai-fb-noto, thai-fb-thonburi) to ensure legibility across Thai and Latin scripts. Display (92px, 400 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px) and headline-md (32px) structure content hierarchy. Body text sits at 16px with 24px line-height, providing comfortable reading rhythm. All type is set at 400 weight (regular) to maintain visual lightness against the dark background—heavier weights would feel oppressive. Label text (15px, 13.5px) uses consistent 400 weight for UI labels and buttons. For small labels over busy backgrounds (e.g., badge text on gradient overlays), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure legibility. Letter-spacing i

Layout

The page uses a **fluid 12-column grid** with a max-width of 1440px, centered on desktop. Gutter spacing is 24px (md token), creating breathing room without excess whitespace. Hero section spans full width with a dynamic gradient background (cyan-to-blue radial overlay) that draws the eye to the central title and CTA. Content sections use lg spacing (40px) for vertical separation, creating a rhythm that guides users through product categories, stats, and footer. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on mobile (max-width: 768px). The search bar and category cards sit in a constrained container (920px–1280px) to prevent overwhelming the viewport. White-space philosophy: generous margins around interactive elements (buttons, cards) to reduce cognitive l

Elevation & Depth

Depth is conveyed through a **layered shadow system** rather than color shifts, maintaining the dark aesthetic's cohesion. Level 1 (Base): no shadow; surface-container (#101012) sits flush against the background. Level 2 (Standard Cards): box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3)—a soft, close shadow that lifts cards 2–4px. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6)—used on card-hover and interactive states, creating a 6–8px lift. Level 4 (Modals/Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8)—a dramatic shadow for floating dialogs an

Shapes

The shape philosophy is **Precision-Technical**: rounded corners are minimal and purposeful, never organic. Buttons and inputs use 12px radius (lg token), providing a modern, approachable feel without softness. Cards use 12px (lg) for consistency with buttons, creating a unified component language. Small UI elements (badges, tags) use 9999px (full) for pill-shaped appearance, a familiar pattern in tech interfaces. Inputs and search bars use 4px (DEFAULT) for a tighter, more utilitarian look. The rationale: 12px is the sweet spot between "friendly" and "professional"—it's not so rounded that it

Components

Action Elements Buttons are the primary interaction surface. **button-primary** (bg: #0077e6, text: #ffffff, 40px height, 10px 20px padding, 12px radius) is used for all CTAs: "สมัครสมาชิก" (Sign Up), "เลือกซื้อสินค้า" (Purchase), and "ติดต่อเรา" (Contact). On hover, the background darkens to #005bb8 and the button lifts via transform: translateY(-1px) with filter: brightness(1.04) over 200ms. On active/click, transform: scale(0.98) provides tactile feedback. **button-secondary** uses a transparent background with a 1px outline border (rgba(255, 255, 255, 0.10)) and text color #0077e6, used for "เข้าสู่ระบบ" (Login) and secondary actions. Hover state fills the background with surface-container-high (#151517) and strengthens the border to rgba(255, 255, 255, 0.18).

Containers & Sur

Do's and Don'ts

**Do**

• Do use the primary blue (#0077e6) exclusively on CTAs and interactive affordances—never on passive text or backgrounds.
• Do maintain the dark surface stack (#0a0a0a to #19191b) for all containers; resist the urge to lighten backgrounds for "contrast."
• Do apply the shadow system consistently: standard cards get the soft 0 1px 3px shadow; hover/elevated states get 0 4px 12px.
• Do use 12px radius on buttons and cards to signal "modern SaaS" without sacrificing professionalism.
• Do pair Thai fonts (thai-rg, thai-fb-leelawadee) with 400 weight and generous line-height (24px for body) for optimal readability on dark backgrounds.
• Do apply transform: translateY(-1px) and filter: brightness(1.04) on hover for micro-interactions that feel responsive without being distracting.

**Don't**

• Don't use the tertiary red (#ed2052) for anything other than errors, alerts, or premium badges—it's too attention-grabbing for general UI.
• Don't lighten the surface below #0a0a0a or you'll lose the dark-mode cohesion and increase eye strain for technical users.
• Don't apply heavy shadows (0 16px 40px) to standard cards; reserve that depth for modals and floating overlays.
• Don't use rounded corners smaller than 4px or larger than 14px; the precision-technical aesthetic depends on this constraint.
• Don't mix font weights; stick to 400 (regular) for all body and UI text to maintain visual lightness.
• Don't animate transitions faster than 200ms or slower than 400ms; the brand rhythm is snappy but not jarring.