Jiwa Group

Overview

Jiwa Group is an Indonesian conglomerate operating a diverse portfolio of consumer brands in food & beverage, logistics, and lifestyle sectors. The brand identity embodies 'Energetic Maximalism'—a design philosophy that celebrates bold, saturated color blocking, confident typography, and dynamic visual storytelling. The aesthetic rejects minimalism in favor of vibrant, high-contrast compositions that command attention and convey entrepreneurial energy. The UI evokes a sense of movement, accessibility, and modern Indonesian entrepreneurship. Voice: direct, optimistic, and action-oriented. The brand speaks in imperative, present-tense language that emphasizes opportunity and motion. Example: 'Sejuta Jiwa—coffee on the move, made for the groove.'

Colors

The color system is built on three primary pillars: a vivid coral-red primary (#ff5052) that dominates CTAs and hero sections, a bright sky-blue secondary (#3897f0) for supporting interactive elements and data visualization, and a lime-green tertiary (#d4e735) for accent highlights and status indicators. Primary (#ff5052) is used exclusively for call-to-action buttons, active states, hero banners, and brand-critical interactive elements—it appears in 29% of observed color frequency, signaling its role as the brand's signature accent. Secondary (#3897f0) supports navigation, secondary buttons, and informational highlights. Tertiary (#d4e735) is reserved for badges, success states, and tertiary CTAs. The surface stack is anchored in pure white (#ffffff) for maximum contrast and clarity, with

Typography

The type system pairs Source Serif Pro (serif, 700 weight) for headlines and display text with Work Sans (sans-serif, 400–600 weight) for body and UI text. This pairing creates visual hierarchy through contrast: serif headlines convey editorial authority and brand prestige, while sans-serif body text ensures legibility and modern accessibility. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section titles; headline-lg (40px, 700 weight) anchors subsections; headline-md (28px, 700 weight) is used for card titles and section headers. Body-lg (18px, 400 weight, 28px line-height) is applied to introductory paragraphs and feature descriptions, while body-md (16px, 400 weight, 24px line-height) handles standard paragraph text. Label-md (14px, 600 wei

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1280px, allowing responsive scaling from mobile (single-column stacks) through tablet (6-column) to desktop (12-column). The gutter spacing is consistently 24px, applied symmetrically on left and right edges. Section separation uses the lg spacing token (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for component-level grouping. Hero banners span full-width with 60px vertical padding (top and bottom) and 24px horizontal padding, creating a breathing room that emphasizes the primary message. Card grids use 24px gaps between items, collapsing to 12px on tablet and 8px on mobile. The container-max-width of 1280px ensures that content remains scannable and focused on deskt

Elevation & Depth

Depth in this system is achieved through a restrained shadow vocabulary and subtle layering. The base level (surface) uses no shadow, creating a flat, clean foundation. Level 2 (cards, modals) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), a barely perceptible shadow that suggests a thin lift from the background. Level 3 (elevated cards, popovers) uses elevation.md (0 4px 6px rgba(0, 0, 0, 0.08)), creating a more pronounced separation. Level 4 (modals, overlays) applies elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)), a dramatic shadow that commands visual attention. Hover states on inte

Shapes

The shape philosophy is 'Soft-Technical'—a balance between approachability and precision. Buttons and primary interactive elements use rounded.md (0.75rem / 12px), creating a friendly, modern appearance without excessive roundness. Cards and containers use rounded.md (0.75rem) for consistency with buttons, reinforcing a cohesive component family. Input fields use rounded.DEFAULT (0.5rem / 8px), a tighter radius that suggests precision and form-like functionality. Badges and status indicators use rounded.full (9999px), creating pill-shaped elements that feel distinct and scannable. The hero ban

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses {colors.primary} (#ff5052) background with white text, 12px 24px padding, 48px height, and rounded.md (12px). On hover, the background darkens to #ff3a42 with a 200ms ease transition. On active/pressed, it shifts to #e63d45. button-secondary uses a transparent background with a 2px solid {colors.primary} border and {colors.primary} text; on hover, it fills with {colors.primary-container} (#ffdbdb) while maintaining the border. Both button variants use label-md typography (14px, 600 weight, 0.02em letter-spacing) for crisp, scannable text.

Containers & Surfaces Cards are the primary content container. card uses {colors.surface} (#ffffff) background, 1px solid {colors.outline} (#cccccc) border, rounde

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff5052) exclusively for primary CTAs, hero sections, and active/focus states—never dilute its impact by overusing it on secondary elements.
• Do maintain 40px vertical spacing between major sections and 24px between subsections to preserve the brand's energetic-yet-organized aesthetic.
• Do pair Source Serif Pro headlines with Work Sans body text to create visual contrast that reinforces hierarchy and guides user attention.
• Do apply elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) as the default shadow for cards and containers; reserve elevation.lg only for modals and critical overlays.
• Do use rounded.md (12px) as the default border-radius for buttons and cards to maintain a cohesive, friendly component language.

**Don't**

• Don't use {colors.primary} (#ff5052) for body text, backgrounds, or non-interactive elements—it should remain a reserved accent that signals actionability.
• Don't apply shadows deeper than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)); excessive depth contradicts the brand's clean, modern energy.
• Don't mix serif and sans-serif fonts within a single component (e.g., don't use Source Serif Pro for button text); maintain the established pairing hierarchy.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or below {spacing.md} (24px) on card containers—visual density diminishes the brand's clarity.
• Don't apply rounded.full (9999px) to anything other than badges and pill-shaped status indicators; overuse dilutes the shape language and creates visual confusion.