RL Radius

Overview

RL Radius is a professional cloud-based billing and RADIUS server platform designed for ISPs and community networks (RT/RW Net) across Indonesia. The brand embodies a "Technical Clarity" aesthetic—combining the precision of enterprise software with the accessibility of modern SaaS design. The interface prioritizes information density and operational efficiency, using a clean white canvas with strategic accent colors to guide users through complex billing workflows. The emotional response is one of confidence and control: users feel empowered to manage multi-router networks, automate billing cycles, and track revenue in real time.

The voice is direct, professional, and solution-oriented. RL Radius speaks to network administrators and ISP operators in their language—referencing MikroTik, PPPoE, RADIUS protocols, and cloud infrastructure without condescension. The tone avoids marketing hyperbole; instead, it emphasizes reliability, automation, and cost-effectiveness. Example sentence in brand voice: "Satu aplikasi untuk banyak MikroTik—klien Anda terhubung dengan 1 akun dari mana saja, asalkan router sudah tersambung ke server Cloud RL Radius."

Colors

The color system is rooted in a "Professional Minimalism" philosophy: a neutral white surface (#ffffff) serves as the primary canvas, allowing interactive elements and data visualizations to command attention. The primary accent color is a vibrant, tech-forward blue (#4154f1), used exclusively on call-to-action buttons, active states, and key navigation elements. This blue is never used for body text or backgrounds—it is reserved for moments of user action and system feedback. Secondary accent green (#4dc247) appears in success states, active subscriptions, and positive metrics (e.g., "100% Gratis Support"). Tertiary yellow-green (#a8ce50) is used sparingly for highlights and supporting information.

The surface stack follows Material 3 conventions: surface-container (#e9ecef) is used for

Typography

The type system pairs Nunito (headlines, navigation) with Open Sans (body, UI labels), creating a hierarchy that balances personality with legibility. Nunito's rounded letterforms convey approachability and modernity, while Open Sans provides neutral, highly readable body text at 16px baseline. Display-level text (60px, 700 weight) is reserved for hero headlines and major section titles; headline-lg (44px, 700 weight) anchors page sections; headline-md (28px, 600 weight) introduces feature groups. Body text uses 16px Open Sans at 400 weight with 24px line-height, ensuring comfortable reading at typical screen distances. Labels and UI text use 14px Open Sans at 600 weight with 0.01em letter-spacing to maintain crispness at smaller sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on s

Layout

The layout follows a 12-column fluid grid with a max-width container of 1280px, allowing the design to scale gracefully from mobile (single column) to desktop (multi-column). The page rhythm is driven by semantic spacing: section separation uses lg spacing (40px), card-to-card gaps use md spacing (24px), and internal padding within components uses sm spacing (12px). The hero section occupies 100% viewport width with a 50/50 split between text content (left) and product imagery (right) on desktop, collapsing to single-column on mobile. White space is generous but purposeful—never exceeding 64px (xl spacing) between major sections to maintain visual cohesion. The gutter (24px) is applied consistently to all container edges, creating a breathing room that prevents content from feeling cramped

Elevation & Depth

Depth in RL Radius is achieved through subtle shadow layering and strategic use of background color shifts, avoiding the flat aesthetic while maintaining clarity. Level 1 (Base): the white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Inputs): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with 1px solid #d0d0d0 border, creating a gentle lift from the base. Level 3 (Modals, Dropdowns, Hover States): 0 8px 24px rgba(0, 0, 0, 0.12) shadow, indicating the highest interactive layer. Hover states on cards transition from Level 2 to Level 3 shadow over 200ms ease-i

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the balance between approachability and professional precision. Buttons use 0.75rem (12px) border-radius, creating a slightly rounded rectangle that feels modern without appearing playful. Cards and containers use 0.5rem (8px) border-radius, maintaining visual consistency while allowing for dense information layouts. Input fields use 0.375rem (6px) border-radius, a tighter curve that emphasizes their functional role. Dropdown panels and modals use 0.75rem (12px) to match button styling, creating vis

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use #4154f1 background with white text, 14px Open Sans 600 weight, 14px vertical padding + 32px horizontal padding, and 0.75rem border-radius. On hover, the background darkens to #3a47d9 and shadow elevates from 0 3px 8px to 0 8px 24px over 200ms. Active/pressed state uses #2d3aa8. Secondary buttons are transparent with a 2px solid #4154f1 border, same padding and radius, with the same hover behavior (background becomes #e8ecff). All buttons include a 200ms ease-in-out transition on background-color and box-shadow.

Containers & Surfaces Cards are the primary content container, using white background (#ffffff) with 1px solid #d0d0d0 border, 0.5rem border-radius, and 24px padding. At rest, cards cast 0

Do's and Don'ts

**Do**

• Do use the primary blue (#4154f1) exclusively on interactive elements—buttons, links, focus states—never on backgrounds or body text.
• Do maintain consistent 24px gutter spacing on all container edges and 24px gaps between major sections to create visual rhythm.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes (background, shadow, border color) for smooth, professional feedback.
• Do use Nunito for all headings and navigation to establish hierarchy; reserve Open Sans for body text and UI labels.
• Do layer shadows according to the three-level elevation system: Level 2 (0 3px 8px) for cards at rest, Level 3 (0 8px 24px) for hover and modals.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use #4a5568 (on-surface) for body text and #1a1a1a for high-contrast headings.
• Don't apply the primary blue to backgrounds, disabled states, or non-interactive elements; reserve it for CTAs and active states only.
• Don't exceed 64px (xl spacing) between major sections; maintain visual cohesion by keeping white space purposeful and bounded.
• Don't mix border-radius values inconsistently; follow the graduated scale (6px for inputs, 8px for cards, 12px for buttons) to maintain visual coherence.
• Don't use the secondary green (#4dc247) or tertiary yellow (#a8ce50) as primary accent colors; they are supporting colors for success states and highlights only.