Kementerian Agama Republik Indonesia

Overview

Kementerian Agama Republik Indonesia (Ministry of Religious Affairs) operates within a civic-institutional aesthetic that prioritizes clarity, accessibility, and trustworthiness. The design system embraces a 'Document-Centric Modernism' philosophy—combining serif typography (Lora) for authoritative headlines with clean sans-serif (Manrope) for body content, creating a visual hierarchy that guides citizens through complex policy and administrative information. The brand serves Indonesia's diverse religious communities and the general public, evoking a sense of institutional stability, inclusivity, and digital-age governance. The UI avoids ornament; instead, it relies on generous whitespace (40px section margins, 24px gutters), subtle borders (1px solid #d0d0d0), and a restrained green accent (#017119) that signals action and trust without overwhelming the content. Voice: formal yet approachable, precise and respectful. Example: 'Kementerian Agama periode 2025-2029 memiliki tujuan strategis untuk mewujudkan kerukunan umat beragama melalui peningkatan kualitas pemahaman agama yang moderat.'

Colors

The color palette reflects institutional authority tempered by digital accessibility. Primary (#017119) is a deep, saturated green used exclusively for interactive elements—call-to-action buttons, active navigation states, and focus indicators—signaling trust and civic engagement. It appears in the 'Profil' dropdown highlight and all primary CTAs. Secondary (#505050) is a neutral charcoal used for disabled states, secondary text, and form labels, maintaining legibility at 16px body size. The surface stack is anchored in pure white (#ffffff) for maximum content legibility, with subtle container variants (#e9ecef for grouped sections, #f0f9fa for hover states) providing visual separation without introducing color noise. Outline tokens (#d0d0d0 for borders, #c0c0c0 for dividers) are deliberat

Typography

The type system pairs Lora serif for headlines (display, headline-lg, headline-md at 60px, 48px, 32px respectively) with Manrope sans-serif for body and UI text (body-lg 18px, body-md 16px, label-md 14px). This pairing communicates institutional gravitas (serif) balanced with modern accessibility (sans-serif). Headlines use -0.04em letter-spacing to tighten display text and -0.02em for headline-lg, improving visual hierarchy and reducing perceived weight. Body text is set at 16px with 24px line-height (1.5x), exceeding WCAG AAA standards for readability. Labels use 0.01em letter-spacing to add subtle distinction in navigation and form contexts. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (label-sm, 12px) when overlaid on busy backgrounds to maintain 4.5:1 contrast. Fon

Layout

The layout follows a 12-column fluid grid with a 1280px container max-width, centered on viewport. The page rhythm uses semantic spacing: 40px (lg) for major section breaks, 24px (md) for component padding and gutters, 12px (sm) for internal component spacing. The breadcrumb and header occupy fixed horizontal space (64px header height), with the main content area using max-width: 1280px and px-4 (16px) horizontal padding on mobile, scaling to px-4 (16px) on desktop. Article content (page-content) uses a narrower max-width (896px, ~4xl in Tailwind) to optimize line length for readability (60–80 characters per line). Whitespace is generous: 32px top/bottom padding on article headers, 24px between list items, 16px between form fields. The footer uses a 5-column grid on large screens (lg:grid-

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered overlays. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and minor UI elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdowns and elevated surfaces, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and critical overlays. The header uses a 1px bottom border (#d0d0d0) with a subtle backdrop-filter: blur(8px) and rgba(255, 255, 255, 0.8) background to create a frosted-glass effect without full opacity, maintaining visual connection to content below. Dropdown panels (bb-cust

Shapes

The shape philosophy is 'Refined Minimalism'—favoring sharp, architectural corners (4px border-radius) for form inputs and buttons, with selective softening (12px for cards, 9999px for badges) to humanize the interface. Buttons use 4px (0.25rem) border-radius, creating a modern, slightly softened rectangle that feels contemporary without sacrificing clarity. Input fields also use 4px radius, maintaining visual consistency with buttons and form controls. Cards and elevated surfaces use 12px (0.75rem) radius, providing enough softness to feel approachable while remaining geometric and profession

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use {colors.primary} (#017119) background with white text, 6px 12px padding, 4px border-radius, and 40px height. Hover state (button-primary-hover) transitions to {colors.primary-fixed-dim} (#7cdb89) with a 150ms ease transition. Active state adds inset box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to indicate press. Secondary buttons (button-secondary) use transparent background with {colors.primary} text and a 1px solid {colors.outline} border, maintaining the same padding and height. Ghost buttons (button-ghost) remove the border and use {colors.on-surface-variant} text on transparent background, useful for tertiary actions. All buttons apply {typography.label-md} (14px, 700 weight) for consiste

Do's and Don'ts

**Do**

• Do use {colors.primary} (#017119) exclusively for interactive elements—buttons, links, focus states—to create a consistent call-to-action language.
• Do maintain 24px gutters and 40px section margins to preserve the generous whitespace that defines the institutional aesthetic.
• Do apply {typography.label-md} (14px, 700 weight) to all button text and navigation labels for visual consistency.
• Do use 4px border-radius for buttons and inputs, 12px for cards, and 9999px for badges to maintain the refined-minimalist shape hierarchy.
• Do apply focus rings at rgba(1, 113, 25, 0.1) with 3px width for keyboard navigation accessibility.
• Do use Lora serif for all headlines (display, headline-lg, headline-md) and Manrope sans-serif for body and UI text to maintain the institutional-modern pairing.
• Do set body text at 16px with 24px line-height (1.5x) to exceed WCAG AAA readability standards.
• Do use {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and elevated surfaces to create clear visual separation.

**Don't**

• Don't use primary green (#017119) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive CTAs and active states.
• Don't apply border-radius greater than 4px to buttons and inputs; this breaks the refined-minimalist aesthetic and creates visual inconsistency.
• Don't use shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) except for critical modals; excessive depth undermines the clean, institutional tone.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain Lora for headlines and Manrope for body/UI.
• Don't reduce line-height below 1.5x (24px at 16px font size) for body text; this violates accessibility standards and reduces readability.
• Don't use color alone to indicate state; always pair color changes with text, icons, or border treatments for colorblind users.
• Don't apply padding less than 12px (sm) to interactive elements; this reduces touch target size and harms mobile usability.
• Don't use {colors.surface-container-high} (#f0f9fa) as a primary background; it's reserved for hover states and subtle emphasis only.