DKIS Cirebon

Overview

DKIS Cirebon is a government digital transformation platform serving Cirebon City's Communications, Informatics & Statistics Department. The design embodies "Institutional Clarity"—a modernist aesthetic that prioritizes data accessibility, transparent governance, and public service excellence through structured information hierarchy. The interface uses a dark-neutral foundation (surface: #0b132b) with strategic accent colors (primary blue #0374d6, secondary orange #ea5905, tertiary green #53ab5e) that signal actionable elements and status states. The visual language evokes trust, authority, and digital competence—qualities essential for government digital services.

The brand voice is formal yet approachable, precise yet human. Tone: authoritative without being distant, informative without jargon overload. The vocabulary emphasizes transparency ("data-driven," "akuntabel"), transformation ("digital," "inovasi"), and public benefit ("pelayanan publik," "tata kelola"). Example sentence: "Akses data statistik Kota Cirebon dengan transparansi penuh—laporan real-time untuk keputusan yang lebih baik."

Colors

The color system is built on a dark institutional foundation with three distinct accent roles. Primary (#0374d6, a saturated sky blue) is reserved exclusively for interactive elements—call-to-action buttons, links, focus states, and data highlights. It conveys digital authority and draws attention to critical user actions. Secondary (#ea5905, a warm orange) supports alerts, warnings, and secondary actions; it provides visual contrast against the cool primary without competing for dominance. Tertiary (#53ab5e, a muted green) indicates success states, confirmations, and positive data trends.

The surface stack anchors the interface in institutional gravitas: surface (#0b132b) is the page background, surface-container (#151d35) forms card and panel backgrounds, and surface-container-high (#1f

Typography

The type system pairs Lato for display and headlines (conveying institutional authority and readability at large sizes) with Inter for body and labels (ensuring clarity and accessibility at smaller scales). Display (56px, 700 weight, -0.03em tracking) anchors hero sections and major page titles; headline-lg (36px, 700 weight) breaks content into major sections; headline-md (28px, 700 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent content; body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) styles button text and form labels; label-sm (12px, 500 weight, 0.02em tracking) is applied to helper text, metadata, and small UI labels. All text over bus

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on government portals (typically viewed on desktop). The page rhythm uses semantic spacing: lg (40px) separates major sections (hero, content blocks, footer), md (24px) separates cards and subsections within a container, and sm (12px) provides breathing room between list items and form fields. The gutter (24px) defines left/right padding on the container, scaling to md (24px) on tablet and sm (12px) on mobile. White-space is generous but purposeful—the dark background (#0b132b) absorbs visual weight, so spacing prevents the interface from feeling cramped. Cards and panels use md (24px) internal padding to ensure text and contr

Elevation & Depth

Depth is conveyed through a three-level shadow system that reflects institutional hierarchy without excessive visual drama. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.12)) is applied to subtle UI elements like form inputs and small cards—barely perceptible but present. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) lifts standard cards, buttons on hover, and dropdown panels off the surface, creating clear separation. Level 3 (lg elevation: 0 8px 24px rgba(0, 0, 0, 0.2)) is reserved for modals, overlays, and primary CTAs in active states—commanding attention without feeling aggress

Shapes

The shape philosophy is "Institutional Softness"—rounded corners are present but restrained, avoiding the playfulness of consumer apps while rejecting the harshness of pure rectangles. Buttons and form inputs use lg (1rem / 16px) border-radius, creating a friendly but professional appearance. Cards and panels use lg (16px) for consistency with interactive elements. Smaller UI elements (badges, tags, helper text backgrounds) use md (0.75rem / 12px) or sm (0.25rem / 4px) for visual hierarchy. The full (9999px) radius is reserved for pill-shaped badges and circular avatars. The rationale: lg radi

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use background: {colors.primary} (#0374d6) with on-primary text (white), padding: 10px 16px, height: 40px, rounded: lg (16px), and md elevation shadow. On hover, the background darkens to #0256a8 (a 20% darker blue) and shadow elevates to lg. On active/press, background becomes #001a4d (the primary-container) and shadow reduces to sm, providing tactile feedback. Secondary buttons use background: {colors.secondary} (#ea5905) with identical sizing and shadow behavior. Ghost buttons (outline style) use transparent background with border: 1px solid rgba(255, 255, 255, 0.12), text-color: on-surface, and hover background: rgba(255, 255, 255, 0.08). All button text uses label-md typography (14px, 600 weight) with 0.01em tracki

Do's and Don'ts

**Do**

• Do use primary (#0374d6) exclusively for CTAs, links, and focus states—never for backgrounds or decorative elements.
• Do maintain the 40px minimum height for all interactive elements (buttons, inputs, menu items) to meet accessibility touch-target standards.
• Do apply the three-level shadow system consistently: sm for subtle elements, md for standard cards and hovers, lg for modals and primary actions.
• Do use Lato for headlines and display text to convey institutional authority; reserve Inter for body and labels for maximum readability.
• Do pair dark backgrounds (surface: #0b132b) with generous white-space (lg: 40px for section separation) to prevent visual fatigue on government portals.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to all text over busy backgrounds or low-contrast surfaces.

**Don't**

• Don't use secondary (#ea5905) or tertiary (#53ab5e) for primary CTAs—they are reserved for alerts, warnings, and status indicators.
• Don't apply rounded corners smaller than sm (4px) to interactive elements; use lg (16px) for buttons and cards to maintain the institutional-softness aesthetic.
• Don't mix Lato and Inter in the same heading or paragraph—use Lato for all display/headline sizes, Inter for body/label sizes.
• Don't use shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2)) on standard UI elements; reserve lg shadow for modals and primary actions only.
• Don't reduce padding below sm (12px) on cards or containers; the dark background requires generous white-space to prevent visual cramping.
• Don't apply focus rings or hover states to non-interactive elements; reserve these for buttons, inputs, links, and menu items only.