The app’s design system, plus one fix.
Colours and parts sampled from the GitHub app screens, with the new heading weights, white heading surfaces and the Manrope typeface (D32).
01 / Colours (from the app, D19)
02 / The heading fix (D29)
| Text | GitHub app | Mockups v3 |
|---|---|---|
| Screen title | ~24 px, weight 500 | 26 px, weight 800, #0D1B2E |
| Sheet / section title | ~20 px, weight 500 | 22 px, weight 800 |
| Card title (“Menu”, “Lokasi”) | 15 px, weight 600 | 17 px, weight 800; 18 px on white heading bands (D31) |
| Small label (“DIIKUTI · 3”) | 11 px, #8C949F | 12 px, weight 800, #3F4B5C |
| Secondary text | #8C949F · 2.9:1 on ground | #4F5B6B · 6.9:1 on ground |
| Body / list name | 15–16 px | 15–16 px (unchanged) |
05 / Headings get their own white surface (D30)
| Where | Before (D29) | Now (D30) |
|---|---|---|
| Screen titles (Halo, Rizky · Isi toko Anda · Diikuti · Beranda · Penjualan · Toko saya) | On the grey-blue ground | White header band under a white status bar, hairline divider, 28 px title, blue overline |
| Map sheet (Di sekitar Anda) | Whole sheet grey-blue | White sheet head with title and search; list below on the ground; 24 px title |
| Cart page (Siomay Mas Joko) | Name on the ground under the photo | Name, status and tags on a white block; menu below; 28 px |
| Admin page titles | On the ground | White title bar with divider |
03 / Parts from the app
04 / Layout rules
| Rule | Value |
|---|---|
| Font | Manrope (D32), weights 500–800. The app still ships Plus Jakarta Sans; the switch is a build task for the CTO. The Typeface switch at the bottom right shows both |
| Phone frame | Android 360 × 800; iOS 393 × 852 only where it differs |
| Margins / spacing | 16 px screen margins, 8 / 12 / 16 px gaps |
| Tap targets | ≥ 44 px; main buttons 52 px; BUKA disc 200 px |
| Corners | Rows 14, cards 16, buttons 12, sheets 22–24, pills round |
| Smallest text | 12 px (labels, tab names) |
06 / Section headings · D31
White heading bands separate sections from the background. Sales totals sit below the date heading. Inside a card the heading keeps a divider instead of a second surface. Example data.
Menu
Heading band joined to its card
7 hari terakhir
Same band for a list section
Hari ini
Totals on their own line under the date
Menu dari penjual
Bakso urat · Rp 18 rbInside a card: divider, no second surface
Diikuti · 2
Group label above separate cards
Static mockups (no scripts). All names, numbers, prices, places and times are example data. Maps are illustrations, not real streets. Design: the GitHub app (komangagent/discovergerobak) with the D29–D32 heading and typeface work, and D33–D36. Scope: PRD v2.0.1. iOS uses the same screens; only sign-in differs (Sign in with Apple).