# Claude Design Prompt — Pantau ## Concept: Safe · Ambient team status layer for Jakarta startup team leads **Version 1.0 — June 2026** --- ## GOAL Design a mobile-first responsive web app home screen for **Pantau** — a lightweight team coordination tool for team leads at Indonesian startups. The screen is the first thing the team lead opens in the morning, before checking WhatsApp. Its singular job is to give the lead a calm, complete picture of what their team is working on and where attention is needed — without requiring anything from the team itself. The design must feel like a quiet briefing, not a dashboard. It should reduce anxiety, not create it. Every visual and copy decision should reinforce one feeling: *I know what's happening. I don't need to ask.* The tone is calm, focused, and honest. No gamification. No urgency unless something is genuinely urgent. No activity scores, login timestamps, or anything that implies surveillance of the team. --- ## CONTENT ### App identity - App name: **Pantau** (Indonesian for "to monitor" — with a connotation of care, not surveillance) - App language: Bahasa Indonesia throughout all UI copy, labels, navigation, and microcopy - No logo treatment needed at this stage — wordmark only, set in the app's default typeface ### Header area - Team name displayed prominently as the page title: **"Tim Produk"** - Subtitle line: current day and date in Indonesian format + member count — e.g. *"Senin, 23 Juni · 6 anggota"* - Team lead's avatar (initials circle) positioned top-right of the header as a secondary identity anchor — not a CTA ### Status summary bar A compact, scannable summary of team state shown as three pills arranged horizontally below the header. Each pill contains a small colored dot and a count label: - Dot + **"2 selesai"** (done) — green dot - Dot + **"3 berjalan"** (in progress) — blue dot - Dot + **"1 terhambat"** (blocked) — red dot This row answers "what is the shape of today?" before the lead reads a single name. It is not interactive — purely informational. ### Section label A small all-caps muted label above the list: **"tim kamu"** (your team). Sentence case equivalent in visual weight — this is a structural divider, not a heading. ### Team member cards — the primary content Six member cards in a vertical scrollable list. Each card contains: **Left:** Initials avatar circle — 34×34px, each person gets a distinct tinted background (use teal, blue, coral, purple, amber, gray — one per person, no repeats). Initials in 12px medium weight, color matched to the darker end of that person's tint ramp. **Center:** Two lines of text — - Line 1: Member's full name — 14px, weight 500, primary text color - Line 2: Current task description — 13px, weight 400, secondary text color. Single line, truncated with ellipsis if too long. Written as a short active phrase, not a project code. **Right:** Status badge — pill shape, 11px medium weight, no border, uses semantic background tint + matching dark text: - **Selesai** — green tint background, dark green text - **Berjalan** — blue tint background, dark blue text - **Terhambat** — red tint background, dark red text **Special rule for blocked cards only:** Below the task line, show one additional line — 12px, red-tinted text, with a small alert-circle icon — stating the specific blocker in plain language. Example: *"Butuh akses server dari DevOps."* This is the only card that has three lines. Done and in-progress cards have two lines only. ### Member data for the six cards (in order) 1. **Putri Utami** · Desain ulang onboarding — v2 · **Selesai** 2. **Rian Kurniawan** · Investigasi rate limit API · **Terhambat** · blocker: *"Butuh akses server dari DevOps"* 3. **Bima Santoso** · Review proposal Q3 bersama Sales · **Berjalan** 4. **Anis Nur** · Kalender konten Agustus · **Selesai** 5. **Farid Aziz** · Integrasi webhook notifikasi · **Berjalan** 6. **Maya Rahma** · Setup pipeline CI/CD staging · **Berjalan** ### Bottom navigation bar Four tabs, icon + label below each, sentence case: - **Hari ini** (home icon) — active state - **Aktivitas** (activity/pulse icon) - **Notifikasi** (bell icon) - **Pengaturan** (settings icon) Active tab uses primary text color for both icon and label. Inactive tabs use muted text color. No filled icons — outline only throughout. ### What is explicitly absent - No "last active" or "last seen" timestamps on any person - No productivity scores, task counts, or completion percentages per person - No notification badges on the nav bar - No floating action button - No search bar - No filter chips or sorting controls - Nothing that implies real-time tracking of individual behavior --- ## LAYOUT ### Device frame Render inside a realistic phone frame — rounded corners (~40px radius), a subtle hairline border, status bar at top showing 08:17 and battery/wifi icons. Frame background matches the app surface. The phone sits centered on the canvas with generous breathing room above and below. ### Screen dimensions Phone frame interior: 360px wide. All content stays within 20px horizontal padding from the screen edge. ### Vertical structure (top to bottom) 1. **Status bar** — 44px, system-level: time left-aligned, icons right-aligned 2. **Header block** — team name (22px/500), date subtitle (13px/muted), summary pills row — total approx 120px 3. **Section label** — "tim kamu" — 28px tall including 8px bottom margin 4. **Card list** — cards separated by hairline dividers (0.5px), no card borders or shadows. Each card: 56px tall normally, ~76px for the blocked card (extra line). Cards extend edge-to-edge within the padded column. 5. **Bottom nav bar** — 72px, separated from list by a top hairline, safe area padding at bottom ### Card anatomy ``` [Avatar 34px] [Name 14px/500 ] [Badge] [Task 13px/secondary ] [↳ Blocker 12px/red — blocked only] ``` Avatar is vertically centered against the name + task block. Badge is vertically centered against the name line, right-aligned. Internal card padding: 14px top and bottom, 20px left and right (matching page gutter). ### List behavior The list is scrollable — the bottom nav bar stays fixed in place. On a standard phone screen (812px viewport height), all six cards are visible without scrolling. The design shows the full list, no scrolling state needed for this mockup. ### Spacing system - Page horizontal gutter: 20px - Section label bottom margin: 8px - Summary pill gap: 8px between pills - Card dividers: 0.5px hairline, full bleed to screen edges within the padded area - Avatar to text gap: 12px - Text to badge gap: 8px (badge right-aligned, text left-aligned with flex space-between) - Nav icon to label gap: 3px - Nav items: evenly distributed across full nav bar width --- ## AUDIENCE **Primary user:** A team lead (lead produk, manajer tim, koordinator) at a Jakarta-based startup, aged 25–35. Likely uses a mid-range Android device (Samsung Galaxy A-series or similar). Speaks Bahasa Indonesia as their primary language; comfortable with English in professional tools but prefers native language in daily-use apps. Familiar with WhatsApp, Instagram, and GoJek-tier app design patterns. **Morning use context:** Opens this screen between 7:30–9:00am, often before the commute or during the first coffee. The goal in this moment is not to take action — it is to *orient*. They want to know: is anything on fire? Who needs me today? Can I relax, or do I need to send a message before 9am? **What this person is not:** A project manager using a Gantt chart. A startup founder reviewing investor metrics. A developer checking a sprint board. They are a coordinator — their job is people and flow, not tasks and timelines. **Design implications for this audience:** - Bahasa Indonesia copy is not optional — it signals that the app was built for them, not translated for them - The design must work on a 5.5–6.5 inch screen held in one hand - Touch targets must be at least 44px tall — all cards meet or exceed this - Information density should match Indonesian app norms: readable, friendly, not sparse to the point of feeling empty but never overwhelming - The calm visual feeling specifically counteracts the anxiety of a full WhatsApp inbox — this screen should feel like a breath out, not a breath in --- ## CONTEXT ### Product context Pantau is Concept 1 (Safe) from a five-concept divergence sprint for a team coordination tool in Indonesian workplaces. It sits on top of WhatsApp rather than replacing it — the team does nothing new; the lead gets structured signal from existing conversations. This home screen is the first screen the lead sees after onboarding. It is the product's daily promise: *you don't need to ask*. ### Visual feeling: calm Calm is achieved through restraint, not decoration. Specific choices that create it: - **White surfaces only** — no colored backgrounds on cards, no tinted page canvas. The only color is in the badges, avatars, and summary dots — all semantic, all small. - **One typeface, two weights** — 400 and 500 only. No bold (600+) anywhere. - **No shadows** — cards are separated by hairlines, not elevation. Nothing floats. - **No icons except where functional** — the blocked card's alert icon, and the nav bar icons. No decorative icons anywhere else. - **Generous vertical breathing room** — 14px padding inside cards feels spacious at this screen width. - **Muted secondary text** — task names, dates, labels, and nav items in secondary/muted color. Only names and the wordmark are in primary text color. - **Status color is subdued** — badge fills use the lightest tint (50-stop equivalent), text uses the darkest (800-stop equivalent) of each color ramp. Nothing is saturated. Green does not shout. Red does not alarm. ### Copy voice Warm, direct, Indonesian. Never bureaucratic. Task descriptions read like how a colleague would describe their work to you, not like a Jira ticket title. The blocker note on Rian's card reads *"Butuh akses server dari DevOps"* — a sentence, not a code. The summary pills say *"2 selesai"* — not "COMPLETED: 2." ### What success looks like A team lead opens this screen at 8am. In under 10 seconds they know: two things are done, three are running, one person is stuck and needs a specific thing from DevOps. They put the phone down and go make coffee. They did not open WhatsApp to find this out. That is the product working. --- ## Version History | Version | Date | Author | Changes | |---------|------|--------|---------| | 1.0 | June 2026 | Claude (Anthropic) | Initial prompt — five-part structure for Pantau home screen, Concept Safe |