RXLABS

Overview

RXLABS is an Australian software studio specializing in custom web applications, mobile apps, and e-commerce platforms. The brand embodies a 'Precision Maximalism' aesthetic—a deliberate fusion of deep, atmospheric dark surfaces with vivid neon accents that command attention without overwhelming. The design language evokes the energy of a high-performance engineering studio: sophisticated, direct, and unapologetically bold. The UI creates visual hierarchy through strategic use of the primary magenta accent (#e91e63) layered over deep purple-black surfaces (#0a0011, #140820), generating a sense of depth and forward momentum. The emotional response is one of confidence and technical mastery—users feel they're engaging with a serious, capable team.

The brand voice is conversational yet authoritative, avoiding corporate jargon in favor of plain language. Tone patterns include directness ('Build it properly, or don't build it at all'), specificity ('Senior engineers, direct communication, fair pricing'), and a touch of personality ('Small team, limited availability, full commitment'). The vocabulary favors action verbs and concrete outcomes over abstract promises. Example sentence in brand voice: 'We handle everything from design to deployment—no handoffs, no miscommunication.'

Colors

The RXLABS color system is built on a dark, immersive foundation that positions the brand's signature magenta accent as the primary interactive element. The surface stack descends from #0a0011 (surface, the deepest void) through #140820 (surface-container, the primary working plane) to #251540 (surface-container-highest, reserved for elevated modals and overlays). This gradient creates visual separation without relying on brightness alone; instead, it uses saturation and hue shifts to guide the eye. Primary (#e91e63) is the brand's signature call-to-action color—applied to all CTAs, focus states, and accent highlights. It is never used for body text or backgrounds. Secondary (#9c27b0, a deeper purple) provides supporting accent weight for gradients and secondary interactive states. Tertiar

Typography

The type system pairs Syne (a geometric, high-contrast display font) for headlines and Outfit (a humanist sans-serif) for body text, creating a visual tension that mirrors the brand's precision-meets-personality positioning. Syne is used exclusively at display (80px, 800 weight, -0.03em letter-spacing) and headline scales (48px down to 20px), where its bold geometry commands attention and establishes hierarchy. The display size uses a tight line-height of 84px (1.05x) to compress vertical space and increase visual impact. Outfit handles all body and label text at 16px–18px with 400 weight for primary content and 500–600 weight for labels and secondary CTAs. Body text maintains a generous 1.75 line-height (28px at 16px base) to ensure readability over the dark background and complex gradien

Layout

The layout operates on a 12-column grid with a max-width of 1200px, centered with 24px gutters on desktop and fluid margins on mobile. The page rhythm is built around generous vertical spacing: sections are separated by 64px (lg spacing) on desktop, collapsing to 40px on tablet. The hero section spans full viewport height (100vh) with 100px top padding to account for the fixed navbar, creating a dramatic entry point. Content containers use 24px internal padding (md spacing) for cards and 40px (lg spacing) for section separation. The grid system is asymmetric in the services section (6-column grid with 2-column card spans), creating visual interest and guiding focus to featured services. White-space is used strategically: the hero has minimal text (max-width: 560px for body copy, centered)

Elevation & Depth

Depth in RXLABS is achieved through a layered glassmorphism approach combined with strategic use of the accent color in shadows. The elevation model consists of three primary levels: Level 1 (Base) is the deep background gradient with animated particles (rgba(233, 30, 99, 0.06) radial gradient at 40% opacity). Level 2 (Standard Cards/Surfaces) uses a 1px border at rgba(240, 237, 245, 0.06) with a subtle box-shadow: 0 4px 20px rgba(233, 30, 99, 0.25), creating a soft magenta glow that ties the element to the brand. Level 3 (Elevated/Modals) increases the shadow to 0 8px 30px rgba(233, 30, 99, 0

Shapes

The shape language follows 'Geometric Precision'—a philosophy that favors sharp, intentional radii over organic curves, reinforcing the brand's technical competence. Buttons and CTAs use the full radius (9999px / border-radius: 50%), creating pill-shaped forms that feel modern and approachable while maintaining geometric clarity. Cards and surface containers use md (0.75rem / 12px) for standard cards and lg (1rem / 16px) for elevated surfaces, providing subtle rounding that softens the dark aesthetic without compromising legibility. Input fields use DEFAULT (0.5rem / 8px) for a more restrained

Components

Action Elements Buttons are the primary interactive component and come in two variants: button-primary and button-secondary. The primary button uses a linear gradient background (135deg, #e91e63 to #9c27b0), white text, 10px vertical / 24px horizontal padding, and a 44px height. The shadow is 0 4px 20px rgba(233, 30, 99, 0.25). On hover, the button translates up 3px (transform: translateY(-3px)) and the shadow expands to 0 8px 30px rgba(233, 30, 99, 0.4), creating a lifting effect. The secondary button has a transparent background with rgba(240, 237, 245, 0.04), a 1px border at rgba(240, 237, 245, 0.1), and 15px vertical / 30px horizontal padding. On hover, the background increases to rgba(240, 237, 245, 0.08), the border shifts to rgba(233, 30, 99, 0.25), and the button translates up

Do's and Don'ts

**Do**

• Do use the primary accent (#e91e63) exclusively for interactive elements, CTAs, and focus states—never for body text or large background areas.
• Do maintain the dark surface hierarchy (surface → surface-container → surface-container-highest) to create visual depth without relying on brightness alone.
• Do pair Syne headlines with Outfit body text to create visual tension that reinforces the brand's precision-meets-personality positioning.
• Do apply the 135deg gradient (magenta to purple) to text, buttons, and accent borders to create a consistent branded visual signature.
• Do use the accent color in shadows (0 4px 20px rgba(233, 30, 99, 0.25)) to tie elevation to the brand identity.
• Do keep button padding at 10px vertical / 24px horizontal for primary CTAs and 15px vertical / 30px horizontal for secondary buttons to maintain visual hierarchy.

**Don't**

• Don't use the primary accent for body text, backgrounds, or large surface areas—reserve it for interactive elements and focus states only.
• Don't apply border-radius values smaller than sm (4px) to interactive elements; maintain geometric precision with md (12px) or full (50%) radii.
• Don't mix Syne and Outfit weights arbitrarily; use Syne exclusively for headlines (display, headline-lg, headline-md, title-lg) and Outfit for all body and label text.
• Don't use neutral grays or near-black text on the dark background; always use #f0edf5 (on-surface) or rgba(240, 237, 245, 0.65) (on-surface-variant) for legibility.
• Don't apply shadows without the accent color tint; all elevation shadows must use rgba(233, 30, 99, X) to maintain brand cohesion.
• Don't exceed a 1200px container max-width on desktop; maintain visual cohesion and prevent the design from stretching excessively on ultra-wide displays.