detikcom

Overview

detikcom is Indonesia's most-visited news platform, delivering breaking news, sports coverage, finance, and lifestyle content with urgency and authority. The design system embodies a "Bold Journalistic" aesthetic—combining a commanding primary blue (#21409a) with energetic lime-green (#89be3e) and cyan accents (#00a1dc) to create visual hierarchy and draw attention to critical stories. The interface prioritizes clarity and scannability, reflecting the brand's mission to inform millions of Indonesians daily. Voice: direct, authoritative, and conversational. The tone avoids sensationalism while maintaining energy; example: "Presiden Joko Widodo mengumumkan kebijakan baru hari ini—baca analisis lengkapnya di sini."

Colors

The color system is rooted in a primary blue (#21409a) that commands attention on CTAs, navigation headers, and key interactive elements. This blue conveys trust and journalistic authority. Secondary lime-green (#89be3e) and tertiary cyan (#00a1dc) are deployed as accent gradients (linear-gradient(223deg, rgba(137, 190, 62, 1) 0%, rgba(0, 161, 220, 1) 100%)) on featured content cards, match-score highlights, and promotional buttons—creating visual energy without overwhelming the layout. Error red (#c72026) marks urgent alerts and breaking-news badges. The surface stack is anchored in pure white (#ffffff) for maximum readability, with subtle grays (#f0f0f0, #e8e8e8) for container differentiation. On-surface text is pure black (#000000) for 16px body copy, ensuring WCAG AA contrast ratios. O

Typography

The type system pairs Google Sans Flex (headlines, labels, UI text) with Montserrat (body copy, article text) to balance modern energy with readability. Display text uses Google Sans Flex at 60px, weight 900, with -0.04em letter-spacing to create impact on hero sections and breaking-news callouts. Headline-lg (40px, weight 700) anchors article titles and major section headers. Body-md (16px, weight 400, 24px line-height) is the workhorse for article text and list content, set in Montserrat for optimal legibility at small sizes. Label-md (14px, weight 600, Google Sans Flex) is applied to navigation tabs, button text, and metadata labels. On small labels over busy backgrounds (e.g., live-score badges), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. All headlines use le

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered on desktop. The primary navigation bar spans full-width at the top (fixed position, z-index 22) with a 24px gutter on left/right. Content sections use 24px (md spacing) for vertical rhythm between major blocks—news cards, featured stories, and sidebar widgets. Horizontal card grids typically employ 3–4 columns on desktop, collapsing to 2 columns at tablet (768px) and 1 column on mobile. The hero section (World Cup match card) uses a dark overlay with radial-gradient depth and 16px padding internally. Sidebar widgets maintain 12px (sm spacing) between list items. Container max-width is enforced at 1280px; content beyond that width is hidden or wrapped. White-space philosophy: generous breathing room around cards (2

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for body backgrounds and input fields. Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with surface-container-lowest (#f8f8f8) background, applied to news cards, article previews, and list items. Level 3 (Elevated/Featured): 0 8px 24px rgba(0, 0, 0, 0.12) shadow with surface-container-high (#e8e8e8) background, used for modals, featured story cards, and hover states. The World Cup match card uses a radial-gradient overlay (radi

Shapes

The shape system follows a "Journalistic Precision" philosophy: sharp, geometric corners with strategic rounding to guide focus. Buttons use 1rem (16px) border-radius for primary actions, creating a modern, approachable feel while maintaining authority. Secondary buttons and input fields use 1.5rem (24px) border-radius (full pill shape) to soften interactions and encourage engagement. Cards and containers default to 0.75rem (12px) border-radius, balancing structure with friendliness. Featured content cards (match scores, live updates) use 1rem (16px) radius. Navigation tabs and badges use 9999

Components

Action Elements Primary buttons use {colors.primary} (#21409a) background with {colors.on-primary} (white) text, 12px 24px padding, 48px height, and {rounded.lg} (16px) border-radius. On hover, shift to {colors.primary-container} (#2c5498) with a 0.2s ease transition. Secondary buttons are transparent with a 1px solid {colors.primary} border, 6px 24px padding, and {rounded.full} (pill shape). Accent gradient buttons layer linear-gradient(223deg, #89be3e 0%, #00a1dc 100%) with a 2.175px white offset shadow; on hover, translate(2.175px, 2.175px) collapses the shadow over 0.1s ease. All buttons use {typography.label-md} (14px, weight 600, Google Sans Flex).

Containers & Surfaces Standard cards use {colors.surface-container-lowest} (#f8f8f8) background, {rounded.lg} (16px), {spacing.m

Do's and Don'ts

**Do**

• Do use the primary blue (#21409a) on all CTAs, navigation headers, and focus states to maintain consistent brand recognition across the platform.
• Do apply the lime-green–to–cyan gradient (linear-gradient(223deg, #89be3e 0%, #00a1dc 100%)) on featured content, match scores, and promotional elements to create visual energy without overwhelming neutral layouts.
• Do maintain 24px (lg spacing) between major content sections and 12px (sm spacing) between list items to ensure scannable, breathable layouts.
• Do use Google Sans Flex for all headlines, labels, and UI text; reserve Montserrat for body copy and article text to balance modern energy with readability.
• Do apply the three-tier shadow system (Level 1: none, Level 2: 0 3px 8px rgba(0, 0, 0, 0.15), Level 3: 0 8px 24px rgba(0, 0, 0, 0.12)) to create clear visual hierarchy without excessive depth.

**Don't**

• Don't use the secondary lime-green (#89be3e) or tertiary cyan (#00a1dc) as standalone button backgrounds; reserve them for accent gradients and featured content highlights only.
• Don't apply border-radius smaller than 8px (sm: 0.25rem) on interactive elements; tight corners reduce perceived affordance and conflict with the journalistic-precision aesthetic.
• Don't exceed 1280px container max-width; content overflow creates layout instability and reduces readability on ultra-wide displays.
• Don't mix Montserrat and Google Sans Flex in the same headline or label; maintain strict separation: Google Sans Flex for UI/headlines, Montserrat for body copy.
• Don't use pure black (#000000) text smaller than 14px without increasing line-height to 1.5 or adding text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on busy backgrounds; legibility suffers at small sizes.