Indosat Ooredoo Hutchison

Overview

Indosat Ooredoo Hutchison is Indonesia's premier telecommunications provider, serving millions with cutting-edge 5G connectivity and digital services. The design system embodies "Energetic Minimalism"—a movement that pairs bold, saturated accent colors (particularly the signature magenta #ec008c) with clean, light surfaces and contemporary typography. The brand personality is confident yet approachable: it speaks to innovation without pretension, delivering complex technical capabilities through a visual language that feels modern, accessible, and distinctly Indonesian. The UI evokes a sense of forward momentum and connectivity, with vibrant gradients reserved for hero moments and call-to-action elements. Voice example: "Experience Indonesia's fastest 5G network—built for you, not just for speed."

Colors

The color system centers on a vibrant primary accent (#ec008c, a bold magenta) that appears on all primary CTAs, links, and focus states, commanding attention without overwhelming the interface. This is paired with a secondary teal accent (#32bcad) used for supporting interactive elements and status indicators. The tertiary red (#ed1c24) reinforces urgency and error states. The surface stack is deliberately light and neutral—ranging from #f8f9fa (base surface) through #e0e0e0 (container-high)—to maximize contrast and readability. On-surface text is near-black (#030303), with a mid-gray variant (#4c4c4e) for secondary information. The outline color (#7a7a7b) is used for subtle borders and dividers. Gradients are employed sparingly: hero sections use dark-to-gradient overlays (e.g., #1a1a1a

Typography

The type system uses Indosat (a custom brand typeface) as the primary family, with Jost and Cormorant as supporting serif alternatives for editorial moments. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for section titles and modal headers. Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the reading hierarchy, with consistent 24px and 28px line heights ensuring comfortable scanning. Label-md (14px, 600 weight) is applied to buttons, badges, and form labels with 0.01em letter-spacing for clarity. All text over busy backgrounds or dark overlays receives a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibi

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered with auto margins. Sections use semantic spacing: lg (40px) separates major content blocks, md (24px) divides subsections, and sm (12px) creates breathing room within components. The gutter is fixed at 24px on desktop, collapsing to 16px on mobile. Hero sections span full-width with 40px padding on desktop, creating a contained-yet-expansive feel. Cards and containers use the container-max of 1280px to prevent excessive line lengths. White-space is generous: section padding ranges from 64px (xl) at the top level down to 12px (sm) within component internals. This rhythm creates a sense of calm sophistication, allowing the vibrant accent colors to pop without visual fatigue. The spacing scale is consistently applied via

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering. Level 1 (base surface, #f8f9fa) has no shadow. Level 2 (cards, inputs) uses a soft shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)—barely perceptible but sufficient to separate from the background. Level 3 (modals, elevated cards on hover) applies 0 4px 12px 0 rgba(0, 0, 0, 0.08), creating a gentle lift. Hero sections employ a darker approach: a 1px border at rgba(0, 0, 0, 0.1) combined with a 16px border-radius (#44px on the hero card) creates visual containment. Hover states transition shadows

Shapes

The shape philosophy is "Soft-Technical Modernism"—combining rounded corners with precise geometry to feel both approachable and professional. Buttons and inputs use full-rounded (border-radius: 9999px) to emphasize their interactive nature and soften the interface. Cards and containers use lg (1rem / 16px) for a subtle roundness that avoids the overly-soft appearance of full-radius. Hero sections and featured content use xl (1.5rem / 24px) to create visual distinction and a premium feel. Small UI elements (badges, tags) revert to full-rounded for consistency. The rationale: full-radius on int

Components

Action Elements Primary buttons (#ec008c background, white text, 48px height, 12px 24px padding, full-rounded) are the dominant CTA. On hover, the background darkens to #d8008f with a 200ms transition. Focus states add a 2px ring at rgba(236, 0, 140, 0.1). Secondary buttons use the surface-container-high background (#e0e0e0) with primary text, bordered at 1px solid #aaaaaa, and transition to surface-container-highest on hover. Both button types use label-md typography (14px, 600 weight) and box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1). Links are unstyled by default (primary text color, no underline) but underline on hover with a 200ms transition.

Containers & Surfaces Cards use surface-bright background (#ffffff), 1rem border-radius, 24px padding, and a subtle shadow (0 1px 3px 0 rg

Do's and Don'ts

**Do**

• Do use the primary magenta (#ec008c) exclusively on CTAs, focus states, and active links—it's the brand's signature and should never be diluted.
• Do apply the lg (40px) spacing scale between major sections and the md (24px) scale within subsections to maintain visual rhythm.
• Do use full-rounded (9999px) on all buttons and inputs to signal interactivity; reserve lg (16px) and xl (24px) for cards and containers.
• Do pair dark hero sections (#1a1a1a) with white text and a 0 2px 4px rgba(0, 0, 0, 0.3) text-shadow for legibility over imagery.
• Do transition hover and focus states over 200ms with ease-in-out timing to feel responsive without jarring.

**Don't**

• Don't use the primary magenta on backgrounds, body text, or neutral surfaces—it's an accent, not a canvas color.
• Don't apply shadows exceeding 16px blur radius; the system uses subtle elevation (max 12px) to maintain a clean, contemporary feel.
• Don't mix rounded corner sizes arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to preserve visual consistency.
• Don't place text directly over imagery without a text-shadow or overlay; always apply 0 2px 4px rgba(0, 0, 0, 0.15) minimum.
• Don't use the secondary teal (#32bcad) or tertiary red (#ed1c24) as primary CTAs; reserve them for supporting elements and status indicators.