SI-MATOA Portal BPS Provinsi Papua

Overview

SI-MATOA Portal is a government data monitoring and reporting system serving Indonesia's Central Bureau of Statistics (BPS) Papua Province. It embodies a "Institutional Clarity" aesthetic—combining the authority and precision of official government systems with modern, accessible digital interfaces. The design philosophy prioritizes data legibility and user confidence through a clean, hierarchical layout anchored by a bright blue primary accent (#007bff) that signals actionable elements and institutional trust. The brand personality is professional yet approachable: formal in structure, warm in execution. Example sentence: "Monitor real-time activity data across all BPS initiatives with a single, unified dashboard."

Colors

The color system is rooted in institutional trust and data clarity. Primary (#007bff) is the signature accent used exclusively for primary CTAs (Monitoring, Login buttons), links, and focus states—it conveys authority and invites interaction. Secondary (#ffc107) provides warm contrast for secondary actions (Agenda button) and highlights, creating visual rhythm without competing for attention. Tertiary (#28a745) reinforces positive states and success messaging. The surface stack ranges from pure white (#ffffff) for primary content areas down through light grays (#f8f9fa, #e9ecef, #dee2e6) for container hierarchy, enabling subtle depth without darkness. On-surface text is a near-black (#212529) for maximum legibility over light backgrounds. Error states use #dc3545 for critical warnings. The

Typography

The type system uses Source Sans Pro across all scales, chosen for its clean, geometric letterforms that convey both professionalism and accessibility. Display (56px, 600 weight) anchors hero sections with commanding presence; Headline-lg (40px, 500 weight) introduces major sections; Body-md (16px, 400 weight) carries primary content at optimal readability (24px line-height). Labels (14px, 600 weight) mark interactive elements with crisp hierarchy. Letter-spacing is conservative (-0.02em on display, -0.01em on headlines) to maintain density and authority, while body text uses default spacing for comfort. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when layered over photographic backgrounds to ensure contrast and legibility. Font weights are deliberately rest

Layout

The layout uses a 12-column grid with a maximum container width of 1320px, enabling responsive scaling from mobile (single column) to desktop (full grid). The hero section spans full viewport width with a semi-transparent overlay (rgba(31, 45, 61, 0.4)) to ensure text legibility over background imagery. Section separation uses lg spacing (40px) for major breaks, md spacing (24px) for subsection grouping, and sm spacing (12px) for component-level breathing room. The header floats with rounded corners (1.5rem) and frosted-glass styling, positioned with consistent gutter spacing (24px) from viewport edges. Content cards use md padding (24px) internally, with md spacing (24px) between cards in grid layouts. This rhythm creates a sense of organized authority—every element has deliberate placeme

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. The base layer (Level 1) is the white surface (#ffffff). Level 2 (standard cards) uses a soft shadow (0 1px 2px rgba(0, 0, 0, 0.06)) with a 1px outline in outline-variant (#ced4da) to define boundaries without heaviness. Level 3 (elevated cards, modals) applies a medium shadow (0 4px 12px rgba(0, 0, 0, 0.08)) with the same outline, creating clear separation. The header employs a frosted-glass technique: backdrop-filter: blur(10px) combined with rgba(255, 255, 255, 0.82) background and md elevation shadow, creating a floati

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting both approachability and precision. Buttons use DEFAULT radius (0.5rem / 8px), providing subtle softness without playfulness. Cards and containers use lg radius (1rem / 16px) for slightly more breathing room. The header uses xl radius (1.5rem / 24px) to signal its floating, distinct role. Input fields use DEFAULT radius (0.5rem) to align with button styling, creating visual consistency in interactive zones. Full radius (9999px) is reserved for badges and status indicators, where circular forms enhan

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg: #007bff, text: white, padding: 8px 16px, height: 40px, radius: 0.5rem) are used for main CTAs like Monitoring and Login. Hover state transitions to #0056b3 over 0.2s. Secondary buttons (bg: #ffc107, text: #1f2d3d) provide alternatives for lower-priority actions like Agenda. Tertiary buttons (bg: #28a745, text: white) reinforce positive actions. All buttons use label-md typography (14px, 600 weight) for crisp labeling. Focus states add a 3px outline in rgba(0, 123, 255, 0.25) for keyboard accessibility.

Containers & Surfaces Cards are the primary content container (bg: #f0f2f5, padding: 24px, radius: 1rem, shadow: 0 1px 2px rgba(0,0,0,0.06), border: 1px solid #ced4da). On hover, the background shift

Do's and Don'ts

**Do**

• Do use primary blue (#007bff) exclusively for main CTAs and primary interactions—it is the visual anchor of institutional authority.
• Do maintain consistent 24px gutter spacing around content and between major sections to reinforce the organized, deliberate aesthetic.
• Do apply the frosted-glass header treatment (backdrop-filter: blur(10px), rgba(255,255,255,0.82)) to create visual hierarchy without obscuring background context.
• Do use Source Sans Pro at 16px body size with 24px line-height for optimal readability of data-heavy content.
• Do transition all interactive states (hover, focus, active) over 0.2s ease to provide smooth, professional feedback.

**Don't**

• Don't use secondary (#ffc107) or tertiary (#28a745) colors for primary CTAs—they dilute the institutional authority signaled by primary blue.
• Don't apply shadows heavier than 0 16px 40px rgba(0,0,0,0.12)—the system prioritizes clarity over depth drama.
• Don't use border-radius values tighter than 0.25rem or looser than 1.5rem outside of full-circle badges—consistency maintains visual coherence.
• Don't layer text directly over photographic backgrounds without the semi-transparent overlay (rgba(31,45,61,0.4)) and text-shadow (0 2px 4px rgba(0,0,0,0.15))—legibility is non-negotiable for government systems.