Thug Studios

Overview

Thug Studios is a premium FiveM scripts marketplace serving gaming communities with high-performance roleplay and PVP solutions. The design language embraces **Dark Techno-Gaming Minimalism**—a bold aesthetic that combines deep blacks (#0c0c0c), electric blue accents (#a4beff), and surgical white typography to create an interface that feels both premium and immediately trustworthy. The visual hierarchy is aggressive and uncompromising: the primary accent blue appears only on the most critical CTAs ("Explore Scripts," "Discord"), while the body copy remains cool gray (#9f9fa9) to reduce eye strain during extended browsing. The emotional response is one of confidence and exclusivity—users feel they're accessing insider tools, not commodity software.

The brand voice is direct, performance-obsessed, and community-first. Vocabulary patterns emphasize speed ("Instant Delivery"), quality ("Premium quality, zero compromises"), and support ("Lightning-fast support"). Tone is never corporate or flowery; it's peer-to-peer, speaking to server admins and developers as equals. Example sentence in brand voice: "Scripts built with exceptional attention to detail. Featuring the most advanced systems and best UIs for a unique gaming experience."

Colors

The color system is built on a **high-contrast dark foundation** with a single, dominant accent. Surface (#0c0c0c) serves as the immovable base—it's pure gaming-dark, reducing eye fatigue and making the accent pop. The surface stack progresses through carefully calibrated grays: surface-container-low (#0a0a0f) for subtle depth, surface-container (#131318) for mid-tier cards, and surface-container-high (#1f1f26) for interactive hover states. This progression is critical: each step is exactly 10–12% lighter, creating visual rhythm without breaking the dark aesthetic.

Primary (#a4beff) is the electric blue accent—used exclusively on primary CTAs, active navigation states, and focus rings. It appears at 100% opacity on buttons ("Explore Scripts") and at reduced opacity (8–12% rgba) for hover

Typography

The type system pairs **Maison Neue** (headlines, display) with **Inter** (body, labels), creating a visual split between brand personality and functional clarity. Maison Neue at 800 weight and -0.04em letter-spacing conveys premium gaming culture—it's bold without being aggressive, distinctive without being trendy. Headlines use 48–60px sizes with tight line-height (56–68px) to create compact, punchy blocks of text. Inter at 400 weight and 0em letter-spacing provides neutral, highly legible body copy at 16–18px. The label system uses 12–14px sizes with 0.01–0.05em tracking to add micro-hierarchy to CTAs and badges. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (12px) when they appear over gradient backgrounds or hero imagery to maintain 4.5:1 contrast. Use font-weight 600

Layout

The layout uses a **12-column fluid grid** with a max-width of 1540px, centered with auto margins. Horizontal padding scales with viewport: 16px on mobile (< 640px), 24px on tablet (640–1024px), and 40px on desktop (> 1024px). The hero section spans full-width with a radial gradient overlay (radial-gradient(60% 40% at 50% 0%, rgba(164, 190, 255, 0.12) 0%, rgba(164, 190, 255, 0) 100%)) that subtly reinforces the primary accent without overwhelming content. Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections. Cards and containers use md padding (24px) internally, with gutter spacing (24px) between adjacent elements. The grid is responsive: 1 column on mobile, 2 columns on tablet, 3 columns on desktop. Container queries are not used; breakpoints ar

Elevation & Depth

Depth is conveyed through **layered shadows and subtle borders** rather than bright highlights. Level 1 (Base): no shadow, surface color only. Level 2 (Standard Card): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), 1px solid border at rgba(255, 255, 255, 0.05). Level 3 (Elevated/Modals): box-shadow 0 8px 24px rgba(0, 0, 0, 0.3), 1px solid border at rgba(255, 255, 255, 0.1). Hover states on cards transition the shadow from Level 2 to Level 3 over 200ms (cubic-bezier(0.4, 0, 0.2, 1)). Focus rings use a 3px spread at rgba(164, 190, 255, 0.1) with no blur, creating a sharp, technical appearance. Dropdo

Shapes

The shape philosophy is **Geometric Precision**—rounded corners are used sparingly and consistently to signal interactivity without softening the technical aesthetic. Buttons and inputs use 8px (md) border-radius, creating a subtle roundness that feels modern without being playful. Cards use 12px (lg) border-radius for slightly more breathing room. Modals and dropdowns use 16px (xl) border-radius to emphasize their elevated status. Full-radius (9999px) is reserved exclusively for badges and pill-shaped elements. The rationale: sharp corners (0px) would feel cold and corporate; excessive roundi

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#a4beff) background with {colors.on-primary} (#0c0c0c) text, 12px vertical padding, 24px horizontal padding, and 8px border-radius. On hover, the background transitions to {colors.primary-fixed-dim} (#a4beff at 90% opacity) over 150ms. On active/pressed, apply box-shadow inset 0 2px 4px rgba(0, 0, 0, 0.2). Secondary buttons use transparent background with a 1px border at {colors.primary}, text color {colors.primary}, and the same padding/radius. On hover, background becomes rgba(164, 190, 255, 0.08). Ghost buttons use rgba(255, 255, 255, 0.05) background with {colors.on-surface} text; on hover, background becomes rgba(255, 255, 255, 0.1). All buttons use {typography.label-md} (14px, 600 w

Do's and Don'ts

**Do**

• Do use {colors.primary} (#a4beff) exclusively on primary CTAs and active states—never on passive elements or backgrounds.
• Do maintain at least 15:1 contrast between {colors.on-surface} (#ededed) and {colors.surface} (#0c0c0c) for all body text.
• Do apply {elevation.lg} (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive cards to signal clickability.
• Do use Maison Neue at 800 weight for all headlines; Inter at 400 weight for all body copy.
• Do transition all color and shadow changes over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, premium feel.

**Don't**

• Don't use {colors.primary} on non-interactive elements or as a background fill—it must remain the accent of last resort.
• Don't apply border-radius greater than 16px except for full-radius badges; excessive rounding undermines technical positioning.
• Don't use system fonts or generic sans-serif; always load Inter and Maison Neue via @font-face or Google Fonts.
• Don't mix shadows—use only {elevation.sm}, {elevation.md}, or {elevation.lg}; custom shadows break the system.
• Don't reduce contrast below 7:1 for any interactive element; gaming audiences expect clarity and accessibility.