Telkomsel

Overview

Telkomsel is Indonesia's leading telecommunications provider, delivering 5G connectivity and digital services to millions. The brand embodies a "Bold Accessibility" aesthetic—combining energetic, high-contrast visuals with warm, human-centered storytelling. The UI prioritizes clarity and confidence: dark backgrounds (near-black #0a0a0a) amplify the signature red accent (#ed0226), creating a striking, modern interface that feels both premium and approachable. The design language is rooted in Indonesian cultural pride, evident in the custom TelkomselBatikSans typeface that anchors headlines with distinctive character.

Telkomsel's voice is direct, optimistic, and service-oriented. The brand speaks to everyday Indonesians—not with corporate jargon, but with practical, benefit-focused language. Tone examples: "Terbiasa luar biasa bareng 5G" (Get used to extraordinary with 5G) emphasizes lived experience over specs. "Hadirkan pengalaman pelanggan terbaik untuk cipitakan dampak nyata" (Deliver the best customer experience to create real impact) balances ambition with tangible outcomes. The vocabulary favors action verbs and emotional resonance—"melayani" (serve), "nikmati" (enjoy), "terbiasa" (get accustomed to)—creating a sense of partnership rather than transaction.

Colors

The color system is anchored by a bold primary red (#ed0226) that commands attention across CTAs, active states, and brand moments. This red is not decorative—it signals action, urgency, and Telkomsel's market leadership. The primary container (#ff6d4d) provides a lighter, warmer variant for hover states and secondary emphasis, while the inverse primary (#c40025) deepens interaction feedback. The surface stack uses near-black tones (#0a0a0a base, #181c21 container) to maximize contrast and readability, ensuring white text (#ffffff) remains crisp at all sizes. Secondary colors—a deep navy (#001a41) and teal (#064e3b)—support category differentiation and data visualization without competing with the primary red. The outline palette (#757f90 for primary, #6b7280 for variant) provides subtle d

Typography

The type system pairs TelkomselBatikSans—a distinctive, culturally-rooted serif-influenced display font—with Poppins for body and UI text. This pairing creates visual hierarchy through personality rather than weight alone: headlines in TelkomselBatikSans (50px, 700 weight, -0.02em tracking) command presence and brand recognition, while Poppins body text (16px, 400 weight) ensures legibility and accessibility. Display-level text (60px, 700 weight) is reserved for hero moments and major announcements; headline-md (28px, 600 weight) anchors section titles; body-lg (18px, 400 weight) carries narrative copy; label-md (14px, 600 weight) powers buttons and interactive labels. On small labels over busy backgrounds (e.g., badges, search result types), apply text-shadow 0 1px 2px rgba(0,0,0,0.4) to

Layout

The layout system uses a 12-column grid with a max-width of 1440px, maintaining a fluid, responsive structure that adapts from mobile (single column, 16px gutter) to desktop (multi-column, 24px gutter). Container max-widths vary by context: search results max at 860px for focused reading, while hero sections and product grids expand to 1440px. White-space is generous and intentional: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) provides breathing room within components. The spacing scale is semantic—gutter (24px) is the default horizontal padding on containers, unit (8px) is the atomic increment for fine-tuning, and xl (64px) marks major section breaks. Hero sections use full-bleed backgrounds with overlay gradients (rgba(0,0,0

Elevation & Depth

Depth is achieved through layered shadows and strategic use of surface containers rather than heavy drop-shadows. Level 1 (Base): The background is a solid near-black (#0a0a0a) with no shadow, establishing the foundation. Level 2 (Standard Cards): Cards use {elevation.md} (0 4px 12px rgba(0,0,0,0.1)) with a 1px border at rgba(255,255,255,0.1) to create subtle separation from the background. Level 3 (Elevated/Modals): Modals and floating elements use {elevation.lg} (0 16px 40px rgba(0,0,0,0.12)) with a 1px inset border at hsla(0,0%,100%,0.2) to suggest glass-like depth. Search suggestions and d

Shapes

The shape philosophy is "Confident Modernity"—combining sharp, geometric precision with approachable softness. Buttons use full border-radius (9999px) to signal friendliness and accessibility, creating pill-shaped CTAs that feel inviting rather than corporate. Cards and containers use lg radius (1rem / 16px) for a balanced, modern appearance that's neither too sharp nor too rounded. Input fields and search boxes use DEFAULT radius (0.5rem / 8px) for a neutral, functional feel. Badges and small UI elements use full radius (9999px) to create visual distinction and draw attention. The rationale:

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#ed0226) background with {colors.on-primary} (white) text, full border-radius (9999px), 12px vertical padding, 24px horizontal padding, and label-md typography (14px, 600 weight). On hover, the background transitions to {colors.inverse-primary} (#c40025) over 0.2s ease, creating a darker, more intense red that signals interaction. Focus states add a 2px solid outline at {colors.primary} with 2px offset. Secondary buttons use {colors.surface-container-high} background with {colors.on-surface} text, md border-radius (12px), and the same padding/typography as primary. Ghost buttons (used in overlays and hero sections) use rgba(0,0,0,0.3) background with {colors.on-surface} text, full borde

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ed0226) for all primary CTAs, active states, and brand moments—it's the visual anchor that drives user action.
• Do maintain minimum 48px touch targets for all interactive elements (buttons, tabs, links) to ensure mobile accessibility.
• Do apply generous white-space: use lg spacing (40px) between sections, md spacing (24px) within card groups, and sm spacing (12px) for related content.
• Do use TelkomselBatikSans for headlines and display text to reinforce brand identity; reserve Poppins for body, UI labels, and accessibility-critical text.
• Do apply consistent shadow depth: {elevation.md} for cards, {elevation.lg} for modals, and avoid pure-black shadows in favor of semi-transparent rgba(0,0,0,0.1-0.12).
• Do use full border-radius (9999px) exclusively for primary buttons and badges to signal high-priority interactions; use lg radius (16px) for cards and md radius (12px) for secondary containers.

**Don't**

• Don't use the primary red (#ed0226) for body text or low-priority UI elements—reserve it for CTAs and active states to maintain visual hierarchy and reduce cognitive load.
• Don't apply border-radius smaller than 8px (DEFAULT) to interactive elements; sharp corners feel harsh and reduce approachability.
• Don't use shadows darker than rgba(0,0,0,0.12) or blur radii larger than 40px; the design favors subtle, modern depth over dramatic drop-shadows.
• Don't mix TelkomselBatikSans and Poppins at the same size/weight; use TelkomselBatikSans for headlines (28px+) and Poppins for everything else to maintain clear typographic hierarchy.
• Don't set line-height below 1.4x font size for body text; the dark background requires generous leading for readability and accessibility.
• Don't apply padding smaller than 12px (sm) inside cards or containers; the design prioritizes breathing room and visual clarity over density.