Black Network

Overview

Black Network is a professional FiveM server base platform engineered for developers who demand both technical excellence and visual clarity. The brand embodies Architectural Minimalism—a design philosophy that strips away ornamentation to expose pure function, using a deep navy canvas (#010B12) as the foundation and electric blue accents (#005194, #0066bb) as precision tools for interaction. The emotional response is one of technical confidence: users feel they're working with enterprise-grade infrastructure, not a hobbyist tool. The interface communicates stability through consistent spacing (24px gutters, 8px unit grid), predictable component behavior, and a restrained color palette that never distracts from code and configuration.

The brand voice is direct, professional, and unadorned. Vocabulary favors concrete nouns ("base," "servidor," "projeto") over marketing abstractions. Tone is encouraging but never breathless—the copy assumes the user is technically competent and values their time. Example sentence in brand voice: "Bases FiveM otimizadas, seguras e prontas para crescer, entregando estabilidade e desempenho desde o primeiro dia." The personality is that of a senior engineer who has seen production failures and now builds systems that don't fail.

Colors

The color system is built on a dark-first philosophy where the surface (#010B12) is the dominant, restful state, and accent colors function as precise interactive signals. Primary (#005194) is the signature action color—used exclusively on primary CTAs ("Garanta sua base agora mesmo"), focus states, and key navigation highlights. It is a saturated, cool blue that reads as both technical and trustworthy, never appearing on passive elements. Secondary (#60fad6) is a cyan accent reserved for status indicators, highlights, and secondary interactive states; it provides visual contrast without competing for attention. Tertiary (#fa6086) is a vibrant pink used sparingly for error states, alerts, and tertiary CTAs ("Entrar em contato"). The surface stack manages depth: surface-container (#141820)

Typography

The type system uses Geist (Google Fonts, weights 100–900) as the single typeface family, establishing visual unity across all scales. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; Headline-lg (40px, 700 weight) anchors major sections; Headline-md (28px, 600 weight) structures subsections; Title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and descriptions; Body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, form labels, and navigation items; Label-sm (12px, 500 weight, 0.05em letter-spacing) is used for badges, captions, and helper text. All headlines use negativ

Layout

The layout uses a 12-column grid with a 1400px container max-width, providing ample breathing room on desktop while maintaining focus on content. The page rhythm is built on an 8px unit grid: spacing tokens (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) enforce consistent rhythm. Gutters are 24px (md spacing) on desktop, reducing to 16px on tablet and 12px on mobile. White-space is generous—sections are separated by lg spacing (40px) to create visual rest between major content blocks. Cards and containers use md padding (24px) internally, with sm padding (12px) for nested elements. The hero section occupies the full viewport height (100vh) on desktop, with the headline positioned at 50% from the top and CTAs at 60vh, creating a clear visual hierarchy. Code blocks and technical content u

Elevation & Depth

Depth is conveyed through a restrained shadow and border system rather than color shifts. The base elevation uses no shadow—the surface (#010B12) is the foundation. Level 1 (cards, modals, popovers) applies a 1px solid border at rgba(255, 255, 255, 0.1) and a subtle shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is soft and spread (8px blur, 0px offset) to suggest a light source above and slightly forward. Level 2 (elevated modals, dropdowns) increases the border opacity to rgba(255, 255, 255, 0.2) and applies a slightly larger shadow: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2).

Shapes

The shape system follows Soft-Technical philosophy: rounded corners are used consistently but conservatively, signaling modernity without sacrificing clarity. Buttons use lg rounding (1rem / 16px), creating a friendly but professional appearance; this radius is large enough to feel approachable but not so large as to appear playful. Cards and containers use lg rounding (1rem) for consistency with buttons. Input fields use DEFAULT rounding (0.5rem / 8px), a tighter radius that emphasizes their functional, utilitarian purpose. Navigation items and small interactive elements use md rounding (0.75

Components

Action Elements Buttons are the primary interactive currency. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#005194), textColor: {colors.on-primary} (#fafafa), padding: 18px 24px, height: 48px, rounded: {rounded.lg} (1rem), and no border. On hover (button-primary-hover), the background shifts to {colors.primary-container} (#004080) with a transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) easing. Secondary buttons (button-secondary) use a transparent background with a 1px border at rgba(255, 255, 255, 0.1), padding: 8px 16px, height: 40px, and textColor: {colors.on-surface}. On hover, the background becomes rgba(255, 255, 255, 0.08) and the border brightens to rgba(255, 255, 255, 0.2). Ghost buttons (button-ghost) are fully transparent with no border, used for

Do's and Don'ts

**Do**

• Do use primary (#0051994) exclusively for primary CTAs and focus states—never for passive elements or backgrounds.
• Do apply the 8px unit grid rigorously: all spacing, padding, and margins must be multiples of 8px (4px, 12px, 24px, 40px, 64px).
• Do maintain the 1px border + subtle shadow pattern on all elevated surfaces (cards, modals, dropdowns) to preserve visual hierarchy.
• Do use Geist at consistent weights (700 for headlines, 600 for labels, 400 for body) to avoid visual noise and maintain clarity.
• Do transition all interactive state changes (hover, focus, active) with 250ms cubic-bezier(0.4, 0, 0.2, 1) easing for a unified feel.
• Do constrain content to the 1400px container max-width and use lg spacing (40px) to separate major sections.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels over busy backgrounds (code blocks, gradients) for legibility.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) anywhere in the interface—use #fafafa for light text and #010B12 for dark surfaces.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.25)—deeper shadows break the flat, technical aesthetic.
• Don't mix border-radius values inconsistently; use the defined scale (sm, DEFAULT, md, lg, xl, full) exclusively.
• Don't use secondary (#60fad6) or tertiary (#fa6086) as background colors for large surfaces—reserve them for accents, badges, and status indicators.
• Don't create custom color values outside the defined palette; all colors must reference the token system ({colors.x}).
• Don't use transition durations shorter than 200ms or longer than 300ms—this breaks the snappy, responsive feel.
• Don't apply padding or margin values that aren't multiples of 8px; this breaks the visual rhythm and alignment.