Majestic RP

Overview

Majestic RP is a cinematic, high-octane GTA 5 roleplay platform that embraces a **Dark Maximalist** aesthetic—combining near-black surfaces (#0e0e0e) with vivid, saturated accent colors (primary magenta #e81c5a, secondary sky-blue #adc9eb, tertiary blush #ffe4e1) to create visual drama and urgency. The brand serves hardcore gaming communities seeking immersive, rule-driven multiplayer experiences with professional-grade server infrastructure. The UI evokes the gritty energy of open-world crime fiction: bold typography, high-contrast imagery, and strategic use of neon-like accents that pop against deep shadows. Users feel empowered, part of an elite gaming collective, and ready to engage in complex social narratives.

The voice is direct, commanding, and street-smart—never apologetic, always confident. Vocabulary leans into gaming vernacular ("key", "server", "gameplay", "immersive") mixed with aspirational language ("Majestic", "premium", "elite"). Tone examples: "Купите ключ за пару минут и начинайте играть" (Buy a key in minutes and start playing) and "Ещё не купили GTA V?" (Haven't bought GTA V yet?). The brand personality is rebellious yet professional—a playground for adults who take their roleplay seriously.

Colors

The color system is built on **high-contrast dark-mode maximalism** with strategic neon accents. The surface stack anchors at #0e0e0e (surface), descending to #050505 (surface-container-lowest) for recessed elements and ascending to #3d3d3d (surface-container-highest) for elevated cards and modals. This deep, near-black foundation creates visual weight and sophistication.

**Primary (#e81c5a)** is the brand's signature magenta—used exclusively on call-to-action buttons ("Войти", "1 200 Р"), active states, and focus indicators. It commands attention without overwhelming the dark canvas. On hover, primary shifts to #d63a6a (primary-fixed-dim) with an expanded glow (box-shadow: 0 8px 32px rgba(232, 28, 90, 0.3)) to reinforce interactivity. **Secondary (#adc9eb)** is a cool sky-blue reserved f

Typography

The type system uses **Majestic Font** as the primary typeface—a custom, geometric sans-serif that reinforces the brand's premium, gaming-forward identity. The hierarchy spans from display (72px, weight 900, -0.04em tracking) for hero headlines down to label-sm (12px, weight 600, 0.05em tracking) for UI labels and metadata. Display and headline-lg use aggressive negative letter-spacing (-0.04em to -0.02em) to create visual density and impact, essential for commanding attention in a dark environment. Body text (16–18px, weight 400, 0–0.01em tracking) maintains legibility with generous line-height (24–28px) to prevent eye strain on screens. All interactive labels (buttons, badges) use weight 600 with subtle positive tracking (0.01–0.05em) to signal actionability. When small labels appear ove

Layout

The layout uses a **12-column fluid grid** with a max-width container of 1280px, centered on the viewport. The page rhythm is built on an 8px unit system: spacing tokens scale as xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Hero sections use full-width backgrounds with 24px horizontal gutters on mobile, expanding to 40px on desktop. Card-based content sections employ md (24px) padding internally and lg (40px) margin between sections for breathing room. The scrollbar gutter is stabilized (scrollbar-gutter: stable) to prevent layout shift when scrollbars appear. Container max-width of 1280px ensures text remains readable at ultra-wide resolutions while maintaining focus. White-space is used strategically: dense clustering of UI elements (buttons, badges) in hero CTAs contrasts with

Elevation & Depth

Depth is achieved through **layered shadows and subtle transforms** rather than bright highlights. The elevation system defines three levels: Level 1 (sm) uses 0 1px 5px rgba(0, 0, 0, 0.65) for subtle card borders and input underlines; Level 2 (md) applies 0 3px 14px rgba(0, 0, 0, 0.4) to standard cards and modals, creating clear separation from the background; Level 3 (lg) uses 0 8px 32px rgba(0, 0, 0, 0.5) for elevated modals, dropdowns, and hover states. On primary button hover, an additional glow shadow (0 8px 32px rgba(232, 28, 90, 0.3)) emanates from the magenta accent, creating a halo e

Shapes

The shape philosophy is **Geometric Precision with Soft Edges**—balancing sharp, technical angles with subtle rounding to convey both professionalism and approachability. Border-radius tokens scale as: sm (4px / 0.25rem) for small UI elements like secondary buttons and input underlines; DEFAULT (8px / 0.5rem) for standard inputs and minor cards; md (12px / 0.75rem) for medium cards and popovers; lg (16px / 1rem) for primary cards and modals; xl (24px / 1.5rem) for hero sections and elevated containers; full (9999px) for badges and pill-shaped buttons. Primary CTAs use lg (16px) to signal impor

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses {colors.primary} (#e81c5a) background, white text, 16px 24px padding, 48px height, and {rounded.lg} (16px). On hover, background shifts to {colors.primary-fixed-dim} (#d63a6a) with an expanded glow shadow (0 8px 32px rgba(232, 28, 90, 0.3)) and a 0.2s ease transition. On active/click, apply transform: scale(0.98) to provide tactile feedback. **button-secondary** uses a semi-transparent dark background (rgba(16, 16, 16, 0.8)), primary text color, 10px 14px padding, 40px height, {rounded.sm} (4px), and a 1px border in {colors.outline-variant} (#484848). On hover, background becomes {colors.surface-container-high} (#2e2e2e) with border color shifting to {colors.outline} (#8e8e96). All buttons use {typogra

Do's and Don'ts

**Do**

• Do use primary (#e81c5a) exclusively on CTAs and focus states—never on passive UI or backgrounds.
• Do apply {elevation.md} (0 3px 14px rgba(0, 0, 0, 0.4)) to all cards to ensure they lift off the dark surface.
• Do maintain 24px gutters minimum on mobile and 40px on desktop to prevent content from feeling cramped.
• Do use Majestic Font weight 700+ for headlines and weight 400 for body text to create clear typographic hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) to small labels over busy hero imagery for legibility.
• Do transition all interactive state changes (hover, focus, active) over 0.2–0.3s ease to signal responsiveness.

**Don't**

• Don't use secondary (#adc9eb) or tertiary (#ffe4e1) as primary button colors—they lack the visual punch required for CTAs.
• Don't apply rounded: full (9999px) to cards or buttons; reserve it for badges and pill-shaped UI elements only.
• Don't use box-shadow values lighter than {elevation.sm} (0 1px 5px rgba(0, 0, 0, 0.65))—shadows must be dark enough to separate elements from the #0e0e0e background.
• Don't mix Majestic Font with system fonts in the same component; use Majestic Font for all UI text to maintain brand consistency.
• Don't apply backdrop-filter: blur() to non-hero elements; reserve it for hero cards and modals to avoid visual confusion.
• Don't use pure black (#000000) for text or shadows—always use near-black (#0e0e0e) or dark grays (#1d1d1d, #2e2e2e) to maintain the cohesive dark palette.