Subsidi Tepat

Overview

Subsidi Tepat is a government-administered fuel subsidy enrollment platform that transforms bureaucratic complexity into an approachable, trust-driven interface. The design philosophy centers on 'Institutional Clarity'—a modern interpretation of civic digital design that balances official authority with user accessibility. The brand serves Indonesian citizens seeking to register for subsidized fuel programs, and the UI evokes confidence through a primary blue accent (#228be6) paired with clean white surfaces, organized card hierarchies, and purposeful spacing that guides users through multi-step enrollment flows. The aesthetic is neither corporate nor playful, but rather civic and reassuring: every pixel serves the mission of making government services feel transparent and navigable.

The voice is formal yet approachable, precise yet human. Subsidi Tepat speaks in clear, imperative Indonesian: 'Daftarkan kendaraan Anda,' 'Unduh petunjuk pendaftaran,' 'Kelola akun Anda.' The vocabulary avoids jargon where possible, replacing technical terms with everyday language. Tone is patient and instructional—the platform assumes users may be unfamiliar with digital enrollment and provides step-by-step guidance without condescension. Example sentence in brand voice: 'Untuk dapat membeli BBM bersubsidi, buat akun Subsidi Tepat dan daftarkan kendaraan atau usaha Anda.'

Colors

The color system is anchored in institutional trust and accessibility. Primary (#228be6, a medium-saturation blue) is deployed on all call-to-action buttons, interactive links, and focus states—it signals agency and forward motion without aggression. The primary-container variant (#0f6eb5, a deeper blue) is reserved for hover and active states, providing tactile feedback. Secondary (#fc8338, a warm orange) is used sparingly for alerts, warnings, and status indicators that demand attention; it appears in badge backgrounds and warning boxes to signal caution or important notices. Tertiary (#0f6eb5, matching primary-container) reinforces the blue family for informational elements and secondary CTAs. The surface stack is deliberately light: surface (#f8f9ff) provides a near-white canvas that f

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys modernity while maintaining institutional credibility. The hierarchy is structured around six levels: display (56px, 700 weight) for hero statements and page titles; headline-lg (32px, 600 weight) for section headers and major content divisions; headline-md (28px, 600 weight) for subsection titles; title-lg (20px, 600 weight) for card titles and form labels; body-md (16px, 400 weight) for body copy and descriptions; and label-md (14px, 600 weight) for button text, badges, and interactive elements. Letter-spacing is tightened on display and headline levels (-0.02em to -0.01em) to create visual weight and authority, while body and label levels use default or minimal spacing (0 to 0.01em) for readability. Line-heigh

Layout

The layout system uses a 12-column grid with a max-width of 1024px, centered on the viewport. The page rhythm is built on a two-column split at desktop (left: login/enrollment forms; right: hero carousel and informational cards), collapsing to single-column stacking on mobile (max-width: 599px). Spacing follows a semantic scale: gutter (24px) separates major sections horizontally; lg spacing (40px) creates vertical breathing room between section blocks; md spacing (24px) is used for padding within cards and form groups; sm spacing (12px) separates inline elements like icon + label pairs. The container max-width of 1024px ensures content remains readable on tablets and smaller desktops without excessive line lengths. Hero sections use full-viewport height (100vh) on desktop with absolute po

Elevation & Depth

Depth is conveyed through a three-level shadow system that reinforces the card-based architecture without introducing visual clutter. Level 1 (Base/Surface): no shadow; flat surfaces like the page background (#f8f9ff) and input fields use only a 1px border (color: #d9dee4) to define edges. Level 2 (Standard Card): box-shadow: 0 3px 20px rgba(15, 110, 181, 0.1) creates a soft, blue-tinted shadow that lifts cards 4-8px above the background, signaling interactivity and grouping related content. This shadow is applied to all .card elements, action buttons, and alert boxes. Level 3 (Elevated/Modal)

Shapes

The shape language is 'Civic Geometry'—a balance between sharp institutional edges and approachable softness. Buttons use 4px border-radius (0.5rem), a subtle rounding that feels modern without sacrificing formality; this applies to all interactive elements including input fields, badges, and alert boxes. Cards use 12px border-radius (1rem), creating a more pronounced softness that signals content containers and encourages visual grouping. Icon wrappers and circular badges use 50% border-radius (full) to create perfect circles, emphasizing their role as visual anchors and status indicators. Th

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 40px height with 12px vertical and 18px horizontal padding. Primary buttons (#228be6 background, white text, label-md typography) are used for forward-moving actions ('Daftar Akun Baru,' 'Masuk ke Akun'). On hover, the background shifts to #0f6eb5 (primary-container) with a 120ms ease-out transition, providing immediate tactile feedback. Secondary buttons use a transparent background with a 1px primary-colored border and primary text color, reserved for alternative actions or cancellations. All buttons include box-shadow: 0 3px 20px rgba(15, 110, 181, 0.1) to lift them from the surface and signal clickability. Focus state applies a 3px outline in primary color with 4px offset, ensuring keyboard navigatio

Do's and Don'ts

**Do**

• Do use primary blue (#228be6) exclusively for forward-moving CTAs and interactive elements—it signals trust and agency in a government context.
• Do maintain 24px padding inside cards and 40px spacing between major sections to create breathing room that reduces cognitive load.
• Do apply the Level 2 shadow (0 3px 20px rgba(15, 110, 181, 0.1)) consistently to all cards and buttons to reinforce the card-based hierarchy.
• Do use Poppins 600 weight for all interactive text (buttons, labels, links) to create instant visual distinction from body copy.
• Do test all interactive elements with keyboard navigation and screen readers—accessibility is a civic responsibility, not an afterthought.

**Don't**

• Don't use secondary orange (#fc8338) for primary CTAs—reserve it exclusively for warnings and alerts to maintain color semantics.
• Don't exceed 12px border-radius on cards or buttons; excessive rounding undermines the institutional credibility the platform requires.
• Don't apply shadows with blur values exceeding 20px or spread values exceeding 8px—the interface should feel grounded, not floating.
• Don't mix typefaces; Poppins is the sole font family across all text elements, ensuring visual cohesion and reducing cognitive friction.
• Don't use color alone to communicate state (e.g., error vs. success)—always pair color with icons, text labels, or borders to ensure accessibility for color-blind users.