IMPHNEN

Overview

IMPHNEN is Indonesia's largest programmer community platform, designed to democratize technical education through an inclusive, humor-driven social experience. The brand serves developers of all levels—from beginners to seasoned engineers—by combining serious learning content with meme culture, creating a space where programming feels approachable rather than intimidating. The aesthetic is 'Approachable Modernism': clean, bright surfaces with vibrant blue accents (#23a1eb primary, #1877f2 secondary, #5865f2 tertiary) that energize the interface without overwhelming. The emotional response is one of belonging—users feel welcomed into a peer-led community, not lectured at by gatekeepers.

The brand voice is conversational, self-aware, and irreverent. IMPHNEN speaks in the vernacular of Indonesian tech culture: casual, humor-forward, and unafraid of playful contradiction (the name itself—'Wanting to Become a Skilled Programmer But Reluctant to Code'—embraces the paradox every developer feels). Vocabulary patterns favor directness ('Join Komunitas', 'Let's Go Saatnya Kamu Join!') over corporate polish. The tone never condescends; it assumes users are intelligent and appreciate wit. Example sentence in brand voice: 'Yuk ngoding bareng—no judgment if you're still Googling how to center a div.'

Colors

IMPHNEN's color system balances a clean, light-dominant surface (#ffffff, #f5f5f5) with three distinct accent roles that map to the community's multi-platform presence. Primary (#23a1eb) is the signature interaction color—used on all CTAs ('Join Komunitas', 'Explore Event'), active navigation states, and focus indicators. It conveys trust and energy without aggression. Secondary (#1877f2) represents Facebook integration and appears in social-link components and community-platform badges; it sits slightly darker and more saturated than primary, creating visual hierarchy. Tertiary (#5865f2) is reserved for Discord-specific UI elements and accent highlights, maintaining brand presence across the platform ecosystem.

The surface stack uses near-white tones (surface: #ffffff, surface-container-

Typography

The typography system uses Poppins exclusively across all weights (300–800), creating a cohesive, friendly aesthetic that reinforces the 'approachable' brand promise. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; it commands attention through scale and weight, not aggression. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles, with tighter letter-spacing (-0.02em, -0.01em) to enhance readability at large sizes. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the content backbone, using 28px and 24px line-heights respectively to ensure comfortable reading on both mobile and desktop. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 500 weight, 0.03em trac

Layout

IMPHNEN uses a 12-column fluid grid system with a max-width of 1280px (container-max), scaling responsively from mobile (single column) through tablet (2–3 columns) to desktop (full 12-column layout). The gutter is consistently 24px (md spacing), creating balanced white space that prevents visual clutter. Section separation uses lg spacing (40px) for major rhythm breaks (hero to community section, community to testimonials), while internal component spacing uses md (24px) for card padding and sm (12px) for input fields and list items. The hero section spans full viewport height with py-20 md:py-32 lg:py-40 (80px–160px vertical padding depending on breakpoint), establishing a generous, breathing aesthetic. Container padding is 24px on mobile, scaling to 48px on desktop, ensuring content nev

Elevation & Depth

Depth in IMPHNEN is achieved through a subtle shadow and border system rather than color darkening. Level 1 (Base) uses no shadow—the white surface (#ffffff) is the foundation. Level 2 (Standard Cards) applies box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px solid border at #cccccc, creating a soft, barely-lifted appearance. Level 3 (Elevated/Hover States) escalates to box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with the same border, signaling interactivity without visual harshness. Modals and overlays use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) to establish clear separation from the ba

Shapes

IMPHNEN employs 'Friendly Geometry'—rounded corners that feel welcoming without sacrificing professionalism. Buttons use rounded-lg (1rem / 16px), creating a soft, approachable tap target while maintaining clear affordance. Cards use rounded-xl (1.5rem / 24px), the largest radius in the system, emphasizing their role as primary content containers and reinforcing the 'open, inclusive' brand feeling. Input fields use rounded-DEFAULT (0.5rem / 8px), a subtle radius that maintains form-like clarity without coldness. Badges and pills use rounded-full (9999px), creating perfect circles or pill shape

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use background: #23a1eb, color: #ffffff, padding: 12px 24px, height: 44px, rounded-lg, with a 150ms transition. On hover (button-primary-hover), the background shifts to #1a8fd9 (10% darker), maintaining the same text color. On active/pressed state (button-primary-active), it darkens further to #0877c1. Secondary buttons (button-secondary) use a transparent background with a 1px border at #999999 and text color #23a1eb. On hover, the background becomes #f0f0f0 and the border shifts to #23a1eb, creating a subtle fill effect. All buttons use font-weight: 600, font-size: 14px (label-md), and letter-spacing: 0.02em for consistent, readable labels.

Containers & Surfaces Cards (card) are the pr

Do's and Don'ts

**Do**

• Do use the primary blue (#23a1eb) exclusively for CTAs and interactive focus states—it's the signature brand accent and should never be diluted or overused on non-interactive elements.
• Do apply the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing consistently across all interactive elements (buttons, cards, inputs) to create a snappy, responsive feel.
• Do maintain the 24px gutter and lg (40px) section spacing religiously—this breathing room is core to the 'approachable modernism' aesthetic and prevents visual overwhelm.
• Do use Poppins at 600+ weight for all labels, buttons, and headings to reinforce the friendly, confident brand voice.
• Do apply the subtle shadow stack (Level 1 → Level 2 → Level 3) to create depth without harsh contrast—the brand avoids aggressive drop shadows.

**Don't**

• Don't use pure black (#000000) for text or backgrounds—always use #1a1a1a (on-surface) or #ffffff (surface) to maintain the soft, approachable aesthetic.
• Don't apply rounded-full to buttons or cards—reserve it for badges and pills only; over-rounding dilutes the professional-friendly balance.
• Don't mix Poppins with other typefaces; the system is monofamily by design to ensure cohesion across all platforms and devices.
• Don't use the secondary (#1877f2) or tertiary (#5865f2) colors as primary CTAs—they are platform-specific accents (Facebook, Discord) and should only appear in their designated contexts.
• Don't exceed 300ms transition timing on interactive elements—faster feels snappy, slower feels sluggish and undermines the responsive brand promise.