CORE REBIRTH

Overview

CORE REBIRTH is a design system for a premium FiveM server infrastructure studio—a Brazilian technical brand that positions itself as the originator in a market of imitators. The aesthetic is **Architectural Minimalism with Magenta Intensity**: a near-black canvas (#0a0a0d) paired with a single, relentless magenta accent (#df155b) deployed across CTAs, focus states, and brand moments. The UI rejects the card-grid commodity aesthetic common in gaming infrastructure; instead, it adopts a print-design sensibility—1px hairline borders, 45° grid textures, and chamfered corners—that evokes technical precision and editorial authority. The brand personality is confident, direct, and unapologetically technical: it speaks to server owners who understand that CORE systems are the originals, and everything else is a copy. Voice: terse, factual, with occasional swagger. Example: 'Somos o estúdio por trás dos sistemas que o FiveM brasileiro inteiro tenta imitar.' (We are the studio behind the systems that all of Brazilian FiveM tries to imitate.)

Colors

The color system is deliberately constrained to enforce visual dominance. **Primary (#df155b)** is the magenta accent used exclusively on call-to-action buttons, active states, and brand moments—it appears sparingly but with maximum impact. **On-Primary (#ffffff)** ensures text on magenta maintains WCAG AAA contrast (21:1). **Surface (#0a0a0d)** is the near-black base, with a carefully calibrated stack: surface-dim (#070709) for recessed areas, surface-container (#0f1013) for cards and panels, and surface-container-highest (#25262c) for elevated modals. **On-Surface (#ffffff)** is pure white for body text and UI elements. **Secondary (#6c757d)** is a neutral gray used for disabled states, metadata, and tertiary interactions. **Outline (#6c757d)** and **Outline-Variant (#495057)** define 1p

Typography

The type system pairs **Archivo** (variable, wdth 88–118) for all UI and display text with **JetBrains Mono** for code and metadata. Archivo's geometric, technical character reinforces the brand's engineering credibility; its variable width axis allows subtle weight shifts that enhance hierarchy without introducing new font files. **Display (84px, 900 weight, -0.04em tracking)** is reserved for hero headlines like 'A CORE CRIA. O MERCADO COPIA.' **Headline-lg (48px, 700 weight)** anchors section titles. **Body-md (16px, 400 weight, 24px line-height)** is the workhorse for body copy and UI labels. **Label-md (14px, 700 weight, 0.02em tracking)** is applied to button text and small UI labels; the increased tracking (0.02em) adds precision and prevents crowding on small surfaces. All text ove

Layout

The layout system uses a 12-column grid with a max-width of 1560px and a consistent gutter of 24px on desktop (reduced to 16px on tablet, 12px on mobile). The hero section spans full viewport height (100svh) with a 78px fixed header, creating a dramatic first impression. Content sections use lg spacing (40px) for vertical rhythm between major sections, md spacing (24px) for component grouping, and sm spacing (12px) for internal element separation. The 45° grid texture (applied via a pseudo-element with background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.12) 2px, rgba(255,255,255,0.12) 4px)) runs behind the entire page at 12% opacity, creating a technical substrate without overwhelming content. Container max-widths are fluid up to 1560px, then

Elevation & Depth

Depth is achieved through a minimal shadow vocabulary and layered surfaces, not through dramatic drop shadows. **Level 1 (Base)**: the 45° grid texture on #0a0a0d provides the foundational texture. **Level 2 (Cards/Panels)**: surface-container (#0f1013) with a 1px solid border at rgba(255, 255, 255, 0.1) and a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Modals/Popovers)**: surface-container-high (#1a1b20) with a 1px border at rgba(255, 255, 255, 0.18) and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). Hover states on interactive elements elevate to Level 3 shadow (0 8px 24px rgba(

Shapes

The shape philosophy is **Technical Sharpness with Controlled Softness**. Most UI elements use sharp corners (border-radius: 0) or minimal rounding (0.25rem / 4px) to reinforce the technical, architectural aesthetic. **Buttons** use 0.25rem (4px) for a subtle chamfer effect without softness. **Cards and panels** use 0.75rem (12px) to provide visual breathing room while maintaining precision. **Full-width interactive elements** (language selector, ticket button) use 9999px for pill-shaped buttons, creating a visual contrast that draws attention to primary actions. The chamfered corner treatment

Components

Action Elements **Button-Primary** (#df155b, 44px height, 12px 32px padding, 0.25rem radius, label-md typography, 700 weight) is the dominant CTA. On hover, it transitions to primary-container (#ff4d7a) with a 200ms ease-out. On active/press, it darkens to primary-fixed-dim (#df155b) with a 100ms response. All buttons use cursor: pointer and transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1). **Button-Secondary** (transparent background, 1px outline at #495057, on-surface text) is used for secondary actions like 'VER OS SISTEMAS'. On hover, it fills with surface-container-high (#1a1b20) and maintains the outline. **Button-Ghost** (no border, on-surface-variant text, 12px 24px padding) is used for tertiary interactions like language selection; on hover, it gains a surface-

Do's and Don'ts

**Do**

• Do use primary (#df155b) exclusively for CTAs, active states, and brand moments—never dilute it with secondary uses.
• Do apply the 45° grid texture at 12% opacity as a background layer to reinforce the technical, print-design aesthetic.
• Do maintain 1px hairline borders (outline-variant) on cards and panels to create precision without visual weight.
• Do use Archivo's variable width axis (wdth 88–118) to create subtle hierarchy shifts without introducing new font files.
• Do pair sharp corners (0.25rem) on buttons with slightly softer corners (0.75rem) on cards to create visual rhythm.
• Do ensure all text over the grid texture receives text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) for legibility.

**Don't**

• Don't use gradients, blur filters, or glassmorphism—the system relies on opacity layers and borders for depth.
• Don't introduce secondary accent colors; the magenta (#df155b) is the only brand color, and diluting it weakens the system.
• Don't use rounded corners (border-radius > 1rem) on primary buttons or cards—maintain the technical, architectural aesthetic.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadows contradict the minimal, print-design philosophy.
• Don't use system fonts or generic sans-serif fallbacks in the UI—always specify Archivo or JetBrains Mono with proper @font-face declarations.
• Don't animate transitions faster than 150ms or slower than 300ms—maintain the snappy, technical feel without feeling sluggish.