Gabay sa disenyo · Design guide · Sprint 01
Less guessing. More breathing room. A small set of familiar components, designed to make finding support feel a little easier.
For designers and contributors. Every scholarship example on this page is fictional. These examples cannot accept applications.
01 / Typography
Friendly headings. Plain, readable body text. Small details that are easy to scan.
Headings / Fraunces · 600
Your next chapter starts here.
Body / Public Sans · 400 and 600
You don’t have to figure everything out at once. Start with your study level, check who can apply, and keep an eye on the deadline.
Dates and labels / IBM Plex Mono · 400
NOV 15, 2026 · ₱10,000 / semester · SAMPLE
Body text starts at 16px. Text fields stay at 16px on phones. Paragraphs use generous line spacing and a comfortable reading width. Serif headings add warmth; monospace labels are reserved for short details.
02 / Colors
Inspired by the Philippine flag: bughaw (blue), pula (red), and araw (sun yellow) on a soft sampaguita-white page. Light theme only.
Flag blue is used for buttons, links, and focus rings. Flag red is reserved for errors and small accents, and sun yellow is used for highlights behind dark text. Orange and gray status colors have darker text companions. Every status has a word label; color never carries the meaning alone.
All values come from styles/tokens.json. There is no default Tailwind color palette in the interface.
04 / Form fields
Visible labels, helpful hints, and errors that say how to fix the problem.
Example field only. This is not a submission form.
Enter a complete link starting with https://.
These standalone fields do not submit, save, or send what you type. The error message above is a labelled visual example.
05 / Scholarship cards
Who it’s for, what it offers, and when it closes. The details you need, in the same place every time.
Try “college” or “skills”. This stays in your browser.
Fictional demo · Applications disabled
Sample Learning Foundation · Fictional
OpenAn example of how eligibility, support, and dates will be presented in the directory.
Fictional demo · Applications disabled
Sample Learning Foundation · Fictional
OpenAn example of how eligibility, support, and dates will be presented in the directory.
All cards above are fictional design examples. Search and saved examples reset when you leave; no cookies, localStorage, or network requests are used for these controls.
Fictional example · Not an actual scholarship
This is how match explanations will read. No eligibility calculation is being made on this page.
06 / Dates and status
Important dates are easy to spot. Status words stay clear even without color.
Status examples / not live listing states
A date you can spot at a glance.
Example deadline: November 15, 2026.
Verification-label examples / no real verification claimed
07 / Checklists
A short list, a visible count, and a little progress. Try ticking an item.
Example requirements / not an application checklist
0 of 3 ready
Checklist progress resets when you leave. Nothing is saved on your device.
08 / Helpful messages
Say what happened, then offer a next step. No alarming pop-ups.
10 / Filipino identity
Symbols and wording that make the site feel Filipino. Use them with care: decorative, never a replacement for clear text.
Sun mark / brand logo
Three stars / luzon, visayas, mindanao
Sampaguita / national flower
Banig weave / header and footer band
Woven pattern inspired by banig mats. Decorative only and hidden in high-contrast mode.
Voice / Tagalog and English together
Pair Tagalog headings with a plain English line so every student can follow the important details.
