LinkGuard

Overview

LinkGuard is a technical infrastructure service for Indonesian digital publishers and content creators, solving the critical problem of ISP-level domain blocking across major carriers (Telkomsel, Indosat, XL, Smartfren, Trust+/Nawala). The design aesthetic is 'Technical Minimalism with Precision Feedback'—a high-contrast, data-forward interface that prioritizes real-time status visibility and actionable alerts over decorative elements. The UI evokes confidence and control: users see exactly which ISP is blocking, when it happened, and what subdomain is now active. The emotional response is relief—the service removes uncertainty and manual intervention from link availability management.

The brand voice is direct, technical, and solution-oriented. Vocabulary emphasizes automation, real-time detection, and reliability: 'auto-switch', 'real-time Telegram notifications', 'per-ISP detection', 'zero downtime'. The tone avoids hype; instead, it speaks in concrete outcomes. Example sentence in brand voice: 'Telkomsel blocked your link at 14:23 — LinkGuard auto-switched to link2.linkguard.id and notified you on Telegram.'

Colors

The color system is built on a pure black canvas (#000000) with white primary accents (#ffffff), creating maximum contrast for readability and status clarity in a data-dense interface. Primary (#ffffff) is reserved exclusively for call-to-action buttons ('MULAI GRATIS', 'LIHAT CARA KERJA') and high-emphasis text; it commands attention without distraction. Secondary (#2299dd) is the signature accent—used for progress indicators, active status badges, and the tri-color header stripe (blue + darker blue + red), representing the brand's ISP detection capability. The secondary palette includes a lighter variant (#0066b1) for container backgrounds and a darker variant (#1c69d4) for depth layering. Error red (#e22718) and success green (#0fa336) are reserved for ISP status states: AKTIF (active,

Typography

The type system uses Inter exclusively across all weights (300, 400, 500, 700), chosen for its technical neutrality and exceptional screen legibility at both large and small sizes. Display (80px, 700 weight, -0.04em letter-spacing) is reserved for the hero headline 'PANTAU & ALIHKAN LINK ANTI BLOKIR — OTOMATIS', creating a commanding entry point that communicates scale and capability. Headline-lg (40px, 600 weight) is used for section titles ('Cara Kerja', 'Fitur Utama', 'Harga Transparan'), maintaining visual hierarchy without competing with the hero. Body-md (16px, 400 weight, 24px line-height) is the primary reading size for feature descriptions and explanatory copy, optimized for 16px base font size on mobile and desktop. Label-md (14px, 700 weight, 0.01em letter-spacing) is applied to

Layout

The page uses a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop and 16px on mobile (breakpoint at 768px). The hero section spans full width with a 40px lg spacing separator below, creating breathing room before the 'Cara Kerja' section. The status card (showing ISP states) is positioned right-aligned in the hero on desktop (grid columns 7–12) and stacks below the headline on mobile, ensuring the primary CTA buttons remain above the fold. Section spacing follows the lg token (40px) for major section breaks ('Fitur Utama', 'Harga Transparan', 'FAQ'), while internal card spacing uses md (24px). The container maintains a consistent 24px horizontal padding (gutter) on all breakpoints, with the grid collapsing to 1 column below 768px. Whitespace is used strategic

Elevation & Depth

Depth is conveyed through a flat, high-contrast approach with minimal shadows, reflecting the technical and data-forward nature of the product. Level 1 (Base): The black canvas (#000000) with no shadow, establishing the foundation. Level 2 (Standard Cards): Surface-container (#262626) with a 1px solid border at #3c3c3c and a subtle shadow of 0 3px 8px rgba(0,0,0,0.15), used for status cards and feature containers. Level 3 (Elevated/Interactive): Surface-container-high (#3c3c3c) with the same border and a stronger shadow of 0 8px 24px rgba(0,0,0,0.25), applied on hover or for modal overlays. Th

Shapes

The shape philosophy is 'Architectural Precision'—minimal, functional border-radius values that suggest technical sophistication without ornament. Buttons and input fields use 0.5rem (8px) border-radius, a subtle rounding that softens hard edges while maintaining a structured, grid-aligned appearance. Cards and containers use the same 0.5rem default, creating visual consistency across interactive elements. The tri-color header stripe uses 0px radius (sharp edges), emphasizing its role as a technical indicator and brand signature. Badge elements (status indicators like 'AKTIF', 'DIBLOKIR') use

Components

Action Elements Buttons are the primary interaction mechanism and use high contrast to ensure visibility. The primary button (button-primary) has backgroundColor: #ffffff, textColor: #000000, padding: 12px 32px, height: 48px, and border-radius: 8px. On hover (button-primary-hover), the background shifts to #e6e6e6 with a 200ms ease-in-out transition, providing tactile feedback without leaving the white family. The secondary button (button-secondary) uses a transparent background with a 1px solid #ffffff border, textColor: #ffffff, and the same padding and height. On hover, it shifts to backgroundColor: #3c3c3c with the same border, creating a subtle fill effect. Both buttons use label-md typography (14px, 700 weight) to ensure text remains scannable and distinct from body copy.

Co

Do's and Don'ts

**Do**

• Do use the tri-color stripe (#2299dd, #1c69d4, #e22718) prominently in headers and hero sections to signal multi-ISP detection capability and create instant brand recognition.
• Do apply white (#ffffff) exclusively to primary CTAs and high-emphasis text; overuse dilutes its impact and creates visual noise.
• Do use the secondary blue (#2299dd) for all progress indicators, active states, and real-time feedback elements to create a cohesive 'monitoring' visual language.
• Do maintain 24px gutters and 40px section spacing to preserve the grid-based, technical aesthetic and ensure content remains scannable.
• Do use label-md (14px, 700 weight) for all button and badge text to ensure these critical interactive elements remain visually distinct and scannable.

**Don't**

• Don't use rounded corners larger than 8px (0.5rem) on buttons, cards, or inputs; the technical aesthetic requires precision, not softness.
• Don't apply shadows larger than 0 8px 24px rgba(0,0,0,0.25); excessive depth contradicts the flat, data-forward design philosophy.
• Don't mix primary white (#ffffff) with secondary blue (#2299dd) in the same button or interactive element; maintain clear color roles to avoid confusion.
• Don't use the tri-color stripe outside the header and hero sections; its overuse diminishes its brand signature power.
• Don't apply text-shadow or glow effects to body-md or larger text; reserve these effects for small labels (label-sm) and progress indicators to maintain hierarchy and readability.