Money is the biggest thing on the page. The award amount is the largest type on any screen it appears on, at roughly 52px on a card and 64px on an award page. Never a right-aligned column of figures.
The page answers "can I get it?" before it says anything about us. Eligibility sits above the funder's marketing copy, as a short list with a plain verdict.
Verification is present and quiet. A tick chip, "Checked 3 Sep", not a stamp block or a confidence panel. One line of provenance near the bottom of an award page. Trust should feel assumed, not argued.
We say what we don't know, in words. "Not checked". "Asks not recorded". "Reopening date not posted". A gap is never left looking like a value, and never inferred from a name.
Light only. No dark variant, ever. Declare color-scheme: light. A device set to dark must not invert the brand. Navy is for type and for buttons you press, never a page background.
2. Colour
Measured off the live studentawards.com on 3 September 2026, not invented. Navy carries type and primary actions; mint is the single accent; cream and mist are the two surfaces; coral appears only on urgency.
Navy#333665 type, buttons
Deep#292D66 body ink
Mint#0CD899 accent, primary CTA
Mint ink#05835E mint text on light
Cream#FFF8F4 hero, sponsored
Mist#F5F8FA cards, rows
Slate#78849E secondary text
Coral#FF5A47 deadline urgency only
Semantic, not decorative. Coral means a deadline is close. Mint means verified or go. Navy-filled means a warning about our own data. Nothing uses colour to be interesting.
3. Type
Display is Familjen Grotesk and text is Instrument Sans, both stand-ins until a face is licensed. The requirement that will not change: the face must have tabular figures, because money and dates stack. Check before choosing.
display / 52–64$75,000
h1 / 34–44Scholarships
h2 / 26Closing first
title / 17–19Activism and Advocacy
body / 16–17You need a transcript and about an evening.
meta / 13–14NSHSS · closes Sep 8
chip / 12–13Checked 3 Sep
Display type is tight (-0.035em to -0.045em) and set at a line-height under 1. Body is loose and comfortable. That contrast does the work a second typeface usually does.
4. The four objects
Build these four well and reuse them. Do not invent a fifth because a new section appeared.
The money card
Used on the home page for anything we want read first. Amount, funder, title, status chips, one action.
MONEY CARD
NSHSS
$1,000
Activism and Advocacy Scholarships
✓ Checked todayTranscript only
See what it asks for→
The row
The listing unit. Money left at a fixed width so amounts align down the page, then title, funder and date, then chips. Nothing else.
The chip
Every state a record can be in, and no others.
STATE CHIPS
5 days29 days✓ Checked 3 SepNot checkedApply link deadClosed, keptSponsoredA draw, not an applicationEssayAsks not recorded
The eligibility check
Ticks for what is required, a cross for what disqualifies, then one sentence of verdict. Present on every award page, above the funder's own copy.
5. Shape and space
Token
Value
Used for
--r-pill
100px
Buttons, chips, filters, search
--r-lg
26px
Money cards, hero
--r-md
20px
Rows, sheets
--r-sm
16px
Small facts, inner blocks
Gutter
20px
Every page edge on mobile
Gap
11–14px
Between rows and cards
Max width
430px
The design is a phone; desktop is the adaptation
One shadow rule: there are none. Separation comes from a 1px hairline and a fill, never from a drop shadow. Cards do not lift on hover.
6. Filters
The live site has six sort dropdowns and four filter dropdowns, one with 89 options. This replaces them with a scrolling chip row for the five things people actually want, and a sheet behind "More filters" for level, province and type.
Every chip carries its count, and every count recalculates as filters change.
Filters exclude, they do not categorise. The number one complaint about every competitor is being shown awards you cannot apply for.
A filter says what it cannot do. Province narrows only 16 of our 75 awards, so the sheet says so rather than pretending.
Contests are separated from scholarships and labelled as draws. Several of our own sponsor programs are draws, and students distrust sites that blur it.
Closed awards get their own group, struck through, kept. They never vanish.
7. Voice
Short, specific, never cute about money. Numbers instead of adjectives.
"Five days. One thousand dollars. You need a transcript and about an evening."
"Nothing here rules you out. Worth an hour."
"Sponsors can buy the spot. They can't buy where it ranks in your list."
"We'd rather show you nothing than awards you can't apply for."
Banned: empower, unlock, navigate your journey, comprehensive, seamless, tailored to you, discover opportunities, achieve your potential. If a sentence could sit unchanged on a fintech or HR site, rewrite it. Never joke about money someone needs or a deadline they missed.
8. Honesty rules, which are design rules here
These come from research with real students, who read scholarship sites through a scam lens before a design lens. For this audience, looking generic and looking untrustworthy are the same failure.
Every fact carries its source and check date, or says plainly it has not been checked.
Never claim human contact. Our checker reads the funder's own page. Nobody has spoken to any funder, and the page says so.
Dead apply links are shown as dead. Four of ours are broken today, and the honest page keeps the listing and points at the funder instead.
No invented metrics. Every number is a real number from our records or it is not there.
Placeholders are labelled as placeholders. The winner photography slots say what they are rather than inventing a student's face on a trust page.
9. Accessibility
A visible focus ring on everything interactive: 3px mint, 3px offset.
Filters are real buttons with aria-pressed, not styled divs.
No body-level horizontal scroll at 390px. Wide content scrolls inside its own container.
Tabular numerals wherever numbers stack.
Body text meets AA against its actual background, not against white in theory.
10. Open, and honest about it
Photography. There is not one real image in any of this, and for an audience that lives on Instagram it is the largest remaining gap. We hold 28 real winner profiles and no photo rights. This is a rights question, not a design one, and it is the next unblock.
The display typeface is a stand-in. Requirement: tabular figures, and a face we license rather than one that trended free.
Desktop. Designed at 430px. Wider layouts are an adaptation not yet drawn.
Sponsored treatment. Shown here as a cream card and a labelled chip. The mechanism is right; the commercial rules need Michael and Woody.