RMxSociety

Overview

RMxSociety is a collaborative agency for impact-driven organisations, blending CRM excellence with transformative strategy. The design system embodies Cyberpunk Minimalism—a high-contrast aesthetic that pairs deep black (#0a0a0a) with vivid neon accents (#00ff41 lime-green and #ff0055 hot-pink), creating visual urgency and technological sophistication. The UI evokes precision, disruption, and purpose: every element feels intentional, every interaction deliberate. The brand personality is direct, ambitious, and unapologetically bold—speaking to changemakers who reject mediocrity. Voice: declarative, energetic, never corporate. Example sentence: 'We amplify your mission through CRM excellence and transformative strategy—no compromises, no noise.'

Colors

The color palette operates on a cyberpunk-minimalist principle: maximum contrast for maximum clarity. Primary (#00ff41) is the signature neon lime-green, used exclusively for CTAs, active states, accents, and brand-critical interactive elements. It appears in button fills on hover, link underlines, glowing text-shadows (0 0 20px rgba(0, 255, 65, 0.5)), and the top navigation border gradient. Secondary (#ff0055) is hot-pink, reserved for secondary CTAs, error states, and the bottom approach section gradient. Tertiary (#00b8ff) is cyan, used sparingly for accent gradients and supporting visual hierarchy. The surface stack is pure black-to-near-black: surface (#0a0a0a) is the page background, surface-container-lowest (#000000) is the deepest layer, and surface-container-highest (#2a2a2a) is u

Typography

The type system pairs two distinct families: Bebas Neue (all-caps, geometric, 400 weight) for headlines and display, and Rajdhani (monospace-inspired, technical, 400–700 weight) for body and UI text. Display (102px, 0.08em letter-spacing) is reserved for hero H1; Headline-lg (56px, 0.1em) for section titles; Headline-md (40px, 0.08em) for subsections. Body-lg (18px, 0.03em) and Body-md (16px, 0.02em) use Rajdhani at 1.6 line-height for readability over the scanline texture. All headlines are uppercase with aggressive letter-spacing (0.08–0.1em) to reinforce the technical, high-contrast aesthetic. Label-md (14px, 0.1em, 600 weight) is used for button text and navigation links. Apply text-shadow 0 0 20px rgba(0, 255, 65, 0.5) on accent-colored labels (e.g., 'START A CONVERSATION' button) to

Layout

The layout uses a 12-column fluid grid with a max-width of 1600px, centered with 40px gutters on desktop. Hero section spans full viewport (min-height: 100vh) with 10rem top padding and 4rem horizontal padding. Sections use 8rem vertical padding (40px lg spacing) for dramatic rhythm separation. Service cards grid uses auto-fit with minmax(350px, 1fr) and 2.5rem gaps, creating a responsive 3–4 column layout. The approach section (background: #000000) uses a 3-column grid with 3rem gaps and 2.5rem padding per item. Container max-width is 1600px for nav and hero, 1200px for content sections. White-space is generous: 6rem margin between major sections, 5rem between section title and content grid. This creates a 'breathing room' effect that emphasizes the neon accents and prevents visual fatigu

Elevation & Depth

Depth is achieved through layered shadows and glowing effects rather than traditional drop-shadows. Level 1 (Base): the body background (#0a0a0a) with a fixed scanline texture overlay (repeating-linear-gradient 0deg, rgba(0, 255, 65, 0.03) at 2–4px intervals, pointer-events: none). Level 2 (Standard Card): rgba(255, 255, 255, 0.02) background with 2px solid border at #333333, no blur. Level 3 (Elevated/Hover): rgba(0, 255, 65, 0.05) background with box-shadow 0 20px 60px rgba(0, 255, 65, 0.2), creating a glowing halo effect. CTA buttons on hover use box-shadow 0 10px 30px rgba(0, 255, 65, 0.3)

Shapes

The shape philosophy is Geometric Precision: sharp corners dominate, with selective use of clip-path for technical flair. Service cards use clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%) to create a subtle cut-corner effect in the bottom-right, evoking circuit boards and digital precision. Buttons use border-radius: 0px (sharp corners) with 2px borders, emphasizing the technical aesthetic. Input fields use border-radius: 0.5rem (8px) for subtle softness, distinguishing them from buttons. The approach items use border-left: 3px solid at the left edge wit

Components

Action Elements Buttons use a two-state system: default (transparent background, 2px border, neon text) and hover (filled background, glowing shadow). Button-primary has padding 18px 36px, height 56px, border 2px solid #00ff41, color #00ff41, font-weight 700, letter-spacing 0.15em. On hover, background fills to #00ff41, text color inverts to #0a0a0a, box-shadow becomes 0 10px 30px rgba(0, 255, 65, 0.3), and transform translateY(-3px) lifts the button. Transition is all 0.4s ease. Button-secondary mirrors this with #ff0055 (hot-pink) instead of lime. The CTA button uses a pseudo-element ::before (position absolute, top 0, left -100%, width 100%, height 100%, background var(--gradient-1)) that slides in on hover (left 0) over 0.4s ease, creating a fill animation.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use #00ff41 (lime-green) exclusively for primary CTAs, active states, and brand-critical accents—it is the signature neon that commands attention.
• Do apply text-shadow 0 0 20px rgba(0, 255, 65, 0.5) on accent text over dark backgrounds to create the neon glow effect that defines the cyberpunk aesthetic.
• Do maintain sharp corners (border-radius 0px) on buttons and cards to reinforce the geometric precision and technical brand personality.
• Do use Bebas Neue for all headlines with 0.08–0.1em letter-spacing and uppercase text-transform to create the high-contrast, declarative visual voice.
• Do apply box-shadow 0 20px 60px rgba(0, 255, 65, 0.2) on hover states to create a glowing halo effect that signals interactivity without blur.

**Don't**

• Don't use rounded corners (border-radius > 0.5rem) on buttons or primary cards—softness contradicts the cyberpunk-minimalist aesthetic and dilutes brand precision.
• Don't apply blur effects (backdrop-filter: blur) to cards or overlays—the brand uses sharp, glowing shadows instead to maintain clarity and technical edge.
• Don't mix Rajdhani and Bebas Neue weights arbitrarily; reserve Bebas Neue (400 weight only) for headlines and Rajdhani (400–700) for body and UI.
• Don't use secondary colors (#ff0055, #00b8ff) as primary CTAs—#00ff41 is the only neon that should dominate interactive elements.
• Don't add drop-shadows or soft shadows (0 4px 12px rgba(0,0,0,0.08))—use only glowing box-shadows with the primary neon color to maintain the high-contrast cyberpunk aesthetic.