How this prototype was designed: the direction, the moodboard, and where each pattern was learned from. This page documents the prototype and is not Institute copy.
Direction
Atmospheric institutional. A cool maroon-black canvas in dark mode, warm paper in light mode, Optima for display and Avenir for body: the pairing UPLB itself uses. The whole site targets WCAG 2.2 AAA, so every text color holds at least 7:1 contrast against its ground in both themes. The theme toggle is a small physics reference: light matter and dark matter.
A one-year-old institute owns very little photography, so type, color, and structure carry most of the identity. The two authentic photographs the Institute has are used deliberately: the electronics laboratory behind the hero statement, and Francisco O. Santos Hall inside About. One photo per viewport, never a carousel.
Moodboard
oklch(0.12 0.018 350)oklch(0.185 0.032 350)#8A1538oklch(0.8 0.1 184)#FFB81Coklch(0.972 0.009 85)Color roles: maroon is ground and structure, teal is everything interactive, gold is reserved for large display and decoration. In the light theme, teal and gold darken to hold 7:1 as text; brand-true values stay in the marks.
Optima carries the display voice
Avenir carries the reading voice, at a 62 to 72 character measure, line height 1.6, never justified.
What we learned from other physics sites
Twenty-five physics institute websites were audited before this pass, from MIT and Perimeter to UP Diliman NIP and young institutes like ICTP-EAIFR in Rwanda. Each borrowed pattern below names its sources.
- Statement hero. The homepage opens with the Institute's own words as large display type over one full-bleed photograph with a heavy scrim, never a carousel. The model is Perimeter Institute's "Where tomorrow comes from" over its building interior. An earlier draft read Perimeter as photo-free; a screenshot proved otherwise, since the text-only audit could not see background media.
- Hub pages as card grids. Research clusters and programs are cards with monogram tiles, never bare link lists. The template is MIT's research-area pages; UP Diliman NIP proves the content model works with Philippine institutional copy.
- Monogram tiles instead of missing photos. Letterform tiles in maroon, teal, and gold stand in where photography does not exist yet. From Caltech's letterform identity and the initials-avatar mechanic on FMIPA ITB.
- Capped, single-column news. A hand-capped news block and a dated list keep three posts looking as intentional as thirty. From Kavli IPMU's two-register news and the editorial stacks at Oxford and the Niels Bohr Institute.
- Shallow navigation. Five items plus Connect, no dropdowns. Oxford routes one of the largest physics departments in Europe through four items; CERN through three.
- The building photo is framed, not load-bearing. Santos Hall sits framed inside About and behind internal page titles; the homepage headline belongs to the people-and-instruments photo instead.
- Depth is outsourced. Links out to live systems (the Institute's Facebook page, UPLB, UP System) rather than thin duplicated pages. From IBS CTPU's per-person scholar links and Chulalongkorn's partner rows.
- No CMS chrome. No bylines, view counters, or comment UI. The cautionary examples were KAIST's bulletin-board tables and view counters on three-posts-a-month news sections.
Conventions and compliance
- Statutory footer links. Transparency Seal (annual GAA), Freedom of Information (EO 2, s. 2016), Citizen's Charter (RA 11032), and Privacy Policy (RA 10173) link upward to the official UPLB pages with the official badges, the same pattern sister institutes use.
- GOVPH band. The footer opens with the Republic of the Philippines block (About GOVPH, Official Gazette, Open Data Portal, and the three branches' portals), the standard government-site convention UP Diliman NIP also carries.
- Attribution chain. Institute of Physics, College of Arts and Sciences, University of the Philippines Los Baños, with the full postal address and ZIP, per UPLB house style.
- The motto stays with the mothership. "Honor, Excellence, Service" is UPLB-level branding; no UPLB unit site carries it, so this footer no longer does.
- Marks. Downloaded official logo files only, never redrawn, never animated, seals ordered university before college before institute.
- Palette rationale. UP units customarily keep a distinct accent rather than cloning UPLB maroon. Here teal is the Institute's distinguishing accent from its own logo; maroon serves as UP-institutional ground. Documented for review by the university's brand custodians.
- For handover. The production domain should be first-level iop.uplb.edu.ph; content is kept portable for the campus WordPress stack.
Field study: 25 sites, August 2026. Full report available from the Institute's web working files.