Midtrans

Overview

Midtrans is Indonesia's most comprehensive payment gateway, serving businesses of all sizes from startups to enterprises. The design system embodies a "Trust-Driven Minimalism" aesthetic—combining deep navy and vibrant cobalt blues with clean, purposeful white space to convey security, professionalism, and clarity. The UI prioritizes confidence and ease: every interaction feels deliberate, every color choice reinforces the brand's commitment to reliable financial transactions. The emotional response is one of calm assurance: users trust Midtrans to handle their payments seamlessly.

The brand voice is direct, professional, and locally grounded. Midtrans speaks to Indonesian businesses in their language—both literally (Indonesian UI) and tonally (practical, solution-focused, never patronizing). The vocabulary emphasizes partnership ("Bersama Midtrans"), capability ("terlengkap"), and focus ("fokus pada bisnis Anda"). Example sentence in brand voice: "Dengan Midtrans, kelola semua metode pembayaran dari satu dashboard—tidak perlu lagi beralih platform."

Colors

The color system is anchored by a deep, trust-inducing primary blue (#054fbf) used exclusively for call-to-action buttons, interactive states, and key brand moments. This cobalt is paired with a sophisticated navy tertiary (#002855) that grounds the interface and appears in headers, navigation, and the hero background. The secondary green (#68b631) provides a complementary accent for success states, confirmations, and positive feedback—reinforcing the "go" action in payment flows. Surface colors range from pure white (#ffffff) for content areas to soft sky-blue (#f7fcff) for subtle backgrounds, creating visual breathing room. The on-surface text color (#123049) is a near-black navy that maintains legibility while staying true to the brand's cool palette. Usage rules: Primary (#054fbf) is r

Typography

The typography system uses Poppins exclusively, a geometric sans-serif that conveys modernity and approachability while maintaining the professionalism required for fintech. Display (60px, 700 weight) is reserved for hero headlines and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight) is used for hero copy and prominent descriptive text, while Body-md (16px, 400 weight) serves as the default body text across the site. Label-md (14px, 600 weight) is applied to button text and form labels; Label-sm (12px, 500 weight) for helper text and metadata. Letter-spacing ranges from -0.04em on large display text (to tighten the visual impact) to +0.02em on body text (to improve readability). L

Layout

The layout follows a 12-column grid system with a max-width of 1290px, ensuring content remains readable on ultra-wide displays while maintaining focus. The page rhythm is established through consistent use of the spacing scale: lg spacing (40px) separates major sections (hero, features, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The gutter width is 24px, maintaining consistent horizontal padding on all sides. Hero sections use full-width backgrounds with a contained content area, creating visual drama while keeping text legible. Feature cards are arranged in responsive grids (3 columns on desktop, 2 on tablet, 1 on mobile) with md spacing between cards. The container-max-width of 1290px prevents th

Elevation & Depth

Visual hierarchy is achieved through a three-tier shadow system that creates clear depth without relying on color alone. Level 1 (Base/Flat): No shadow; used for inline text, badges, and elements that sit flush with their container. Level 2 (Raised): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to cards, input fields, and standard interactive elements. This subtle shadow lifts elements 4-8px off the page, creating a sense of clickability. Level 3 (Elevated/Modal): box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); used for modals, dropdowns, and floating elements that demand attention. The shad

Shapes

The shape philosophy is "Soft-Technical Precision"—combining rounded corners with geometric clarity to balance approachability with professionalism. Buttons use full rounding (border-radius: 9999px) to signal friendliness and encourage clicks; this pill-shaped form is instantly recognizable and reduces visual friction. Input fields also use full rounding (50% / 9999px) to match button styling and create a cohesive interaction zone. Cards and modals use lg rounding (1rem / 16px), a moderate curve that feels modern without being overly organic. Navigation elements and smaller containers use md r

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (bg: #054fbf, text: white, padding: 10px 24px, height: 44px, border-radius: 9999px) are used for main CTAs like "Daftar Sekarang" and "Log In". On hover, the background transitions to #3860be (200ms ease-in-out) and the shadow elevates from 0 3px 8px to 0 5px 40px. On active/pressed state, the background shifts to #002855 (the tertiary navy) to provide tactile feedback. Secondary buttons (transparent bg, 2px solid #054fbf border, text: #054fbf) are used for alternative actions; on hover, the background becomes #e8eef5 (surface-container-low) without changing the border. All buttons use label-md typography (14px, 600 weight) and must include a 200ms transition on all properties.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use primary blue (#054fbf) exclusively for primary CTAs and interactive states—never dilute it with secondary uses.
• Do maintain 40px (lg spacing) between major sections to create visual breathing room and guide the eye through content hierarchy.
• Do apply 200ms ease-in-out transitions to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use Poppins 600 weight for all labels and button text—this weight conveys action and confidence.
• Do pair full-rounded buttons (border-radius: 9999px) with full-rounded inputs to create a cohesive interaction zone that feels approachable.
• Do use the three-tier shadow system (no shadow, 0 3px 8px, 0 5px 40px) to create clear depth without introducing new colors.
• Do apply the secondary green (#68b631) only to success states, confirmations, and positive feedback—never use it for warnings or errors.

**Don't**

• Don't use colors outside the defined palette—resist the urge to add accent colors or gradients that aren't in the system.
• Don't apply shadows with blur-radius less than 8px; this creates harsh, cheap-looking depth that contradicts the brand's soft aesthetic.
• Don't use border-radius values between 1rem and 1.5rem (e.g., 18px, 20px)—stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain consistency.
• Don't mix font families; Poppins is the only typeface—no fallbacks to system fonts or serif fonts.
• Don't apply transitions longer than 300ms or shorter than 150ms; this range feels responsive without feeling twitchy or sluggish.
• Don't use opacity or transparency to create hierarchy; use the surface-container stack and shadow system instead.
• Don't place primary CTAs in the footer or secondary positions—they belong in the hero, above the fold, and at natural conversion points in the user journey.