DTSEN – Data Tunggal Sosial dan Ekonomi Nasional

Overview

DTSEN (Data Tunggal Sosial dan Ekonomi Nasional) is Indonesia's unified national socio-economic data platform, serving multi-tier government agencies from central ministries to municipal administrations. The design aesthetic is **Institutional Clarity**—a modern, accessible interpretation of civic-tech authority that prioritizes transparency, trustworthiness, and efficient information hierarchy. The UI evokes competence and stability through a clean white canvas (rgb(255, 255, 255)), purposeful accent colors (a warm institutional red #c94a4a for primary actions, a vibrant green #0ca538 for success states, and a professional blue #2d8cf0 for secondary information), and a rigorous typographic system anchored in Plus Jakarta Sans. The emotional response is one of confidence: users feel they are accessing an official, secure, and well-maintained government resource.

The brand voice is formal yet approachable, precise without jargon, and action-oriented. Vocabulary patterns emphasize clarity ("Basis data tunggal yang terintegrasi, akurat, dan termutakhirkan"), regulatory grounding ("Inpres No. 4 Tahun 2025"), and user empowerment ("Ajukan Permohonan Data"). The tone avoids breathlessness and marketing hyperbole; instead, it speaks in the measured cadence of institutional communication. Example sentence in brand voice: "Data DTSEN kini tersedia dalam versi terbaru — v2.0 2026 per 8 April 2026."

Colors

The color system balances institutional authority with accessible, human-centered interaction. **Primary (#c94a4a)** is a warm, confident institutional red deployed on all primary CTAs ("Ajukan Permohonan Data", "Buka Halaman Cek Desil") and critical actions; it signals importance without aggression. On-primary is pure white (rgb(255, 255, 255)) for maximum contrast and legibility. **Secondary (#0ca538)** is a vibrant, optimistic green used for success states, confirmations, and positive status indicators (e.g., "Sudah Mengajukan" badges with background #e3f6ea and text #0ca538); it conveys progress and completion. **Tertiary (#2d8cf0)** is a professional blue reserved for secondary information, links, and supporting actions (e.g., "Belum Mengajukan" status with background #e8f1fd). **Surf

Typography

The type system is anchored in **Plus Jakarta Sans** (weights 400, 500, 600, 700, 800), a geometric sans-serif that conveys modern professionalism while maintaining institutional warmth. Display (60px, weight 800, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines and brand moments; headline-lg (44px, weight 800, line-height 52px) governs primary page titles like "Data Tunggal Sosial dan Ekonomi Nasional (DTSEN)"; headline-md (32px, weight 700) structures section headers. Body-lg (18px, weight 400, line-height 28px) is used for hero copy and prominent descriptive text, while body-md (16px, weight 400, line-height 24px) is the default paragraph and card text. Label-md (14px, weight 600, line-height 20px, letter-spacing 0.01em) is applied to button text and form labels;

Layout

The layout follows a **12-column fluid grid** with a fixed container max-width of 1280px, ensuring responsive scaling on mobile (single column) through tablet (6–8 columns) to desktop. The hero section uses a two-column split (text left, illustration right on desktop; stacked on mobile) with lg spacing (40px) between sections and md spacing (24px) for internal padding within cards. The stats bar employs a horizontal flex layout with stat-divider elements (1px solid #e9eef5) separating items; on mobile, stats stack vertically with dividers becoming horizontal rules. White-space philosophy prioritizes breathing room: section margins are lg (40px) on desktop, md (24px) on tablet, and sm (12px) on mobile. The gutter (24px) is applied consistently to container padding and inter-element spacing.

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness while maintaining clear layer separation. **Level 1 (Base)**: surface (#ffffff) with no shadow; used for the page background and primary card backgrounds. **Level 2 (Standard Card/Input)**: 0 3px 8px rgba(15, 23, 42, 0.15) with 1px border in outline (#cbd5e1); applied to cards, input fields, and dropdown panels. **Level 3 (Elevated/Modal)**: 0 8px 24px rgba(15, 23, 42, 0.12) with rounded xl (24px) and no border; used for modals, popovers, and floating action panels. Hover states elevate by one level (Level 1 → Le

Shapes

The shape philosophy is **Institutional Softness**—rounded corners that humanize authority without sacrificing professionalism. Buttons use rounded md (12px / 0.75rem), creating a friendly yet formal appearance; inputs and small UI elements use rounded DEFAULT (8px / 0.5rem) for consistency with form conventions. Cards and modals use rounded lg (16px / 1rem) for primary containers and rounded xl (24px / 1.5rem) for elevated modals and floating panels. Badges and pills use rounded full (9999px) to signal compact, self-contained information. The rationale: sharp corners (0px) would feel austere

Components

Action Elements **Button Primary** (backgroundColor #c94a4a, textColor white, rounded md 12px, padding 10.88px 16px, height 44px, fontWeight 600, fontSize 13.76px) is the dominant CTA for high-priority actions like "Ajukan Permohonan Data" and "Buka Halaman Cek Desil". On hover, background shifts to #b83a3a with box-shadow 0 3px 8px rgba(201, 74, 74, 0.25) and transition duration 150ms. On active/focus, background becomes #a83030. **Button Secondary** (backgroundColor white, textColor #64748b, border 1px solid #cbd5e1, rounded md, padding 10.88px 16px, height 44px) is used for lower-priority actions like "Nanti Saja" (dismiss) and secondary navigation. Hover state: background #eef2f7, textColor #0f172a, border-color #94a3b8. **Button Ghost** (backgroundColor transparent, textColor #c94

Do's and Don'ts

**Do**

• Do use primary red (#c94a4a) exclusively for high-priority CTAs and critical user actions; reserve secondary green (#0ca538) for success confirmations and tertiary blue (#2d8cf0) for supporting information.
• Do apply Plus Jakarta Sans at weights 600–800 for headlines and 400–500 for body text; maintain line-height 1.5–1.75 for readability and generous letter-spacing (-0.04em to 0.03em) for visual rhythm.
• Do structure layouts on a 12-column grid with lg spacing (40px) between major sections and md spacing (24px) for internal card padding; ensure container max-width 1280px on desktop.
• Do use the shadow system consistently: 0 3px 8px rgba(15, 23, 42, 0.15) for standard cards, 0 8px 24px rgba(15, 23, 42, 0.12) for elevated modals, and 150ms ease transitions on hover.
• Do apply rounded md (12px) to buttons and inputs, rounded lg (16px) to cards, and rounded xl (24px) to modals; use rounded full (9999px) only for badges and pills.

**Don't**

• Don't use primary red (#c94a4a) for body text, backgrounds, or decorative elements; it is reserved for actionable CTAs and must maintain a contrast ratio ≥ 4.5:1 with white text.
• Don't mix typefaces; Plus Jakarta Sans is the sole brand typeface across all weights and sizes. Avoid system-ui, sans-serif, or fallback declarations in component styles.
• Don't apply box-shadows larger than 0 8px 24px rgba(15, 23, 42, 0.12) or blur values exceeding 4px on overlays; excessive depth creates visual noise and undermines institutional clarity.
• Don't use rounded corners smaller than 8px (DEFAULT) on interactive elements or larger than 24px (xl) on standard cards; this maintains visual consistency and prevents the design from appearing either too sharp or too playful.
• Don't override the color tokens with hardcoded hex values in component styles; always reference {colors.primary}, {colors.secondary}, etc., to ensure the system remains maintainable and themeable.