Design Principles

Design Principles

Overview

WEC Design System is built on these core principles, derived from our mobile-first approach and the need to create consistent, accessible, and brand-aligned experiences for Telkomsel products.

1. Mobile-First Approach

We design for mobile first, then enhance for larger screens. This ensures our products work seamlessly for all users, regardless of device.

What This Means

• Base styles target mobile (320px+)
• Progressive enhancement using breakpoints
• Touch-friendly tap targets (minimum 44×44px)
• Optimized for mobile bandwidth and performance

Examples

/* Mobile-first: Base styles for mobile */
.package-card {
  padding: 16px;
  font-size: 14px;
}

/* Enhance for tablet */
@media (min-width: 768px) {
  .package-card {
    padding: 24px;
    font-size: 16px;
  }
}

/* Enhance for desktop */
@media (min-width: 1024px) {
  .package-card {
    padding: 32px;
    font-size: 18px;
  }
}

Checklist

• Does this work on a 320px screen?
• Are touch targets at least 44×44px?
• Is content readable without zooming?
• Does layout adapt to larger screens?

2. Visual Hierarchy

We use size-based and color-based hierarchy to guide users through content. Telkomsel Batik font creates brand moments, while Poppins provides readability.

Size-Based Hierarchy

64px - Hero titles (Poppins Extra Bold)
56px - Page titles (Poppins Bold)
44px - Section titles (Poppins Bold)
32px - Subsection titles (Poppins Medium)
24px - Card titles (Poppins Medium)
18px - Body text (Poppins Regular)
14px - Secondary text (Poppins Regular)
12px - Captions (Poppins Regular)

Color-Based Emphasis

Primary (most emphasis):    #FF0025 (Telkomsel Red)
Secondary:                  #001A41 (Dark Blue)
Tertiary:                   #4E5764 (Grey 100 - body text)
Least emphasis:             #79838D (Grey 50 - secondary text)

Examples

/* Hero section - maximum emphasis */
<h1 className="text-6xl font-bold text-[#001A41]">
  Build Consistent Experiences
</h1>

/* Section title - high emphasis */
<h2 className="text-4xl font-medium text-[#001A41]">
  Choose Your Package
</h2>

/* Body text - normal emphasis */
<p className="text-lg text-[#4E5764]">
  Select from our range of internet packages
</p>

/* Secondary text - low emphasis */
<p className="text-sm text-[#79838D]">
  Starting from Rp 50.000
</p>

3. Brand Consistency

We maintain Telkomsel brand identity through consistent use of colors, typography, and patterns.

Brand Elements

Element	Usage	When to Use
Telkomsel Red	Primary actions, CTAs	Main buttons, links
Dark Blue	Headings, backgrounds	Page titles, headers
Telkomsel Batik	Brand headlines	Hero text, logo
Red Gradient	Special emphasis	Promotional banners

Brand Gradient Usage

/* Primary gradient - CTAs, buttons */
.gradient-primary {
  background: linear-gradient(76.81deg, #B90024 15.71%, #FF0025 68.97%, #FD195E 94.61%);
}

/* Secondary gradient - headers */
.gradient-secondary {
  background: linear-gradient(75.07deg, #001A41 17.5%, #0E336C 105.9%);
}

Checklist

• Are brand colors used correctly?
• Is Telkomsel Batik used for headlines?
• Do CTAs use the primary gradient?
• Does this match existing patterns?

4. Consistent Spacing

We use an 8pt grid system (multiples of 8px) to create visual rhythm and alignment across all components.

Spacing Scale

8px  - Icon gaps, tight spacing
16px - Default spacing, mobile padding
24px - Card padding, section spacing
32px - Large section spacing
40px - XL spacing between sections
64px - Hero section spacing

Common Patterns

/* Button padding */
.button {
  padding: 12px 24px; /* spacing-3 spacing-6 */
}

/* Card padding */
.card {
  padding: 24px; /* spacing-6 - desktop */
}

@media (max-width: 768px) {
  .card {
    padding: 16px; /* spacing-4 - mobile */
  }
}

/* Section margins */
.section + .section {
  margin-top: 40px; /* spacing-10 */
}

5. Accessibility First

Accessibility is not optional. Every design decision must consider users with disabilities.

Accessibility Requirements

• WCAG 2.1 AA compliance minimum
• 4.5:1 contrast ratio for normal text
• Keyboard navigation for all features
• Screen reader support with semantic HTML
• Focus indicators with #0050AE (blue) or #FF0025 (red)

Examples

<!-- Good: Semantic, accessible -->
<button aria-label="Close dialog">
  <CloseIcon />
</button>

<!-- Good: Focus visible -->
<a href="/details" class="link">
  View Details
</a>

<style>
  .link:focus-visible {
    outline: 2px solid #0050AE;
    outline-offset: 2px;
  }
</style>

6. Performance Matters

Fast loading and smooth interactions create better experiences. We optimize for performance without sacrificing quality.

Performance Guidelines

• Lazy load images below the fold
• Optimize images (WebP, proper sizing)
• Minimal JavaScript - only what’s needed
• Smooth animations at 60fps
• Progressive enhancement - content works without JS

Animation Performance

/* Good: GPU-accelerated properties */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Bad: Animates layout-triggering properties */
.card {
  transition: width 0.2s ease; /* Triggers reflow */
}

7. Card Design Pattern

Cards are a primary UI pattern in WEC products. They follow a consistent structure for familiarity.

Card Structure

┌─────────────────────────────────┐
│ [Badge]             [Icon]      │ ← Header (gradient background)
│ ─────────────────────────────── │
│                                 │
│ [Icon] Content Name    Value    │ ← Body (content items)
│ [Icon] Content Name    Value    │
│                                 │
│ [Learn More]                   │ ← Footer
└─────────────────────────────────┘

Card Styling

.package-card {
  border-radius: 20px 20px 0 0; /* Desktop */
  padding: 24px;
  box-shadow: 0 2px 2px rgba(158, 158, 158, 0.2);
}

.package-card-header {
  background: linear-gradient(76.81deg, #B90024, #FF0025, #FD195E);
  padding: 16px 24px;
  border-radius: 20px 20px 0 0;
  color: white;
}

@media (max-width: 768px) {
  .package-card {
    border-radius: 12px 12px 0 0;
    padding: 16px;
  }
}

8. Clear Feedback

Every action has a clear, immediate response. Users should never wonder if something is working.

Feedback Examples

✅ Loading: "Processing payment..."
✅ Success: "Payment successful! Package activated."
✅ Error: "Payment failed. Please try again."
✅ Progress: "Uploading 45%..."
✅ Waiting: "Please wait..."

Loading States

// Good: Clear loading indicator
<button disabled className="flex items-center gap-2">
  <LoaderIcon className="animate-spin" />
  Processing...
</button>

// Good: Skeleton for content loading
<div className="animate-pulse">
  <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
  <div className="h-4 bg-gray-200 rounded w-1/2"></div>
</div>

9. Progressive Disclosure

Show complexity only when needed. Keep interfaces simple and focused on user goals.

Examples

✅ Simple by default:
- "Buy Now" button → Shows payment options after click
- "Learn More" link → Expands details
- "Filter" button → Opens filter panel

❌ Everything visible:
- All payment options shown at once
- All details visible by default
- All filters always visible

10. Indonesian Context

We design for Indonesian users, considering language, culture, and local patterns.

Localization

✅ Currency: Rp 50.000 (not $50)
✅ Phone format: 0812xxxxxxxx (not +62 812...)
✅ Date: 15 Januari 2025 (Indonesian format)
✅ Address: Province, City, District (RT/RW)

Cultural Considerations

✅ Formal but friendly tone
✅ Respectful communication
✅ Clear, direct instructions
✅ Avoid slang or idioms
✅ Consider religious holidays

Applying These Principles

When designing or building:

1. Start with mobile - Design smallest screen first
2. Use existing patterns - Don’t reinvent components
3. Maintain hierarchy - Size and color guide attention
4. Ensure accessibility - Keyboard, screen reader, contrast
5. Test performance - Measure load times and animations
6. Get feedback - Test with real users
7. Iterate - Improve based on data

Decision Framework

When making design decisions, ask:

• Does it work on mobile (320px+)?
• Is it accessible to all users?
• Does it follow our spacing system (8pt grid)?
• Are brand colors and fonts used correctly?
• Is there clear visual hierarchy?
• Does it provide immediate feedback?
• Is it performant (fast loading, smooth animations)?
• Is it culturally appropriate for Indonesian users?

Resources

• Mobile-First Design
• Accessibility Guidelines
• Color System
• Typography
• Spacing