Indosat Ooredoo Hutchison

Overview

Indosat Ooredoo Hutchison (IOH) is Indonesia's premier digital telecommunications provider, serving millions with cutting-edge connectivity solutions. The design system embodies "Corporate Dynamism"—a fusion of professional clarity and energetic brand presence that reflects the company's role as a digital innovator. The aesthetic is clean, accessible, and purposeful: a bright white canvas anchored by a vivid magenta accent (#ec008c) that commands attention on CTAs and key interactions, paired with warm red (#ed1d25) for secondary emphasis and teal (#32bcad) for tertiary accents. The UI evokes confidence and modernity through generous whitespace, bold typography pairings (Indosat for body/UI, Cormorant for editorial moments), and subtle shadows that create depth without visual noise.

The brand voice is direct, professional, and customer-centric—never corporate-speak, always solution-focused. Indosat speaks in clear, benefit-driven language: "Stay connected to what matters" rather than "leveraging synergistic telecommunications infrastructure." The tone balances authority (we are the market leader) with approachability (we understand your needs). Typography reinforces this: Indosat Sans carries the functional load with clean 400–600 weights, while Cormorant headlines introduce moments of editorial sophistication. Example sentence in brand voice: "Seamless connectivity across Indonesia—because your business doesn't wait for networks."

Colors

The color system is rooted in a high-contrast, light-first philosophy designed for clarity and accessibility across Indonesia's diverse digital landscape. Primary (#ec008c) is the brand's signature magenta—used exclusively on primary CTAs, active states, focus rings, and brand-critical interactive elements. It appears sparingly but decisively, ensuring every use carries weight. Secondary red (#ed1d25) supports error states, alerts, and secondary CTAs where urgency or importance is signaled. Tertiary teal (#32bcad) provides a cool accent for success states, highlights, and supporting UI elements. The surface stack is anchored in pure white (#ffffff) for the main canvas, with a carefully calibrated gray progression: surface-dim (#f9f9f9) for subtle backgrounds, surface-container-low (#f4f4f4

Typography

The type system balances functional clarity with editorial sophistication through a two-font strategy. Indosat (custom corporate typeface) serves as the primary font family for all UI, body copy, and labels—weights 400 (regular), 500 (medium), and 600 (semibold) handle the full spectrum from body text (16px, 400 weight, 24px line-height) to labels (14px, 600 weight, 20px line-height). Cormorant (serif, Google Fonts) is reserved for secondary headlines and editorial moments, introducing visual hierarchy and sophistication at sizes 28px–40px with 500–600 weights. Display text uses Indosat at 60px, 700 weight, with -0.04em letter-spacing to create visual compression and impact. All type is rendered with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale for crisp rende

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with margin-inline: auto. Sections employ a consistent padding rhythm: 16px (md) on mobile, 24px (lg) on tablet, and 40px (xl) on desktop, applied via padding-block and padding-inline. The container hierarchy is semantic: .myPrimaryModule sets max-width: 1280px with padding-block: 128px (16 × 8px) on mobile, scaling to 224px (28 × 8px) on desktop; .myPrimaryContentSection adds padding-inline: 32px (4 × 8px) with padding-bottom: 48px (6 × 8px) on mobile, 64px (8 × 8px) on tablet, 80px (10 × 8px) on desktop. Whitespace is generous and intentional—sections breathe with 40–64px vertical separation, creating visual pauses that guide the eye. The gutter (24px) is used consistently between grid columns and card groups. R

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual clutter while maintaining clear layer separation. Level 1 (Base/Flat): no shadow; used for primary surfaces and the page background. Level 2 (Raised Cards): box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)—a subtle, 1px blur for cards, buttons, and input fields at rest. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08)—applied on card hover and modal overlays, creating a gentle lift. Level 4 (Modal/Overlay): box-shadow: 0 25px 50px -12px rgba(57, 177, 189, 0.5)—a larger, so

Shapes

The shape philosophy is "Approachable Modernism"—rounded corners signal friendliness and accessibility while maintaining a professional edge. Buttons and primary interactive elements use border-radius: 9999px (full pill shape), creating a soft, inviting appearance that encourages interaction. Input fields and secondary containers use border-radius: 1rem (16px), balancing softness with definition. Cards and widget containers use border-radius: 1rem (16px) for consistency with inputs, or 0.75rem (12px) for denser layouts. Tertiary elements (tags, badges, small UI components) use border-radius: 0

Components

Action Elements Buttons are the primary interaction mechanism, with three distinct variants. Primary buttons use background-color: {colors.primary} (#ec008c), color: white, border-radius: 9999px, padding: 12px 24px, height: 48px, and box-shadow: {elevation.sm}. On hover, the background shifts to #d60078 (darker magenta) with a smooth 200ms transition. Focus states add a 4px ring of rgba(236, 0, 140, 0.2) around the button. Secondary buttons use background-color: {colors.surface-container-high} (#e0e0e0), color: {colors.primary}, border: 1px solid {colors.outline-variant}, and the same 9999px radius. On hover, the background becomes {colors.surface-container-highest} with text color shifting to primary. Tertiary (ghost) buttons are transparent with color: {colors.primary} and a 1px bord

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ec008c) exclusively on primary CTAs, active states, and focus rings—never dilute its impact with secondary uses.
• Do maintain a minimum 48px height on all touch targets (buttons, inputs, menu items) to ensure mobile accessibility.
• Do apply generous whitespace (40–64px vertical separation) between sections to create visual breathing room and guide the eye.
• Do use Indosat for all UI and body copy, reserving Cormorant for editorial headlines only—mixing fonts elsewhere creates visual chaos.
• Do apply the full shadow stack (Level 1–4) consistently: flat for base, {elevation.sm} for cards, {elevation.md} for hover, {elevation.lg} for modals.
• Do use border-radius: 9999px on all primary buttons and input fields to signal friendliness and modernity.
• Do test all color combinations against WCAG AA contrast ratios (4.5:1 for body text, 3:1 for UI components).

**Don't**

• Don't use {colors.primary} on secondary elements, backgrounds, or body text—it must remain a rare, high-impact accent.
• Don't mix Indosat and Cormorant in the same paragraph or section; use Cormorant only for standalone headlines.
• Don't apply shadows deeper than {elevation.lg} (0 25px 50px) on standard UI—reserve Level 4 for full-screen modals only.
• Don't use border-radius values other than the defined scale (sm, DEFAULT, md, lg, xl, full)—custom radii break visual consistency.
• Don't reduce padding below 12px (sm) on cards or containers; whitespace is a design feature, not a luxury.
• Don't apply color transitions longer than 200ms; anything slower feels sluggish and breaks the responsive feel.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use {colors.on-surface} (#030303) and {colors.surface} (#ffffff) instead for better contrast and accessibility.