Inspektorat Kota Makassar

Overview

Inspektorat Kota Makassar is an institutional government transparency platform designed to build civic trust through clear communication of oversight, audit, and accountability initiatives. The design aesthetic is 'Institutional Minimalism'—a disciplined, accessible approach that prioritizes legibility and civic authority without sacrificing warmth. The brand personality is formal yet approachable: precise, transparent, and committed to public service. The UI uses a bold institutional red (#b21d28) paired with a teal secondary accent (#1da6a9) to signal trust, oversight, and forward momentum. Every interaction reinforces the message: governance is open, processes are clear, and citizens are heard.

The tone is civic and direct. Example sentence: 'Laporan inspeksi kami tersedia untuk transparansi penuh—akses data audit terbaru dalam tiga klik.' Voice patterns emphasize clarity over jargon, accessibility over formality, and action over abstraction. The design system supports both light and dark modes, ensuring the platform remains usable across all devices and lighting conditions, reflecting the government's commitment to inclusive digital access.

Colors

The color system is built on institutional trust and civic clarity. Primary (#b21d28) is the signature institutional red, used exclusively for call-to-action buttons, active navigation states, and critical alerts—it signals authority and urgency without aggression. Secondary (#1da6a9) is a teal accent supporting status indicators, secondary CTAs, and data highlights, evoking stability and forward progress. Tertiary (#9333ea) is reserved for supplementary highlights and badge accents.

The surface stack anchors the light mode: surface (#f9fafb) is the base page background, surface-container (#eeeff2) lifts cards and panels, and surface-container-highest (#d1d5db) creates subtle depth for hover states. On-surface (#1f2937) is the primary text color, ensuring WCAG AA contrast (4.5:1) on all l

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances institutional authority with modern accessibility. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention without ornament. Headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections. Title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and long-form content, ensuring comfortable reading at 16px base size. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are applied to buttons, form labels, and metadata. All headings use negative lett

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The gutter spacing is 24px (md token), creating consistent breathing room between columns and sections. Page rhythm is governed by the lg spacing token (40px) for section separation, ensuring visual hierarchy and cognitive rest. The container-max-width (1280px) prevents line lengths from exceeding 75 characters on desktop, maintaining readability. Mobile breakpoints compress the grid to 1 column with sm gutter (12px) on screens under 640px, md gutter (24px) on tablets, and full gutter on desktop. Whitespace is semantic: use md spacing (24px) between card groups, lg spacing (40px) between major sections, and xl spacing (64px) between page regions (hero, content, footer). The spacing scale is strictl

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts, avoiding the flat aesthetic while maintaining institutional clarity. Level 1 (Base): no shadow; surface is #f9fafb with no elevation. Level 2 (Card/Panel): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: #ffffff or surface-container (#eeeff2). Level 3 (Hover/Elevated): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background: surface-container-high (#e5e7eb). Premium elevation (modals, popovers): box-shadow: 0 20px 40px -15px rgba(178, 29, 40, 0.2), background: #ffffff. The glass-nav uses a hybrid approac

Shapes

The shape philosophy is 'Civic Softness'—rounded corners that humanize institutional design without sacrificing formality. Buttons use full radius (9999px), creating pill-shaped CTAs that feel approachable and clickable. Cards and panels use lg radius (1rem / 16px), balancing softness with professional restraint. Input fields and form elements use DEFAULT radius (0.5rem / 8px), a subtle rounding that signals interactivity without distraction. Modals and overlays use xl radius (1.5rem / 24px), creating a distinct visual container. Badges and small UI elements use full radius (9999px) for visual

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#b21d28) background with {colors.on-primary} (#ffffff) text, rounded to {rounded.full} (9999px), with padding 16px 32px and height 48px. Typography is label-md (14px, 600 weight). On hover, transition to button-primary-hover: background shifts to {colors.primary-container} (#d22735) with all 0.3s ease. Button-secondary uses a frosted glass effect: background rgba(255, 255, 255, 0.1), text {colors.on-primary} (#ffffff), same dimensions and rounding. On hover, background becomes rgba(255, 255, 255, 0.2). Both buttons include a focus ring: outline 2px solid {colors.primary}, outline-offset 2px, applied on :focus-visible for keyboard accessibility.

Containers & Surfaces Cards are the p

Do's and Don'ts

**Do**

• Do use {colors.primary} (#b21d28) exclusively for primary CTAs, active states, and critical alerts—it is the brand's institutional signature and must never be diluted.
• Do maintain the 24px gutter and 40px section spacing rigorously; whitespace is a design tool that signals clarity and trust.
• Do apply Inter at 16px base size with 1.5 line-height for body text; this ensures WCAG AA readability (4.5:1 contrast) and reduces cognitive load.
• Do use the full rounded radius (9999px) on all interactive buttons and badges; this creates a clear affordance for action and humanizes institutional design.
• Do test all color combinations in both light and dark modes; the dark mode surface stack (#111827 background, #f9fafb text) must maintain 4.5:1 contrast.

**Don't**

• Don't use primary red (#b21d28) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't mix rounded radii arbitrarily; buttons are full (9999px), cards are lg (1rem), inputs are DEFAULT (0.5rem)—consistency is trust.
• Don't apply shadows deeper than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) on standard cards; excessive depth undermines institutional clarity.
• Don't use system fonts or fallback stacks; Inter must load from Google Fonts with font-display: swap to ensure brand consistency.
• Don't reduce motion for all users; respect prefers-reduced-motion: reduce and disable animations (set animation-duration: 0.01ms) for users who request it.