Ticket #1042, 9:14 AM
Printer on 3F jams on every second page
MediumLeo
Open
Plop UI
v0.1A sticker-pack UI kit, drawn in one cobalt marker on cream paper. Every press squishes, springs back, and buzzes on your phone.
Tokens
One cobalt marker for every line. A few spot colors picked by gut, printed underneath and slightly off. One hand-drawn font family, Sketchpop: slanted for lettering, upright for reading.
Color
Cobalt ink#2848D8
Tomato#D2381E
Mustard#F6C445
Bubblegum#F6A9B8
Periwinkle#A9B6EE
Mint#9FD8B8
Paper#FFFDF7
Contrast roles
Like Material’s “on” colors: every fill comes with the text color that reads on it. The bright blue draws lines; a deeper blue carries text.
Ink--plop-on-fill-ink6.6:1 AA
Tomato--plop-on-fill-tomato4.6:1 AA
Periwinkle--plop-on-fill-periwinkle5.8:1 AA
Mint--plop-on-fill-mint7.1:1 AAA
Mustard--plop-on-fill-mustard7.1:1 AAA
Bubblegum--plop-on-fill-bubblegum6.2:1 AA
Paper--plop-ink6.9:1 AA
Sheet, soft--plop-ink-soft7.7:1 AAA
Auto contrastText switched to deep ink: 5.2:1, AA
Type
Sketchpop Bold Italic for anything lettered
Sketchpop Regular, upright, for everything people actually read.
One family, 4 weights, italic and upright. Every letter has 3 hand-drawn versions that rotate, so repeats never look copy-pasted.
One inkEvery outline, letter and face is the same cobalt marker. Color is a second ink printed under it, a little off-register.
Stickers, not boxesThings you press are die-cut stickers with a paper border and a real shadow. Everything else is paper, tape, and ink.
Imperfect on purposeOutlines boil, fills print off-register, nothing sits at exactly 0°. Randomness is seeded, so it stays put.
Every press answersSquish on press, spring on release, a buzz on phones. Motion only happens when someone acts.
Button
The hero sticker. Peels on hover, squishes on press, springs back with an ink burst. Add a buddy for the one action that matters most on a screen.
Variants
Cobalt, with loading
Periwinkle
Mint
Tomato, destructive
Plain
Disabled, half-peeled
Sizes and icons
// one component, tilt and color are props
<Button variant="ink" size="lg" tilt={-3} buddy>Send report</Button>
<Button variant="tomato" loading={saving}>Cancel dispatch</Button>
<IconButton icon={<PhoneIcon />} label="Start SOS call" />Tooltip
A speech bubble that pops out of whatever it explains. Opens on hover and keyboard focus.
Priority sets who gets paged first.GPS accuracy is ±200 m. Ask the caller for a landmark.Sends your live location for 30 minutes.
Switch
The knob is a little face. It sleeps when off and wakes up when you flip it on.
<Switch checked={sharing} onCheckedChange={setSharing} color="mint">Share live location</Switch>Checkbox & radio
Ticks are drawn in one stroke and overshoot the box, like a pen would. Radios fill with an ink blob.
Text field
Focus swipes a highlighter across the label and makes the outline boil. Errors switch to tomato ink and say how to fix it.
Optional. Anonymous reports are fine.
Add a street, barangay, or landmark so responders can find it.
Looks good.
<TextField label="Location" error="Add a street, barangay, or landmark…" />
<TextArea label="What happened?" ruled />Tags & badges
Status labels are strips of washi tape. Removable tags peel off when you dismiss them.
Status
CriticalDispatchedEn routeResolvedUnassigned
Patterns
DotsGridStripes
Removable filters
Barangay 3Last 24 hoursFire
Counts and dots
312OnlineOn a callOffline
<Tag tone="mustard" pattern="stripes">En route</Tag>
<Tag onRemove={() => clear("brgy-3")}>Barangay 3</Tag>Avatar
Doodle faces generated from a name, so the same person always gets the same face. Real photos can drop in too.
Sizes, status and groups
Cards
Three paper objects for three jobs: a ticket stub for queue items, a taped unit card for people, a sticky note for quick context.
Mobile 2
PO2 Jun Reyes, 2 ridersEn route6min away
Tabs
Index-card dividers. The active one comes forward and joins the page. Arrow keys move between them.
- Flooding, Purok 42 min agoCritical
- Road accident, Maharlika Hwy9 min agoEn route
- Noise complaint, Brgy. 321 min agoUnassigned
- Lost child, town plaza1 h agoResolved
- Power line down, Brgy. 73 h agoResolved
Nothing flagged. Flag an incident to follow up on it here.
Progress
Filled with crayon hatching instead of a flat bar. The leading edge is a single heavier stroke.
Syncing offline reports
Units available
Response time target
Status timeline
Where an incident is right now. Done steps get a cobalt tick, the current step boils, the rest are pencilled in.
- Reported, done9:02 AM
- Dispatched, done9:04 AM
- En route, current step6 min away
- Resolved, not startedWaiting
<StatusTimeline steps={["Reported", "Dispatched", "En route", "Resolved"]} current={2} />Callout
A strip torn off a pad. Use it for things people need to know before they act, not for decoration.
Two responders are near this pin
Mobile 2 and Mobile 5 are both within 2 km. Assign the closer one first.
Location is approximate
The caller’s GPS is accurate to about 200 m. Confirm a landmark before dispatching.
Couldn’t reach the station
Your report is saved on this phone and will send when you’re back online.
Report received
Reference number 24-1187. Keep your phone nearby in case the station calls back.
Toast
Slaps onto the bottom of the screen like a stamp, then lifts off after a few seconds.
Report sent
Couldn’t send. Saved for later.
toast.success("Report sent")
toast.error("Couldn’t send. Saved for later.")