Blibli

Overview

Blibli is Indonesia's premier e-commerce destination, serving millions of shoppers seeking trusted, quality products across categories from electronics to fashion. The design system embodies a philosophy of "Clarity-First Commerce"—a modern, accessible aesthetic that prioritizes user confidence through straightforward navigation, transparent pricing, and reliable transaction flows. The visual language combines a vibrant primary blue (#006dea) with clean whites and neutral grays, creating an environment that feels both professional and approachable. The brand personality is helpful, honest, and efficient: the UI speaks in direct, action-oriented language without unnecessary flourish. Example sentence in brand voice: "Find exactly what you need—fast, secure, and backed by our guarantee."

The design system serves a diverse user base across Indonesia, from first-time online shoppers to power users, necessitating a hierarchy that scales from simple product discovery to complex checkout flows. Every interaction is designed to reduce friction and build trust through consistent, predictable patterns. The aesthetic is deliberately modern-minimal, avoiding skeuomorphism or playful excess in favor of functional elegance: buttons are clear and tappable, forms are scannable, and status information is always visible.

Colors

The Blibli color system is built on a foundation of trust and clarity. Primary (#006dea) is the signature action color—used exclusively for CTAs, links, active states, and brand-critical interactions. This vivid, saturated blue commands attention without aggression, signaling reliability and forward momentum. Secondary (#0056b3) provides a deeper accent for hover states and secondary actions, creating a 2-step depth hierarchy. Tertiary (#ff4646) is reserved for alerts, errors, and urgent status indicators—a warm red that contrasts sharply against the cool primary palette, ensuring critical information never blends into the background. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays: surface-container (#e9ecef) for subtle section separation, surface

Typography

The Roboto type system establishes a clear visual hierarchy across six levels, each calibrated for specific use cases. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements—rarely used but commanding when deployed. Headline-lg (40px, 600 weight) is reserved for page titles and section headers, creating strong visual breaks. Headline-md (28px, 600 weight) serves as subsection headers and card titles, maintaining hierarchy without overwhelming. Title-lg (20px, 600 weight) is the workhorse for component labels, form legends, and list headers. Body-lg (18px, 400 weight) is used for introductory copy and prominent descriptions. Body-md (16px, 400 weight) is the default for body text, product descriptions, and form fields—optimized for readability at 24px lin

Layout

The Blibli layout system uses a 12-column fluid grid with a fixed max-width of 1200px, centered on the viewport. This constraint ensures readability on large screens while maintaining flexibility on mobile. The spacing scale is semantic and hierarchical: unit (8px) is the atomic baseline; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the default gutter between sections and card padding; lg (40px) separates major content blocks; xl (64px) is reserved for hero-to-content transitions. Container padding uses the gutter token (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. Section rhythm follows a 1:1.5:1 pattern—content block, lg spacing, next block—creating visual breathing room without excessive whitespace.

Elevation & Depth

Elevation in Blibli is achieved through a restrained shadow system that conveys depth without visual heaviness. The system uses three levels: sm (0 3px 8px rgba(0, 0, 0, 0.06)) for subtle card elevation and hover states on list items—barely perceptible but sufficient to lift elements 1dp above the surface; md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards, modals, and dropdowns—creating clear separation from the background; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating action buttons, sticky headers, and top-level modals—reserved for the most prominent interactive elements. Shadows are

Shapes

The Blibli shape philosophy is "Soft-Technical"—rounded corners are present but restrained, signaling modernity without sacrificing clarity. The rounded scale progresses from sm (0.25rem / 4px) for small, tightly-grouped elements like badges and small buttons; DEFAULT (0.5rem / 8px) for standard buttons, inputs, and list items—the most-used radius, creating a friendly but professional appearance; md (0.75rem / 12px) for cards and larger containers; lg (1rem / 16px) for modals and elevated surfaces; xl (1.5rem / 24px) for hero sections and feature cards; full (9999px) for pill-shaped buttons an

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict three-variant system. Button-primary uses primary blue (#006dea) background with white text, 44px height, 12px vertical padding, 24px horizontal padding, and DEFAULT (8px) border-radius. On hover, the background shifts to secondary blue (#0056b3) with a 200ms ease-in-out transition. On active/pressed, it darkens further to #003d99. Button-secondary uses a transparent background with primary blue text and a 1px primary blue border, maintaining the same dimensions. On hover, the background fills with primary-container (#e3f2fd) while the border remains primary. Button-ghost is transparent with primary text and no border, used for tertiary actions. On hover, it gains a subtle surface-container-low (#f0f0f0)

Do's and Don'ts

**Do**

• Do use primary (#006dea) exclusively for CTAs, links, and active states—never for passive UI elements or large surface areas.
• Do maintain 44px minimum height for all interactive elements (buttons, inputs, list items) to ensure comfortable touch targets on mobile.
• Do apply md (24px) padding consistently inside cards and containers for visual rhythm and breathing room.
• Do use label-md (14px, 600 weight) for all button text and UI labels to maintain consistent visual hierarchy.
• Do transition all interactive state changes (hover, focus, active) over 200ms with ease-in-out timing for smooth, predictable feedback.
• Do use the full rounded scale (sm through xl) to differentiate component types: buttons use DEFAULT, cards use md, modals use lg.
• Do ensure all text meets WCAG AAA contrast ratios: on-surface (#19222a) at 16:1 against white, on-surface-variant (#6c757d) at 7:1 minimum.

**Don't**

• Don't use secondary (#0056b3) or tertiary (#ff4646) as primary action colors—reserve them for hover states and alerts only.
• Don't apply shadows to buttons; use background-color changes and border adjustments for state feedback instead.
• Don't mix rounded radii within a single component family (e.g., don't use lg radius on some buttons and DEFAULT on others).
• Don't disable buttons visually with opacity or grayed-out states; hide them or replace with explanatory text instead.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds outside of the defined palette—always use the surface and on-surface tokens.
• Don't apply multiple shadows to a single element; use only one shadow level (sm, md, or lg) per component.
• Don't use tertiary (#ff4646) for non-critical information; reserve it exclusively for errors, alerts, and urgent status indicators.