Saysay Design System Demo

Complete Component Library with Design-Final Integration

Enhanced Warmth Messages

Sample News Cards

Traffic
MMDA
Metro Manila
2.5km

EDSA Traffic Update: Expect delays near Ortigas

High Priority

Heavy traffic reported along EDSA northbound due to stalled vehicle near Ortigas intersection. MMDA personnel on site.

Anong maaaring saysay nito sayo:
Your usual route to work will add 15-20 minutes. Consider taking C5 instead or leaving 30 minutes earlier.
Recently
Health
QC Government
Metro Manila
3.2km

Free vaccination drive at Quezon City Hall this weekend

The city government announces free COVID-19 and flu vaccination for all residents this Saturday and Sunday from 8 AM to 5 PM.

Anong maaaring saysay nito sayo:
Great opportunity for your family's health. Located near your usual weekend grocery route.
Recently

Design-Final News Story Cards

Outage
Meralco
Metro Manila
5.8km

Brownout scheduled in Makati CBD tomorrow 2-6 PM

Meralco announces planned power interruption in Makati Central Business District for infrastructure maintenance.

Anong maaaring saysay nito sayo:
If you work in Makati CBD, plan to work from home or bring backup power for devices.
Recently
Weather
PAGASA
Metro Manila
0.5km

Heavy rainfall warning for Metro Manila tonight

PAGASA issues yellow rainfall warning for NCR. Expect moderate to heavy rains from 6 PM to midnight.

Anong maaaring saysay nito sayo:
Bring umbrella for evening plans. Your neighborhood may experience flooding on main roads.
Recently
Health
QC Government
Metro Manila
3.2km

Free vaccination drive at Quezon City Hall this weekend

The city government announces free COVID-19 and flu vaccination for all residents this Saturday and Sunday from 8 AM to 5 PM.

Anong maaaring saysay nito sayo:
Great opportunity for your family's health. Located near your usual weekend grocery route.
Recently
Event
Barangay San Antonio
Metro Manila
1.2km

Community fiesta this weekend in Barangay San Antonio

Annual neighborhood festival featuring local food, games, and cultural performances. Open to all residents.

Anong maaaring saysay nito sayo:
Fun family activity right in your neighborhood! Great chance to meet neighbors.
Recently

Saysay Brand Identity

"Two circles in dialogue, overlapping to create something new. Where your story meets your community."

The Meaning Behind the Mark

Two circles in conversation. The overlap where understanding happens. In Filipino culture, saying something twice—"sige sige," "salamat salamat"—isn't redundancy, it's warmth. Our logo visualizes this: where your voice meets your community's ear, creating meaning in the space between.

Explore the full philosophy →

Button System (No Animations)

App Header Component

Good evening, Maria!

Quezon City • 3 updates for you

Priority & Status System

Priority Levels

Low - Informational
Medium - Plan Adjustments
High - Affects Routine
Critical - Immediate Action

Distance Indicators

Very Close
0.5km
Nearby
2.3km
Area
8.1km
Regional
15km+

Warm Color Palette

Primary Orange

Warm Gradient

Care Green

Trust Blue

Conversational Typography

Hello, friend! Kamusta ka?

Your news, explained with care

Making sense of what matters

We believe news should feel like a conversation with a caring friend. That's why we explain not just what happened, but why it matters to you personally.

Updated just now • 2.5km from you • Takes 5 min to read

Predictive Search

Contextual Loading States

Brewing your morning news...

Coffee not included ☕

Checking the weather for you...

Hope it's nice out!

Gesture-Enabled Card

Try swiping left or right on mobile, or drag with mouse on desktop

Traffic
MMDA
Metro Manila
8.1km

New bike lane opens on Katipunan Avenue

The protected bike lane from Ateneo to UP is now operational, providing safer cycling route for commuters.

Anong maaaring saysay nito sayo:
Perfect for your weekend cycling routine! Safer route to visit University area.
Recently

Smart Feed Container

Pull-to-refresh, infinite scroll, and scroll-to-top built in

Story 1

This is a sample story in the smart feed container.

Story 2

This is a sample story in the smart feed container.

Story 3

This is a sample story in the smart feed container.

Loading States

News Card Skeleton

News Feed Loading

Delightful Empty States

All quiet in your neighborhood!

Enjoy your coffee, we'll let you know if anything comes up.

Help us help you!

Your news is waiting, just need to know where you are!

No matches found

Try different keywords or check your spelling.

Connection lost!

Check your connection and we'll get you back online.

Something went wrong!

We're fixing it as fast as we can. Hang tight!

Filipino Warmth & Personality

Hugot for today: "Traffic ka na naman... parang feelings ko, hindi gumagalaw."

Motion & Haptic Feedback

* Haptic feedback works on supported mobile devices