DESIGN.md · Analysis

Detikcom

detik.com · 20 Oct 2026 · 47 colors · Montserrat, Plus Jakarta Sans

Detikcom

Indonesia's leading digital news platform delivering real-time, trustworthy journalism across politics, business, sports, lifestyle, and breaking news with a bold, accessible visual identity.

Colors

surface#ffffff

surface-dim#f7f7f7

surface-bright#ffffff

surface-container-lowest#f8f8f8

surface-container-low#f0f0f0

surface-container#eeeeee

surface-container-high#e8e8e8

surface-container-highest#e0e0e0

on-surface#000000

on-surface-variant#666666

inverse-surface#1a1a1a

inverse-on-surface#ffffff

outline#cccccc

outline-variant#d0d0d0

surface-tint#21409a

primary#21409a

on-primary#ffffff

primary-container#2c5498

on-primary-container#ffffff

inverse-primary#6b9eff

secondary#fcb715

on-secondary#000000

secondary-container#fcc43f

on-secondary-container#000000

tertiary#ef672f

on-tertiary#ffffff

tertiary-container#ff8a5a

on-tertiary-container#ffffff

error#c72026

on-error#ffffff

error-container#ff0000

on-error-container#ffffff

primary-fixed#2c5498

primary-fixed-dim#1a3470

on-primary-fixed#ffffff

on-primary-fixed-variant#ffffff

secondary-fixed#fcc43f

secondary-fixed-dim#fcb715

on-secondary-fixed#000000

on-secondary-fixed-variant#000000

tertiary-fixed#ff8a5a

tertiary-fixed-dim#ef672f

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#ffffff

background#ffffff

on-background#000000

surface-variant#f0f0f0

Typography

display: fontFamily: Montserrat · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Plus Jakarta Sans · fontSize: 40px · fontWeight: 800 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Montserrat · fontSize: 28px · fontWeight: 700 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Plus Jakarta Sans · fontSize: 22px · fontWeight: 800 · lineHeight: 28px · letterSpacing: -0.01em
body-lg: fontFamily: Google Sans Flex · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Montserrat · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Montserrat · fontSize: 14px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: JetBrains Mono · fontSize: 12px · fontWeight: 800 · lineHeight: 16px · letterSpacing: 0.08em

Design guidance

Overview

Detikcom is Indonesia's most-visited news platform, delivering breaking news, investigative journalism, and lifestyle content with urgency and clarity. The design system embodies 'Bold Accessibility'—a visual language that prioritizes legibility and immediate information hierarchy through high-contrast color blocking, decisive typography weights, and geometric precision. The brand personality is authoritative yet approachable: fast-paced, trustworthy, and unapologetically Indonesian. The UI evokes the energy of a newsroom: red accent bars signal breaking news, deep navy anchors credibility, and golden highlights draw attention to featured stories. Voice example: 'Seiyu Grisha Attack on Titan Hiroshi Tsuchida Meninggal Dunia—berita terbaru hari ini.'

Colors

The color system is built on three pillars: a deep navy primary (#21409a) for trust and navigation, a vibrant golden secondary (#fcb715) for highlights and calls-to-action, and a bold red tertiary (#ef672f) for breaking news and urgency. Primary (#21409a) is used on buttons, links, active states, and the main navigation bar—it commands attention without overwhelming. Secondary (#fcb715) and its container variant (#fcc43f) appear on featured story badges, promotional chips, and hover states to create visual rhythm. Tertiary (#ef672f) is reserved for live badges, error states, and critical alerts—its warmth signals immediacy. The surface stack uses near-white (#ffffff, #f8f8f8, #f0f0f0) to maintain readability over complex article layouts. On-surface text is pure black (#000000) for maximum

Typography

The type system balances journalistic authority with digital accessibility. Montserrat (700–800 weight) anchors headlines and article titles, conveying editorial confidence; Plus Jakarta Sans (800 weight) is reserved for hero-level display text and featured story titles, adding geometric precision. Google Sans Flex (400 weight) serves body copy and article text, optimized for screen reading at 16–18px with 1.5–1.75 line-height. JetBrains Mono (800 weight) is used sparingly for category tags and live badges, creating visual distinction. Display text (60px, 700 weight) uses -0.04em letter-spacing to tighten the letterforms; headline-md (28px, 700 weight) uses -0.01em for editorial headlines. Body text (16px, 400 weight) maintains 24px line-height (1.5) for comfortable reading. Labels and bad

Layout

The layout uses a 12-column grid with a 1280px max-width container, maintaining a 24px gutter between columns. The homepage rhythm alternates between full-width hero sections (aspect-ratio 4/3 or 16/9), card grids (2–3 columns on desktop), and article lists. Section separation uses 40px (lg spacing) vertically; internal card padding uses 24px (md spacing). The featured story card occupies 600px on desktop (roughly 47% of the container), with a right column of 1fr for news lists and supplementary content. Input fields and search bars use 20px padding (custom value) with 20px border-radius for a pill-shaped aesthetic. Cards use 16px border-radius (lg rounded) with 8px border-radius on thumbnails (md rounded). The white-space philosophy prioritizes breathing room: 14px gaps between stacked ca

Elevation & Depth

Depth is conveyed through layered shadows and border treatments rather than color shifts. Level 1 (Base): flat white surface, no shadow. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), border: 1px solid #d0d0d0, border-radius: 16px. Level 3 (Elevated/Featured): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), border: 3px solid #ffffff, border-radius: 16px—used on hero cards and modals. Hover states elevate cards by increasing shadow to 0 16px 40px rgba(0, 0, 0, 0.12) and scaling the image content by 1.03–1.1 over 0.35s ease. Input fields use a 1px inset border (outline-variant

Shapes

The shape philosophy is 'Geometric Precision'—sharp, intentional radii that signal modernity and clarity. Buttons use 20px border-radius (full rounded) for pill-shaped CTAs, creating a friendly, clickable appearance. Cards use 16px border-radius (lg rounded) for a balanced, editorial feel. Thumbnails and small images use 8px border-radius (md rounded) to maintain visual hierarchy without softness. Input fields use 20px border-radius to match button styling, creating a cohesive interaction zone. Live badges and category tags use 4px border-radius (DEFAULT) for a technical, precise look. The fea

Components

Action Elements Buttons follow a three-tier system. Primary buttons (bg: #21409a, text: white, 36px height, 7px 15px padding, 20px border-radius, Montserrat 500 weight) are used for main CTAs like 'Daftar MPC' and search submission. Hover state shifts to #2c5498 with no scale transform—the color change alone signals interactivity. Secondary buttons (bg: #f0f0f0, text: black, 36px height, 6px 24px padding, 20px border-radius) are used for alternative actions like 'Masuk'. Tertiary buttons (bg: #ef672f, text: white, 40px height, 12px padding, 16px border-radius) are reserved for breaking news and urgent actions. All buttons use transition: background-color 0.2s ease, transform 0.2s ease. ### Containers & Surfaces Cards use a 16px border-radius with 24px padding and box-shadow: 0 4px 12px

Do's and Don'ts

**Do**

Do use Montserrat 700–800 weight for all headlines and article titles to maintain editorial authority and visual hierarchy.
Do apply the primary navy (#21409a) to interactive elements (buttons, links, focus states) and reserve secondary gold (#fcb715) for highlights and featured content only.
Do maintain 24px gutter spacing between grid columns and 40px vertical separation between major sections to ensure breathing room and readability.
Do use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on standard cards and 0 8px 24px rgba(0, 0, 0, 0.08) on featured/elevated cards—never use color shifts alone for depth.
Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over image overlays to guarantee legibility at all viewport sizes.

**Don't**

Don't use the tertiary red (#ef672f) for non-urgent elements; reserve it exclusively for breaking news badges, live indicators, and critical alerts.
Don't mix Montserrat and Plus Jakarta Sans weights arbitrarily—use Plus Jakarta Sans 800 only for hero-level display text, Montserrat 700 for article headlines.
Don't apply border-radius smaller than 4px on interactive elements; the minimum is 4px for badges and technical labels, 16px for cards.
Don't use pure black (#000000) text on dark backgrounds; always use inverse-on-surface (#ffffff) or on-surface-variant (#666666) for sufficient contrast.
Don't exceed 3px border width on cards; the featured story card uses 3px white border as a maximum—standard cards use 1px outline (#d0d0d0) only.

---
version: alpha
name: Detikcom
description: >-
  Indonesia's leading digital news platform delivering real-time, trustworthy journalism across politics, business,
  sports, lifestyle, and breaking news with a bold, accessible visual identity.
logo:
  src: https://awscdn.detik.net.id/detikcomasset/logo/detikcom.png
colors:
  surface: '#ffffff'
  surface-dim: '#f7f7f7'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f8f8f8'
  surface-container-low: '#f0f0f0'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e0e0e0'
  on-surface: '#000000'
  on-surface-variant: '#666666'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#ffffff'
  outline: '#cccccc'
  outline-variant: '#d0d0d0'
  surface-tint: '#21409a'
  primary: '#21409a'
  on-primary: '#ffffff'
  primary-container: '#2c5498'
  on-primary-container: '#ffffff'
  inverse-primary: '#6b9eff'
  secondary: '#fcb715'
  on-secondary: '#000000'
  secondary-container: '#fcc43f'
  on-secondary-container: '#000000'
  tertiary: '#ef672f'
  on-tertiary: '#ffffff'
  tertiary-container: '#ff8a5a'
  on-tertiary-container: '#ffffff'
  error: '#c72026'
  on-error: '#ffffff'
  error-container: '#ff0000'
  on-error-container: '#ffffff'
  primary-fixed: '#2c5498'
  primary-fixed-dim: '#1a3470'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#ffffff'
  secondary-fixed: '#fcc43f'
  secondary-fixed-dim: '#fcb715'
  on-secondary-fixed: '#000000'
  on-secondary-fixed-variant: '#000000'
  tertiary-fixed: '#ff8a5a'
  tertiary-fixed-dim: '#ef672f'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#f0f0f0'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 40px
    fontWeight: '800'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Montserrat
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 22px
    fontWeight: '800'
    lineHeight: 28px
    letterSpacing: '-0.01em'
  body-lg:
    fontFamily: Google Sans Flex
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Montserrat
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '800'
    lineHeight: 16px
    letterSpacing: 0.08em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 4px 12px rgba(0, 0, 0, 0.08)
  lg: 0 8px 24px rgba(0, 0, 0, 0.08)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 7px 15px
    height: 36px
    fontWeight: '500'
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 6px 24px
    height: 36px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  button-tertiary:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.sm}'
    height: 40px
  button-tertiary-hover:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.lg}'
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: 7px 15px
    border: 1px solid {colors.outline}
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(33, 64, 154, 0.1)
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.error}'
    textColor: '{colors.on-error}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: 2px 6px
    fontSize: 10px
    fontWeight: '800'
  chip:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  chip-hover:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons follow a three-tier system. Primary buttons (bg: #21409a, text: white, 36px height, 7px 15px padding, 20px border-radius, Montserrat 500 weight) are used for main CTAs like 'Daftar MPC' and search submission. Hover state shifts to #2c5498 with no scale transform—the color change alone signals interactivity. Secondary buttons (bg: #f0f0f0, text: black, 36px height, 6px 24px padding, 20px border-radius) are used for alternative actions like 'Masuk'. Tertiary buttons (bg: #ef672f, text: white, 40px height, 12px padding, 16px border-radius) are reserved for breaking news and urgent actions. All buttons use transition: background-color 0.2s ease, transform 0.2s ease. ### Containers & Surfaces
Cards use a 16px border-radius with 24px padding and box-shadow: 0 4px 12px

## Do's and Don'ts

**Do**
- Do use Montserrat 700–800 weight for all headlines and article titles to maintain editorial authority and visual hierarchy.
- Do apply the primary navy (#21409a) to interactive elements (buttons, links, focus states) and reserve secondary gold (#fcb715) for highlights and featured content only.
- Do maintain 24px gutter spacing between grid columns and 40px vertical separation between major sections to ensure breathing room and readability.
- Do use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on standard cards and 0 8px 24px rgba(0, 0, 0, 0.08) on featured/elevated cards—never use color shifts alone for depth.
- Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over image overlays to guarantee legibility at all viewport sizes.

**Don't**
- Don't use the tertiary red (#ef672f) for non-urgent elements; reserve it exclusively for breaking news badges, live indicators, and critical alerts.
- Don't mix Montserrat and Plus Jakarta Sans weights arbitrarily—use Plus Jakarta Sans 800 only for hero-level display text, Montserrat 700 for article headlines.
- Don't apply border-radius smaller than 4px on interactive elements; the minimum is 4px for badges and technical labels, 16px for cards.
- Don't use pure black (#000000) text on dark backgrounds; always use inverse-on-surface (#ffffff) or on-surface-variant (#666666) for sufficient contrast.
- Don't exceed 3px border width on cards; the featured story card uses 3px white border as a maximum—standard cards use 1px outline (#d0d0d0) only.

Edit, then copy or download.