RemotAja

Overview

RemotAja is a B2B SaaS platform serving Indonesian schools and SMEs, enabling secure remote access to critical systems (Dapodik, e-Rapor, Mikrotik, CCTV) without requiring on-site presence. The design aesthetic is 'Technical Clarity with Human Warmth'—a light-mode-first system that prioritizes legibility and trust over visual drama, using cyan (#38bdf8) as the signature accent to signal security, reliability, and digital connectivity. The UI evokes the feeling of a well-lit, organized control room: clean surfaces, precise typography, and strategic use of color to guide attention to actionable elements. The brand personality is reassuring, competent, and unpretentious—speaking directly to non-technical school administrators and IT coordinators. Example sentence: 'Your Dapodik syncs from home in 10 minutes; we handle the setup via WhatsApp, you handle the rest.'

Colors

The color system balances a neutral, professional light foundation (surface #f5f5f5, on-surface #111111) with a vibrant cyan primary (#38bdf8) that appears on all CTAs, links, and interactive focus states. Primary (#38bdf8) is used exclusively for high-confidence actions ('Mulai Sekarang', 'Konsultasi Gratis') and receives a 0 0 24px rgba(56,189,248,0.2) glow shadow to reinforce its interactive nature. Secondary (#2dd4bf, teal) supports accent highlights and status indicators—particularly in data visualization and success states. Tertiary (#8b5cf6, purple) is reserved for premium tier badges and advanced feature callouts. Error (#f87171, red) appears in pain-point cards and validation states. The surface stack uses a tight grayscale progression (surface #f5f5f5 → surface-dim #e8e8e8 → surf

Typography

The type system uses Inter exclusively across all weights (400, 600, 700, 900), establishing a modern, neutral voice that reads equally well on mobile and desktop. Display (64px, 900 weight, -0.04em tracking) anchors hero sections with maximum impact; headline-lg (40px, 700 weight) breaks major sections; headline-md (28px, 700 weight) introduces subsections; title-lg (20px, 700 weight) labels cards and feature blocks. Body-lg (18px, 400 weight, 28px line-height) carries hero copy and testimonials; body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) labels form inputs and button text; label-sm (12px, 600 weight, 0.05em tracking) is reserved for badges, captions, and metadata. All headlines use -0.02em to -0.04em negative l

Layout

The layout uses a 12-column grid with a max-width of 1024px, centered with symmetric padding (clamp(1.25rem, 5%, 4rem) horizontally). Sections use a vertical rhythm of clamp(48px, 8vw, 88px) padding to scale fluidly from mobile to desktop without jarring jumps. The hero section receives an additional top padding of var(--hero-pt, 127px) to account for fixed navigation (66px) and promo bar (37px), ensuring content never hides behind chrome. Spacing tokens follow an 8px base unit: xs (4px) for micro-spacing, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, xl (64px) for full-width breathing room. Cards and feature blocks use md (24px) internal padding with 16–18px gaps between grid items. The container-max of 1024px ensures text never ex

Elevation & Depth

Depth is conveyed through a restrained shadow and border system rather than color shifts. Level 1 (Base): surface #f5f5f5 with no shadow; used for body background and neutral containers. Level 2 (Standard Card): surface-bright #ffffff with 1px border rgba(0,0,0,0.07) and elevation-sm shadow (0 1px 2px rgba(0,0,0,0.06)); used for cards, inputs, and standard containers. Level 3 (Elevated/Hover): surface-bright #ffffff with 1px border rgba(0,0,0,0.1) and elevation-md shadow (0 4px 12px rgba(0,0,0,0.08)); triggered on card hover or modal open. Level 4 (Maximum Emphasis): primary CTAs receive a cus

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners signal friendliness and modernity while maintaining enough angularity to feel professional and trustworthy. Buttons use rounded-lg (18px) for a soft, inviting appearance; inputs use rounded-DEFAULT (8px) for a tighter, more technical feel; cards use rounded-lg (18px) to match buttons and create visual cohesion. Feature cards and comparison tables use rounded-md (12px) as a middle ground. The promo bar and hero section use rounded-lg (18px) at corners to soften the top-level chrome. Badges and status indicators use rounded-full (9

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (.btn-primary) use a linear gradient (135deg, #38bdf8 → #2dd4bf) with white text, 12px 28px padding, 48px height, and rounded-lg (18px). The glow shadow (0 0 24px rgba(56,189,248,0.2)) is applied at rest; on hover, the button translates -2px and the shadow expands to 0 6px 32px rgba(56,189,248,0.35) with a 200ms ease transition. Secondary buttons (.btn-secondary) use transparent background with primary text (#38bdf8), a 1px border at rgba(56,189,248,0.16), and rounded-full (9999px) for a pill shape. On hover, the background becomes rgba(56,189,248,0.05) and the border strengthens to rgba(56,189,248,0.3). WhatsApp buttons (.btn-wa) use a green gradient (135deg, #25D366 → #128C7E) with the same shadow and hover

Do's and Don'ts

**Do**

• Do use primary (#38bdf8) exclusively for CTAs, links, and focus states—never for body text or backgrounds.
• Do maintain the 8px spacing grid rigorously; use spacing tokens (sm, md, lg, xl) rather than arbitrary pixel values.
• Do apply elevation-md shadow (0 4px 12px rgba(0,0,0,0.08)) on card hover to signal interactivity without changing background color.
• Do use Inter 700 weight for all headlines and 600 weight for labels; never mix weights within a single typographic role.
• Do include a 44px minimum touch target height on all interactive elements (buttons, inputs, list items).
• Do apply -0.02em to -0.04em negative letter-spacing on display and headline text to improve scannability.

**Don't**

• Don't use secondary (#2dd4bf) or tertiary (#8b5cf6) as primary button backgrounds; reserve them for accents and status indicators.
• Don't apply shadows to text; use text-shadow: 0 1px 2px rgba(0,0,0,0.08) only on small labels over busy backgrounds.
• Don't exceed 1024px container width; content wider than this reduces readability and breaks the visual hierarchy.
• Don't mix rounded-full (9999px) with rounded-lg (18px) on the same component; choose one radius scale and stick to it.
• Don't use the surface-container stack (surface-container-low through surface-container-highest) for primary interactive elements; reserve it for secondary containers and hover states.
• Don't animate color changes directly; use box-shadow and transform transitions (200ms ease) instead to feel responsive without jarring.