Tandang Sora Flood Control Project
Brgy. Tandang Sora, Quezon City
Flood controlIn progress
Verified on siteView report
01 · Brand
The B that watches over public works
The owner’s logo, used as supplied: a rounded B holding a civic hall and a road, beside a stacked BANTAY / BAYAN wordmark. Never redrawn, never stretched, only Bantay Red, white or charcoal.
Real projects. Real change.
Brand moment · white on Bantay Red · tagline 22 / 700, +24% tracking · left-aligned under the logo, never wider than it · one line on desktop, two lines (“Real projects.” / “Real change.”) on phones
Real projects. Real change.
Default · red on white or off-white
App icon · white B on red
Real projects. Real change.
Dark · white on charcoal
App icon
180 · iOS home
32
16
- Clear space on every side ≥ the height of the B’s road stroke (dashed box, about 1/8 of the logo height).
- Full lockup at 120 px wide and up. Mark only below 120 px: app icon, favicon, avatars, small footers.
- Minimum mark 24 px tall; full lockup 120 px wide.
- Three colours only Bantay Red, white, charcoal. Never stretched, outlined or redrawn.
512 · store listing, splash
02 · Colour
One red, warm white
Four core colours carry the brand. Nothing red ever means “wrong”: errors and rejections are charcoal with an icon.
Bantay Red
Logo, brand surfaces, pins, large text
Warm Off-White
Page background
Very Pale Pink
Icon tiles, highlights, pattern
Charcoal
Text, dark surfaces, Rejected
One red
Bantay Red is the only red.
#FF1B1B · white on it 3.87:1 · large text only
Adapt the text, not the red
Red fill → white label 19 / 700 or larger
Open bountySmall text → charcoal, red icon, arrow or underline
20 USDCRed text only at 24 px, or 19 px bold
Charcoal on off-white 15.9:1 · on pale pink 13.9:1 · red never carries small text
Red states · one red, shifted only on press
Bantay Red · default
--color-action
#FF1B1B
Hover
--color-action-hover
#F01414
Pressed
--color-action-pressed
#E00E0E
Neutrals
White
--color-white
#FFFFFF
Page
--color-page
#FFF7F5
Subtle
--color-subtle
#FBEFEC
Border
--color-border
#F1E2DE
Border strong
--color-border-strong
#E3CFCA
Text primary
--color-text-primary
#1F1F1F
Text secondary
--color-text-secondary
#6B6360 · 5.55:1
Text muted
--color-text-muted
#9E9592
Disabled labels only
Disabled fill
--color-disabled
#EDE4E1
Overlay
--color-overlay
Charcoal 56%
Status · no status is red
Verified on site
--verified-*
#1D7A45 / #E3F4EA
Open bounty
--open-*
#1F1F1F · icon #FF1B1B / #FFE4E4
In review
--review-*
#1F1F1F · #B7791F / #FFF4DD
Not paid
--notpaid-*
#6B6360 / #F3ECEA
Rejected
--rejected-*
#1F1F1F / #ECE7E5
Roads
--category-*
#47526B / #E9EDF5
Map
Land
--map-land
#F7F3F1
Road
--map-road
#FFFFFF
Road casing
--map-road-casing
#EADFDB
Major road
--map-road-major
#F1E2DE
Water
--map-water
#DCEAF5
Park
--map-park
#D9EDD5
Label
--map-label
#8A817E
Pin verified
--pin-verified
#1D7A45
Pin no report
--pin-none
#7A7371
You
--you
#2F6BFF
Inside the app
Off-white / White · Pale Pink · Charcoal · Red 5%
Brand, social, outdoor
Bantay Red 40–60% · Off-white · Pale Pink · Charcoal
03 · Type
Plus Jakarta Sans, one family
ExtraBold for the voice, Regular for reading. Sentence case headlines. Uppercase only for the tagline and overlines. No monospace: metadata is Medium with tabular figures.
Real projects. Real change.
Tunay na proyekto. Tunay na pagbabago.
Aa
400 Regular · body500 Medium · metadata600 SemiBold · labels, buttons800 ExtraBold · display, headlines
Display XLCampaign, outdoorReal projects.64 / 64 · 800 · −3%
DisplaySocial, reward amount20 USDC48 / 50 · 800 · −2.5%
H1Desktop page titleTandang Sora Flood Control36 / 40 · 800 · −2%
H2Section titleOfficial details28 / 34 · 800 · −1.5%
H3Mobile page titleBarangay Road Improvement22 / 28 · 700 · −1%
TitleCards, sheets, listsBatasan Hills Elementary School Building18 / 24 · 700 · −0.5%
Body largeLeadPhotos and videos from the site, recorded by people who live nearby.17 / 26 · 400
BodyDefaultThe first verified submission for this project earns 20 USDC.15 / 22 · 400
Body smallMinimum for contentBrgy. San Isidro, Taytay, Rizal14 / 20 · 400
LabelChips, badgesVerified on site13 / 18 · 600 · buttons 15
OverlineSection labelsMobile app preview12 / 16 · 600 · +16%
MetadataDates, IDs, sizes12 / 16 · 500 · tabular
04 · Pattern
Quarter circles, halves, leaves
The curves of the B, cut into a square grid. Red, pale pink, warm white. One photo shape per composition. In the app, only at the edges.
Pieces: half circle · quarter circle · leaf · circle · photo mask (campaign photos only) · icon circle. Colours: Bantay Red, Pale Pink, Subtle.
Corner · bottom right
Empty states, splash. 2 × 2 grid, 56 px cells.
Corner · top right
Reward and onboarding screens. Pale pink only, behind nothing.
Edge · social
Posts and outdoor. Red-forward, may hold one photo.
05 · Icons
Phosphor, filled and regular
Feature icons are Phosphor Fill in Bantay Red on a pale pink 12 px tile. Interface icons are Phosphor Regular in charcoal or Bantay Red. One family, never mixed.
- Projects Map
- Record Evidence
- Reports
- Earn Rewards
- Community
- Impact
Interface icons · Regular, 24 px
06 · Space & shape
Soft and friendly
An 8 px grid. Radii follow the rounded B. White card on off-white first, then a border, then a shadow.
Spacing
XS
S
SM
M
L
XL
2XL
3XL
4XL
Icon to label 8 · card padding 16 mobile, 24 desktop · section gap 48–64
Radius
Small8 · thumbnails
Control12 · buttons, inputs, tiles
Card16 · cards, media
Large24 · panels, posts
Modal28 · sheet top
Pill999 · chips, badges
Borders
Default1 · #F1E2DE
Strong · inputs1 · #E3CFCA
Error · charcoal1.5 · #1F1F1F
Shadow & focus
Card0 1 2 · 0 6 20 · 5%
Float0 10 32 · 14%
Selected + focus2 · #FF1B1B · ring 3 · 24%
07 · Components
Twenty parts for the MVP
Calm inside: white and off-white, one red action. Sizes in small grey type are the build spec. Tap targets are 44 px or larger.
Actions and input
Button, input, search, filter chip.
01Button
One primary per screen. Destructive is charcoal, never red.
H 48 (52 sticky) · R 12 · P 0 24Red: 19 / 700 · others 15 / 700Icon 20 · gap 8Focus ring 3 · red 24%
DefaultHoverPressedDisabled
Primary
Default
Hover
Pressed
Disabled
Secondary
Default
Hover
Pressed
Disabled
Tonal
Default
Hover
Pressed
Disabled
Tertiary
Default
Hover
Pressed
Disabled
Destructive
Default
Hover
Pressed
Disabled
Disabled buttons always come with a line that says why, for example “Add 1 shot to each required point to continue.”
02Input
Label always above. Errors are charcoal with a warning icon.
H 48 · R 12 · P 0 16Focus: 2 Bantay Red + ringError: 1.5 charcoal
DefaultAdd a note (optional)
e.g. current status, progress
FocusBarangay
Tandang Sor
ErrorPayout address
0x71C9…
This address is too short. Paste the full address.DisabledProject
Tandang Sora Flood Control
03Search
First control on the Map screen.
H 48 · R 12 · icon 20 · gap 12Clear 44 × 44
Search projects, places, or LGU…
EmptyTaytay, Rizal
Filled04Filter chip
Category, single choice. Selected: pale pink fill, charcoal label, 2 px red border.
H 36 · hit 44 · R pill · P 0 16Label 13 / 600 charcoal
Selected: All · Unselected: Roads, Schools, Health, Bridges
Status and record
Status badge, fact rows, verification block.
05Status badge
Always icon + words. No status is red.
H 28 · R pill · P 0 12Icon 14 fill · 13 / 600
Verified on site
Open bounty
In review
Not paid
Rejected
Rejected
Category and official status chips, no icon
RoadsFlood controlIn progressCompleted
10Fact rows
Label left, value right, figures tabular.
Row P 12 0 · divider 114 / 400 secondary · 14 / 600 value
- Implementing agency
- DPWH
- Project cost
- ₱12,500,000
- Start date
- 15 Jan 2026
- Target completion
- 31 Dec 2026
11Verification block
Connects evidence to trust. Quiet, one green icon.
Icon 24 · gap 1215 / 700 · metadata 12 / 500
Verified on siteBrgy. Tandang Sora, Quezon City
Not yet recorded on siteBrgy. Tandang Sora, Quezon City
Verified · No record yet
Projects and reports
Project card, list item / map preview card, report timeline item.
06Project card
Photo, title, place, chips, facts, status, one action.
R 16 · photo 16:10 · P 16Title 18 / 700, 2 lines max
07List item / map preview
64 px thumbnail. The map preview floats and has a close button.
Thumb 64 (72 preview) · R 12Title 18 / 700 · place 14
Commonwealth Ave. Drainage Upgrade
Quezon City · 1.2 km
20 USDCOpen bounty
Novaliches Health Center
Quezon City · 3.1 km
Barangay Road Improvement
Brgy. San Isidro, Taytay, Rizal
RoadsIn progress
18Report timeline item
Done, verified, current, upcoming, rejected.
Dot 28 · line 2 · gap 12Step 15 / 700 · time 12 / 500
- Submitted05 Oct · 14:52
9 files sent from the site.
- Verified on site06 Oct · 09:10
Location, signboard and pan checked.
- Payout on holduntil 08 Oct
Sent after the hold ends.
- 20 USDC sent—
Done · Verified · Current · Upcoming. Rejected uses a charcoal dot with an x (see states).
Map
Map pin and cluster on a warm, quiet base. Pins are the loudest thing on it.
08Map pin
Teardrop with a glyph, so status is never colour alone.
Pin 32 × 42 · ring 2.5 whiteSelected 44 × 58 · floataria-label: status + project
Open bountyBantay Red · dot
Verified#1D7A45 · check
No report#7A7371 · ring
Selected44 × 58 · float shadow
You#2F6BFF · ring 3 · halo 14
09Map cluster
Bantay Red circle, white count, grows with the count.
2–9: 40 · 10–99: 48 · 100+: 60Count 22 / 800 (large text on red)
Small40
Medium48
Large60
Open bounty
Verified on site
No report
You
Legend
Evidence and brand pieces
Evidence media card, feature icon tile, pattern cluster.
12Evidence media card
Portrait 9:16, never cropped into a shape. Photo: white tag. Video: charcoal tag, play, duration.
R 16 · tag H 24 R 8Play 48 · time outside the frame
Video0:15
Photo
Photo
Video0:09
19Feature icon tile
Phosphor Fill, Bantay Red, on pale pink. Three sizes.
96 · 64 · 48 tile · R 12 (16 at 96)Glyph 56%
96 onboarding · 64 feature grid · 48 lists and posts
20Pattern cluster
2 × 2 grid of pattern pieces, anchored to a corner. Never behind text or data.
Cells 48 / 56 / 6490° steps only · no gradients
A · warm
B · quiet, app
C · loud, social
Navigation
Tabs and the bottom navigation from the spec.
13Tabs
Active: charcoal label and a 3 px red bar.
H 44 · gap 24 · 13 / 600
Active: Official details · Default: Location, All reports
14Bottom navigation
Map · Reports · Record · Wallet · Help. Record is the raised centre button.
H 76 · item 60 · icon 24Record 56 · ring 4 · raised 22
Active: Map (red filled icon, charcoal label) · Default: Reports, Wallet, Help · Primary: Record
Feedback
Bottom sheet, toast, upload progress. Each says what happened and what to do next.
15Bottom sheet / modal
Over a 56% charcoal scrim. One primary, one way out.
R 28 top · P 8 16 24Handle 40 × 4 · enter 300 ms
In range
Record Tandang Sora Flood Control Project
A 15 s signboard video, then a few shots of the site. About 5 minutes.
Too far
Move closer to record
Recording opens when you are within 150 m of the project site.
16Toast
Above the nav. Short, with one action. Errors are charcoal-bordered, never red.
Min H 56 · R 16 · P 8 8 8 16Body 14 · action 44 high
Saved. We will send it when you are back online.
1 file did not send. Your other 7 are safe.
Info (charcoal) · Error (white, charcoal border, warning icon)
17Upload progress
Each file sends on its own; only a failed file is sent again.
Bar H 8 · R pillRow min H 48 · size 12 / 500
Sending
3 of 8 sent · Wi-Fi recommended
- Signboard videoSent
- Most striking view · 1Sent
- Most striking view · 2Not sent
- Whole structure · 148%
08 · Screens
Calm inside
Four screens built only from the parts above. One red brand moment and one primary action each, and the primary is the largest control.
Search projects, places, or LGU…
Barangay Road Improvement
Brgy. San Isidro, Taytay, Rizal
RoadsIn progress
A · Map
Lockup, search, categories, red pins, preview card. Primary: Record.
Tandang Sora Flood Control Project
Brgy. Tandang Sora, Quezon City
Flood controlIn progressOpen bounty
- Implementing agency
- DPWH
- Project cost
- ₱96.5M
- Target completion
- Aug 2026
First verified submission earns
20 USDCRecord within 150 m of the site.
Contract C-2025-0412 · flood wall and drainage along Culiat Creek.
B · Project detail
Photo, title, chips, facts, bounty. Primary: Record evidence, sticky.
3. Whole structure
Looks clear
Step back and get all of the structure in the frame.
Add a note (optional)
e.g. current status, progress
C · Record evidence
One checklist point at a time. Primary: the 72 px shutter.
First verified submission
20 USDC
Your photos are now part of the public record for Tandang Sora Flood Control Project.
D · Reward moment
Warm and calm. No confetti, no coin, no exclamation. Primary: View wallet.
10 · Outdoor
One billboard
2:1, reusing the brand-promise layout: logo top-left, two-line headline, the four feature icons, a person in a pattern shape, a cluster on one edge.
Real projects.
Real change.
Tunay na proyekto. Tunay na pagbabago.
- Browse
projects - Record
evidence - See
reports - Earn 20 USDCfirst verified
Billboard · 2:1 · on a plain wall mount · icons: Browse projects, Record evidence, See reports, Earn 20 USDC
Loud outside
Feed posts at 4:5 (1080 × 1350, shown at 40%). The same type, red, pattern and icons as the app. Factual, never accusatory.
Sama‑sama para sa mas maayos na bayan.
with consent
01 Campaign · Bantay Red, white headline, people in a pattern shape
Real projects.
Real change.
campaign
02 Brand promise · off-white, four feature icons
with consent · full bleed
Mas maayos na bayan, sama‑sama.
03 Field photo · solid charcoal plate, no text on the photo
never cropped into a shape
Tandang Sora Flood Control Project
Brgy. Tandang Sora, Quezon City
04 Project report · the record, factual