Restrained, structured.
Hierarchy comes from scale, weight, spacing and semantic roles — not from effects. One ecosystem, not one template.
What is already decided.
Cards
20 px radius, white background, uniform thin border on all sides.
No side rails
No thick colored edge on one side only (orange/red/navy border-left).
No gradients & glass
Not on cards, buttons or content surfaces. Glass only for one documented focus surface.
Buttons
Primary: navy + white text, ≈12 px radius, 44–48 px tall. Ivory is never a button fill.
Functional icons
Line icons (Lucide on the website) for function. Emoji are not UI icons.
One header per page
Never repeat the page title as the first section heading.
Sources: ECOSYSTEM_DESIGN_CONTRACT.md §5, PRD_DESIGN_FREEZE.md §2.5 & §3, DESIGN_SYSTEM.md §4.
A repeatable rhythm.
Multiples of 4/8 px, matching the Tailwind scale used by the website. Specific values for print/social are a proposal.
- Web: 12 columns, max content width ≈1200 px.
- Social 1080 px: 72–96 px margins, one primary message.
- A4 poster: 15 mm margins, logo in a calm corner.
- Long text: 60–75 characters per line.
Approved Pill shape only for canonical utility/navbar patterns, not ordinary page buttons.
What dilutes the identity.
Per-category colors (blue badge for News, purple for Alumni).
A thick accent rail on one side — like this card.
Glassmorphism, glow, decorative shadows, cards that grow on hover.
A fourth font, including Plus Jakarta Sans, Sora, Manrope or Space Grotesk.
Different density, same family.
| Public portal | GroninGeld | |
|---|---|---|
| Target | Heritage editorial + modern community portal | Financial command centre + decision support |
| Space | Generous, narrative | Denser, compact controls |
| Serif | Sparse accents | Exceptional in dashboards |
| Mono | ≈7% | ≈3–8% |
| Semantic colors | Core palette only | Product-specific, documented finance status colors |
Approved ECOSYSTEM_DESIGN_CONTRACT.md §4, §8, §9.
Authentic, with consent.
Standard frame
Thin semantic border, 16–20 px radius. No glass overlays, thick rings or gradient frames. Meaningful alt text.
PRD_DESIGN_FREEZE.md §4.3
Rights & consent
Use community-owned or licensed photos. For individual portraits and children, obtain written consent. Honour requests not to be published.
Event photos
Real moments, not over-posed. Announce that documentation is happening and offer an opt-out.
Editorial portraits
Soft side light, calm background, shoulder- or chest-height crop, eyes on the upper third.
Image treatment
Exposure and white-balance correction only. No color filters, orange overlays or brand duotones.
Quality
At least 1600 px on the long edge for web; avoid compressed WhatsApp images for covers.