Majestic RolePlay

Overview

Majestic RolePlay is a premium GTA 5 roleplay platform serving 100,000+ daily players with an immersive urban gaming experience. The design system embraces a "Gaming Maximalism" aesthetic—a bold, high-contrast dark-mode-first approach that prioritizes energy, readability, and rapid interaction in a competitive multiplayer environment. The visual language combines deep blacks (#0e0e0e), vivid magenta accents (#e81c5a), and strategic use of secondary blues (#0078a8) to create a sense of urgency and prestige. The UI evokes the intensity of a heist film: sleek, dangerous, and unapologetically modern.

The brand voice is direct, authoritative, and street-smart. Copy is action-oriented and punchy—never flowery or apologetic. Vocabulary leans into gaming culture ("grind," "crew," "hustle") and Russian-influenced phrasing (reflecting the player base). Tone example: "Купите ключ за пару минут и начните играть" (Buy a key in a minute and start playing)—immediate, transactional, no friction.

Colors

The color system is built on a dark-first foundation (#0e0e0e surface, #0a0a0a surface-dim) to reduce eye strain during extended play sessions and to make the primary accent (#e81c5a) pop with maximum contrast. Primary (#e81c5a) is the signature magenta used exclusively for CTAs, active states, and brand-critical interactive elements—it appears on the "Войти" button, purchase prompts, and focus indicators. Secondary (#0078a8) is a cool blue reserved for informational elements, date pickers, and secondary navigation. Tertiary (#ffd8e7) is a soft pink used sparingly for highlights and decorative accents on dark backgrounds. The surface stack uses a tight range of near-blacks (surface-container-lowest #050505 through surface-container-highest #3d3d3d) to maintain visual hierarchy without intr

Typography

The type system uses Majestic Font as the primary typeface—a custom, geometric sans-serif that reinforces the brand's gaming identity and Russian heritage. Display (60px, weight 900, -0.04em tracking) is reserved for hero headlines and section breaks; Headline-lg (40px, weight 700) anchors major sections; Headline-md (28px, weight 700) introduces subsections. Body-lg (18px, weight 400, 28px line-height) is used for descriptive copy and card content; Body-md (16px, weight 400) is the default paragraph text. Label-md (14px, weight 600, 0.02em tracking) is applied to buttons, badges, and form labels to ensure crisp, scannable UI text. All headlines use negative letter-spacing (-0.01em to -0.04em) to tighten the visual weight and reinforce the aggressive, premium aesthetic. Apply text-shadow:

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on desktop and edge-to-edge on mobile (with 24px gutter padding). Section rhythm is driven by the spacing scale: lg (40px) separates major sections (hero, features, FAQ), md (24px) separates cards and subsections, sm (12px) separates inline elements. The hero spans full-width with a dark overlay (rgba(0, 0, 0, 0.5)) over a high-contrast background image, ensuring text legibility. Cards use md padding (24px) internally and are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile. Container max-width of 1280px prevents line-length from exceeding 80 characters on body text, maintaining readability. Whitespace is generous but purposeful—never more than lg (40px) between sections, never less th

Elevation & Depth

Depth is conveyed through layered shadows and subtle background opacity shifts rather than bright highlights. Level 1 (Base): solid background #0e0e0e with no shadow. Level 2 (Cards/Modals): box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4), background: rgba(0, 0, 0, 0.3), border: 1px solid rgba(232, 28, 90, 0.15). Level 3 (Elevated/Hover): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), background: rgba(0, 0, 0, 0.5), border: 1px solid rgba(232, 28, 90, 0.3). Primary buttons use a glow effect on hover: box-shadow: 0 6px 20px rgba(232, 28, 90, 0.5). Scrollbar styling uses a semi-transparent thumb (#b9b9c08

Shapes

The shape philosophy is "Technical Precision"—a blend of sharp corners and strategic rounding that reflects both the gaming industry's geometric aesthetic and the brand's premium positioning. Buttons use lg (1rem / 16px) border-radius for a modern, approachable feel while maintaining visual weight. Cards use lg (16px) for consistency with buttons, creating a cohesive component family. Input fields use DEFAULT (0.5rem / 8px) for a more utilitarian, form-like appearance. Badges and small UI elements use full (9999px) for a pill shape that signals secondary importance. Modals and overlays use md

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#e81c5a) background, white text, 16px 24px padding, 48px height, and lg rounding. On hover, the background shifts to {colors.primary-fixed-dim} (#d91c4a) and the shadow expands to 0 6px 20px rgba(232, 28, 90, 0.5), creating a lifting effect. On active, the button scales to 0.98 and the background darkens to #c91645. Button-secondary is transparent with a 1px border in primary color, sm padding (10px 14px), and 40px height; on hover, it gains a 10% primary background tint. All buttons use transition: all 0.2s ease for smooth state changes.

Containers & Surfaces Cards are the primary content container. Base card uses rgba(0, 0, 0, 0.3) background, md padding (24px), lg rounding (16px),

Do's and Don'ts

**Do**

• Do use {colors.primary} (#e81c5a) exclusively for CTAs, active states, and brand-critical affordances—never dilute it with secondary uses.
• Do apply lg (16px) border-radius to all primary buttons and cards to maintain visual consistency and premium feel.
• Do use the surface stack (surface-container-low through surface-container-highest) to create hierarchy; never use pure white or pure black for backgrounds.
• Do apply box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) as the baseline card shadow; increase to 0 8px 32px on hover for depth feedback.
• Do use Majestic Font at weight 700+ for all headlines and weight 600 for labels to maintain visual weight on dark backgrounds.
• Do set scroll-margin-top: 120px on all anchor targets to account for sticky headers and improve link navigation UX.

**Don't**

• Don't use primary (#e81c5a) for body text, backgrounds, or non-interactive elements—it will cause visual fatigue and dilute its affordance signal.
• Don't apply border-radius: 0px to interactive elements; even dividers should use sm (4px) to soften the interface.
• Don't use pure white (#ffffff) or pure black (#000000) for backgrounds; always use the surface stack to maintain the dark-mode aesthetic and reduce eye strain.
• Don't mix Majestic Font with system fonts in the same component; always declare fontFamily: 'Majestic Font' explicitly to ensure consistency across browsers.
• Don't apply shadows larger than lg (0 8px 32px) on non-modal elements; excessive shadow depth will flatten the visual hierarchy.
• Don't use opacity below 0.3 for borders or backgrounds on dark surfaces; the contrast will be too subtle to signal affordance.